Django工程读取mongodb并使用分页器

pycharm开发django工程（二）

项目需求：

1. 从mongodb中读取数据，并显示到网页中

2. 在网页显示的每一页加入分页符

首先使用pycharm的企业版新建一个django的虚拟工程（参考我的上一个博客），这是初始的显示效果

这是原始的html文件，css文件在本文的最后，至于图片就随意照一张改名就行

{% load static %}

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="A layout example that shows off a blog page with a list of posts.">

    <title>Blog &ndash; Layout Examples &ndash; Pure</title>

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css' %}">

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css' %}">

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css' %}">

    <link rel="stylesheet" href="{% static 'css/layouts/blog-old-ie.css' %}">

    <link rel="stylesheet" href="{% static 'css/layouts/blog.css' %}">

</head>

<body>

<div class="content pure-u-1 pure-u-md-3-4">

    <div>

        <!-- A wrapper for all the blog posts -->

        <div class="posts">

            <h1 class="content-subhead">Pinned Post</h1>

            <!-- A single blog post -->

            <section class="post">

                <header class="post-header">

                    <img class="post-avatar" alt="Tilo Mitra's avatar" height="48" width="48"

                         src="{% static 'img/common/tilo-avatar.png' %}">

                    <h2 class="post-title">Introducing Pure</h2>

                    <p class="post-meta">

                        By <a href="#" class="post-author">Tilo Mitra</a> under <a

                            class="post-category post-category-design" href="#">CSS</a> <a

                            class="post-category post-category-pure" href="#">Pure</a>

                    </p>

                </header>

                <div class="post-description">

                    <p>

                        Yesterday at CSSConf, we launched Pure – a new CSS library. Phew! Here are the <a

                            href="https://speakerdeck.com/tilomitra/pure-bliss">slides from the presentation</a>.

                        Although it looks pretty minimalist, we’ve been working on Pure for several months. After many

                        iterations, we have released Pure as a set of small, responsive, CSS modules that you can use in

                        every web project.

                    </p>

                </div>

            </section>

        </div>

    </div>

</div>

</body>

</html>

首先要安装mongoengine

pip3 install mongoengine

然后在settings.py文件中定义mongodb的连接（要连接的mongodb数据库名为test，使用到的是test数据库里的一张名为sample的表）

from mongoengine import connect

connect('test', host='127.0.0.1', port=27017)

在models.py文件中定义读取的数据库字段

from django.db import models

from mongoengine import * 

connect('test', host='127.0.0.1', port=27017) # 指明要连接的数据库 

class ArtiInfo(Document):

    title = StringField()

    url = StringField()

    price = StringField()

    pub_date = StringField()

    look = StringField()

    area = ListField(StringField()) # 定义列表类型

    cates = ListField(StringField()) 

    meta = { 'collection': 'sample'} # 指明连接数据库的哪张表 

for i in ArtiInfo.objects[:10]: # 测试是否连接成功

    print(i.title)

在这里可以直接运行models.py文件，看是否能读出数据库里的内容，注意要把数据库中的字段全部定义出来

修改views.py文件，定义要传递到html文件中的内容

from django.shortcuts import render

from myblog.models import ArtiInfo 

def index(request):

    article = ArtiInfo.objects[:10] #只显示前10个内容

    context = {

        'ArtiInfo':article

    } 

    return render(request, 'index.html', context) # 传递context参数

修改index.html文件，在文件中循环显示从数据库中读取的数据

{% load static %}

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="A layout example that shows off a blog page with a list of posts.">

    <title>Blog &ndash; Layout Examples &ndash; Pure</title>

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css' %}">

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css' %}">

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css' %}">

    <link rel="stylesheet" href="{% static 'css/layouts/blog-old-ie.css' %}">

    <link rel="stylesheet" href="{% static 'css/layouts/blog.css' %}">

</head>

<body>

<div class="content pure-u-1 pure-u-md-3-4">

    <div>

        <!-- A wrapper for all the blog posts -->

        <div class="posts">

            <h1 class="content-subhead">Pinned Post</h1>

            {% for item in ArtiInfo %}

                <!-- A single blog post -->

                <section class="post">

                    <header class="post-header">

                        <img class="post-avatar" alt="Tilo Mitra's avatar" height="48" width="48"

                             src="{% static 'img/common/tilo-avatar.png' %}">

                        <h3 class="post-title">{{ item.title }}</h3>

                        <p class="post-meta">

                            By <a href="#" class="post-author">{{ item.pub_date }}</a>

                            {% for each in item.cates %}

                                <a class="post-category post-category-design" href="#">{{ each }}</a>

                            {% endfor %}

                        </p>

                    </header>

                    <div class="post-description">

                        <p>

                            {{ item.url }}

                        </p>

                    </div>

                </section>

            {% endfor %}

        </div>

    </div>

</div>

</body>

</html>

这是从数据库里读取的效果

添加分页器

在上面的views.py文件中添加分页器

from django.shortcuts import render

from myblog.models import ArtiInfo

