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 – 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
然后在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 – 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;*/
}
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. ...
随机推荐
- QNetworkAccessManager的异步与线程
Qt版本5.1.1 以HTTP操作为例 Qt中的HTTP操作都是异步的. 内部通过线程实现 创建线程的时机在QNetworkReplyHttpImplPrivate::postRequest() vo ...
- Ios插件开发
Ios插件开发 http://www.exmobi.cn/course/course_26.html Android插件开发 http://www.exmobi.cn/course/course_25 ...
- Android（java）学习笔记85：案例拨号程序
手机拨号程序:(只有程序代码) package cn.itcast.phone; import android.app.Activity; import android.content.Intent; ...
- android开发之路10（文件的读写）
1.安卓中文件的数据存储实例(将文件保存到手机自带存储空间中): ①MainActivity.java public class MainActivity extends Activity imple ...
- customerized convert from field type to DB field's type
@LastModifiedDate @Convert(converter = LocalDateTime2TimestampConverter.class) @Slf4j public class L ...
- 移植最新u-boot（裁剪和修改默认参数）之韦东山笔记
1.下载.建立source insight工程.编译.烧写.如果无运行分析原因 tar xjf u-boot-2012.04.01.tar.bz2 cd u-boot-2012.04.01 make ...
- SQL in与exists相关性能问题总结
SQL in与exists相关性能问题总结 in 和 exists in 和 exists的是DBA或开发人员日常工作学习中常用的基本运算符,今天我就这两个所带来的性能问题进行分析总结,方便自己与他 ...
- ie6/7/8中span右浮动折行问题的解决方案
浮动标准: W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻时的情况有如下解释.以下是关键段落: A floated box is shifted to the left or ri ...
- 屏蔽cBox广告的方法 无需安装软件
在hosts文件中加入两句代码: 127.0.0.1 games.cntv.cn 127.0.0.1 d.cntv.cn
- ss 如何解决margin-top使父元素margin失效
给子元素设置margin-top的时候父元素的也会受影响.会产生子元素和父元素margin合并的问题. 解决办法: 给父元素设置padding.或者border把父子的margin之间隔开. 一般来说 ...