Django工程读取mongodb并使用分页器
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Django工程读取mongodb并使用分页器,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含10271字,纯文字阅读大概需要15分钟。
内容图文
![Django工程读取mongodb并使用分页器](/upload/InfoBanner/zyjiaocheng/1064/1fdb59015b5b45d29d372868b2a8cc29.jpg)
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 – Layout Examples – 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
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 – Layout Examples – 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 – Layout Examples – 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;*/ }
原文:http://www.cnblogs.com/kylinlin/p/5184934.html
内容总结
以上是互联网集市为您收集整理的Django工程读取mongodb并使用分页器全部内容,希望文章能够帮你解决Django工程读取mongodb并使用分页器所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。