from django.core.paginator import Paginator 

def index(request):

    limit = 1 #限制每一页显示的条目数量

    article = ArtiInfo.objects

    paginator = Paginator(article, limit)

    page_num = request.GET.get('page', 1) #从url中获取页码参数

    loaded = paginator.page(page_num) 

    context = {

        'ArtiInfo':loaded

    } 

    return render(request, 'index.html', context)

在Index.html文件的末尾处添加分页器

{% load static %}

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="A layout example that shows off a blog page with a list of posts.">

    <title>Blog &ndash; Layout Examples &ndash; Pure</title>

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css' %}">

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css' %}">

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css' %}">

    <link rel="stylesheet" href="{% static 'css/layouts/blog-old-ie.css' %}">

    <link rel="stylesheet" href="{% static 'css/layouts/blog.css' %}">

</head>

<body>

    <div class="content pure-u-1 pure-u-md-3-4">

        <div>

            <!-- A wrapper for all the blog posts -->

            <div class="posts">

                <h1 class="content-subhead">Pinned Post</h1>

                {% for item in ArtiInfo %}

                <!-- A single blog post -->

                <section class="post">

                    <header class="post-header">

                        <img class="post-avatar" alt="Tilo Mitra's avatar" height="48" width="48" src="{% static 'img/common/tilo-avatar.png' %}">

                        <h3 class="post-title">{{ item.title }}</h3>

                        <p class="post-meta">

                            By <a href="#" class="post-author">{{ item.pub_date }}</a>

                            {% for each in item.cates %}

                                <a class="post-category post-category-design" href="#">{{ each }}</a>

                            {% endfor %}

                        </p>

                    </header>

                    <div class="post-description">

                        <p>

                            {{ item.url }}

                        </p>

                    </div>

                </section>

                {% endfor %}

            </div>

        <div class="main-content-pagitor">

            {% if ArtiInfo.has_previous %}

                <a href="?page={{ ArtiInfo.previous_page_number }}"> 上一页</a>

            {% endif %}

            <span>{{ ArtiInfo.number }} of {{ ArtiInfo.paginator.num_pages }}</span>

            {% if ArtiInfo.has_next %}

                <a href="?page={{ ArtiInfo.next_page_number }}">下一页</a>

            {% endif %}

        </div>

        </div>

    </div>

</body>

</html>

这是最终的显示效果

本文中使用到的css文件如下：

* {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

a {

    text-decoration: none;

    color: rgb(61, 146, 201);

}

a:hover,

a:focus {

    text-decoration: underline;

}

h3 {

    font-weight: 100;

}

/* LAYOUT CSS */

.pure-img-responsive {

    max-width: 100%;

    height: auto;

}

#layout {

    padding: 0;

}

.header {

    text-align: center;

    top: auto;

    margin: 3em auto;

}

.sidebar {

    background: rgb(61, 79, 93);

    color: #fff;

}

.brand-title,

.brand-tagline {

    margin: 0;

}

.brand-title {

    text-transform: uppercase;

}

.brand-tagline {

    font-weight: 300;

    color: rgb(176, 202, 219);

}

.nav-list {

    margin: 0;

    padding: 0;

    list-style: none;

}

.nav-item {

    display: inline-block;

    *display: inline;

    zoom: 1;

}

.nav-item a {

    background: transparent;

    border: 2px solid rgb(176, 202, 219);

    color: #fff;

    margin-top: 1em;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    font-size: 85%;

}

.nav-item a:hover,

.nav-item a:focus {

    border: 2px solid rgb(61, 146, 201);

    text-decoration: none;

}

.content-subhead {

    text-transform: uppercase;

    color: #aaa;

    border-bottom: 1px solid #eee;

    padding: 0.4em 0;

    font-size: 80%;

    font-weight: 500;

    letter-spacing: 0.1em;

}

.content {

    padding: 2em 1em 0;

}

.post {

    padding-bottom: 2em;

}

.post-title {

    font-size: 2em;

    color: #222;

    margin-bottom: 0.2em;

}

.post-avatar {

    border-radius: 50px;

    float: right;

    margin-left: 1em;

}

.post-description {

    font-family: Georgia, "Cambria", serif;

    color: #444;

    line-height: 1.8em;

}

.post-meta {

    color: #999;

    font-size: 90%;

    margin: 0;

}

.post-category {

    margin: 0 0.1em;

    padding: 0.3em 1em;

    color: #fff;

    background: #999;

    font-size: 80%;

}

    .post-category-design {

        background: #5aba59;

    }

    .post-category-pure {

        background: #4d85d1;

    }

    .post-category-yui {

        background: #8156a7;

    }

    .post-category-js {

        background: #df2d4f;

    }

.post-images {

    margin: 1em 0;

}

.post-image-meta {

    margin-top: -3.5em;

    margin-left: 1em;

    color: #fff;

    text-shadow: 0 1px 1px #333;

}

.footer {

    text-align: center;

    padding: 1em 0;

}

.footer a {

    color: #ccc;

    font-size: 80%;

}

