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. ...
随机推荐
- Linux 学习笔记 查看文件内容诸多命令
查看文件内容 1.查看文件统计信息 stat 提供文件系统上某个文件的所有状态信息 2.查看文件类型 file 用来查看文件类型 (该命令将文件分成3类:文本类型:可执行文件:数据文件) 如果你有从未 ...
- selenium python 第一个脚本
为什么选择python?我的回答很简单,简单易学,功能强大! 下面看看python和selenium 2的结合是什么样子吧 一.第一个selenium python脚本: #coding = utf- ...
- IOS横竖屏控制与事件处理
公司App里面有个需求,即所有界面都是竖屏,且不允许横屏切换,唯独有一个图表界面允许横屏.那么,根据此需求处理如下: 首先,确保App本身应该允许转屏切换: 再次,我的App里面都是走UINaviga ...
- 慕课网，我的yii2学习笔记（基础篇）
一.关于PHP知识点 1.命名空间:存放类文件的空间,可以随便定义,建议与类文件目录一致,方便管理. 注:(1).如果类没有设置命名空间,默认为顶级命名空间,在程序中可以用一下方式实例化. $mode ...
- Windows Embedded CE 6.0开发环境的搭建
最近开始在学习嵌入式,在这里首先得安装Windows Embedded CE 6.0,其中遇到了很多问题,电脑的系统以及相关配置都会在安装过程中受到影响,因此笔者就安装中的问题以及环境搭建来介绍一下. ...
- Commons CLI - Usage
Usage Scenarios The following sections describe some example scenarios on how to use CLI in applicat ...
- 慕课网上的Bootstrap学习（二）
表单 首先<form role="form" class="form-horizontal"></form> ,创建一个水平显示的表单. ...
- js笔记——浏览器及版本判断
判断IE浏览器的时候注意需要做两个判断 一个是msie 一个是Edge function myBrowser(){ var userAgent = navigator.userAgent; //取得浏 ...
- c# winform 点菜宝接口demo程序
前几天写了一篇关于c#调用 win32API的文章,有同学对点菜宝接口感兴趣,所以就把写的demo程序共享出来,大家一起讨论改进,so放百度云地址: 百度云下载地址
- AE实现投影定义和投影转换
添加引用ESRI.ArcGIS.DataManagementTools 1.获取要定义和要转换的投影 IWorkspaceFactory wsf = new ShapefileWorkspaceFac ...