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;*/

}

最新文章

  1. EntityFramework 外键值映射
  2. Coretext实现图文混排及Gif图片播放
  3. 怎么计算Oracle的表一条记录占用空间的大小
  4. 内置函数 和 select练习3
  5. oracle的冷备份
  6. mysql创建PATH快捷
  7. http://host:8399/arcgis/rest/services/ 访问不了
  8. 【LeetCode】5. Longest Palindromic Substring 最大回文子串
  9. 【转】wireshark过滤规则
  10. 关于java函数参数的修改能否带出来
  11. css3制作一个漂亮的按钮
  12. Webdriver实现下载功能，屏蔽掉windows弹出的对话框，FireFox下设置浏览器的属性，两种实现方式：
  13. 童话故事 --- 什么是SQL Server Browser
  14. SSM-MyBatis-06：Mybatis中openSession到底做了什么
  15. 彻底搞懂spark的shuffle过程（shuffle write）
  16. day14 Python函数之可变长参数
  17. java 基础02 打包package
  18. 前端 HTML 标签嵌套规则
  19. cas Cas20ProxyReceivingTicketValidationFilter
  20. python字符串格式化--dict传参

热门文章

  1. Asp.Net 之 服务器端控件与客户端控件的区别
  2. 杂乱无章之javascript（二）
  3. PostgreSQL解决&quot;Abc_de_fghijkl_mn&quot; 首字母小写去掉下划线并且下划线后面的第一个字母大写或首字母大写去掉下划线并且下划线后面的首字母大写的js
  4. 使用 collectionView 实现表头,区头,区尾
  5. CSS skills: 4) goto page head script
  6. webView中支持input的file的选择和alert弹出
  7. vsftp实现ftps加密传输数据
  8. BZOJ 3505
  9. VS操作Sqlite数据库
  10. Ajax返回xml类型数据