.footer .pure-menu a:hover,

.footer .pure-menu a:focus {

    background: none;

}

@media (min-width: 48em) {

    .content {

        padding: 2em 3em 0;

        margin-left: 25%;

    }

    .header {

        margin: 80% 2em 0;

        text-align: right;

    }

    .sidebar {

        position: fixed;

        top: 0;

        bottom: 0;

    }

}

.main-content-pagitor  {

    width: 50%;

    padding: 10px 20px 5px 20px;

    overflow: auto;

    margin: auto;

    /*position: relative;*/

    text-align: center;

}

.main-content-pagitor a {

    color: #cccccc;

    padding: 0 5px 0 5px;

}

.main-content-pagitor span {

    color: #585858;

    /*padding: 20px 20px 20px 20px;*/

}

Django工程读取mongodb并使用分页器的更多相关文章

Django工程目录结构优化
1.我看到这篇文章,写的不错,在此复制了一份,防止以后找不到! 感谢作者的翻译--->原文的链接:http://www.loonapp.com/blog/11/ 如果原文存在,请打开原文件阅读 ...
在线读取Mongodb数据库下载EXCEL文件
版本:Mongodb2.4.8 通过页面下载Excel文件 jsp <%@ page language="java" contentType="text/html; ...
Django工程搭建
-----环境安装 1.创建虚拟环境 mkvirtualenv django_py3_1.11 -p python3 2.安装django pip install django==1.11.11 ...
Django工程的建立以及小网站的编写
这篇博文会详细的介绍如何创建django工程,介绍我如何做了第一个网站.本文基于windows7安装了python2.7.12,Django1.8.18(LTS)版.采用的IDE为pycharm.建议 ...
python web框架 django 工程创建目录介绍
# 创建Django工程django-admin startproject [工程名称] 默认创建django 项目都会自带这些东西 django setting 配置文件 django可以配置缓存 ...
django学习笔记【001】django版本的确定&创建一个django工程
2.3 查看当前的django版本 python3. -m django --version 2.3.1 创建一个django工程 django-admin startproject mysite 在 ...
Django工程创建
方法一: 1.win+r进入cmd命令窗口: 2.找到Django的安装地址: 3.cmd窗口中利用cd 进入相应的文件夹,再输入命令如下: django-admin.exe startproject ...
Django基于Pycharm开发之一【创建django工程】
Django的工程结构,可以通过pycharm里面,选择创建django工程来直接创建,也可以通过命令行通过pip来安装. 一.通过命令行安装的步骤 Install Python. Install a ...
Django系列:（1）PyCharm下创建并运行我们的第一个Django工程
准备工作: 假设读者已经安装好python 2x或3x,以及安装好Django,以及Pycharm. 我的配置: – Python 2.7.11 – Pycharm Professional 5.0. ...

随机推荐

刚安装完jdk和eclipse需要配置什么？
还需要配置环境变量,你还要下载 apache-tomcat WEB服务器,也就是说系统能找到你的服务器,具体配置:(在windows桌面上右击“我的电脑” —> “属性” —> “高级 ...
cocos2d-x lua 触摸事件
cocos2d-x lua 触摸事件 version: cocos2d-x 3.6 1.监听 function GameLayer:onEnter() local eventDispatcher = ...
The Signals Of Process Communication
在之前大概的概述了进程之间的通信,下面笔者具体述说一下进程通信中最古老的一种通信方式之一---信号(Signals ),信号是用户进程之间通信和同步的一种原始机制,操作系统通过信号来通知进程系统中发生 ...
nodejs1
介绍: 为什么使用Node 1.解决了高并发连接时的内存占用和资源共享问题传统后台语言是多线程的,比如:每个用户占2m的内存,8G内存可以承载4000人,node是单线程,触发一个事件,可以容纳几万 ...
Newtonsoft.Json.dll序列化为json，null值自动过滤
var jSetting = new JsonSerializerSettings {NullValueHandling = NullValueHandling.Ignore}; var json = ...
换模板，修改了一下css，清新多了～
基于elf template,改了一下字体颜色和背景.布局的宽度: 博客园修改css真是方便,如果可以直接编辑template代码就更赞了- 不过相对前端web自定义,我更在意后端的服务器是否稳定: ...
iBeacon
iBeacon[1] 是苹果公司2013年9月发布的移动设备用OS(iOS7)上配备的新功能.其工作方式是,配备有低功耗蓝牙(BLE)通信功能的设备使用BLE技术向周围发送自己特有的ID,接收到该I ...
CSS之导航菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
JDBC之初识
JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口 ...
phpwind wap功能添加百度wap统计
百度推出wap统计功能后,及大的方便了个站长对wap网站的统计.PHPWIND自带的wap功能虽然说功能不是太强,但是对百度来说是非常友好的,如果再进一不优化一下页面模板,这样会对网友访问网站信息有非 ...

Django工程读取mongodb并使用分页器

Django工程读取mongodb并使用分页器的更多相关文章

随机推荐

热门专题