1. 引言
Paste_Image.png
2. 分析
- 數(shù)據(jù)從mongodb中獲取
- 每頁顯示多少條數(shù)據(jù)
- 翻頁功能有
前一頁,顯示當(dāng)前頁和總頁數(shù),后一頁
3. 實現(xiàn)
3.1 在settings.py中增加mongo的連接
from mongoengine import connect
connect('58toncheng', host='127.0.0.1', port=27017)
settings.py全部內(nèi)容如下
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.9/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '921jusx@-^@!qolo+aul2(_#*6k!_)+z&)9ci)+nf@i35_=r52'
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'pure',
]
MIDDLEWARE_CLASSES = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'django_web.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')]
,
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'django_web.wsgi.application'
# Database
# https://docs.djangoproject.com/en/1.9/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/1.9/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/1.9/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
# 連接mongodb, 在其它模塊文件中就能引用了
from mongoengine import connect
# connect('blog', host='127.0.0.1', port=27017)
connect('58tongcheng', host='127.0.0.1', port=27017)
3.2 在models.py中定義類模型獲取數(shù)據(jù)
models.py全部內(nèi)容如下
from django.db import models
from mongoengine import *
# # 這里導(dǎo)入只是為了此文件方便測試, 實際運行中在settings中導(dǎo)入
# from mongoengine import connect
# # connect('58tongcheng', host='127.0.0.1', port=27017)
# connect('blog', host='127.0.0.1', port=27017)
# Create your models here.
class ArtiInfo(Document):
# 變量名要和庫中的一致, 且?guī)熘械乃凶侄味家獙戇M來
# des = StringField()
# title = StringField().png' %}
# scores = StringField()
# tags = ListField(StringField())
# 表示字符串
pub_date = StringField()
look = StringField()
# 表示字符串列表
area = ListField(StringField())
title = StringField()
cates = ListField(StringField())
# 表示整型
price = IntField()
time = IntField()
url = StringField()
# 因為是取數(shù)據(jù)所以必須要告訴從哪個collection中取得數(shù)據(jù), 如果是新建就沒有必要了
# meta = {'collection': 'arti_info'}
meta = {'collection': 'item_info'}
# 輸出看下i相當(dāng)于Document字典, 所以取出字典中的值, []中的數(shù)字表示要取出幾條數(shù)據(jù)
# for i in ArtiInfo.objects[:2]:
# print(i.des, i.title, i.scores, i.tags)
# print(i.pub_date, i.look, i.area, i.price, i.time)
3.3 在views.py中定義視圖函數(shù)home, index
views.py全部內(nèi)容如下
from django.shortcuts import render
# 從模塊中導(dǎo)入類ArtiInfo
from pure.models import ArtiInfo
from django.core.paginator import Paginator
# Create your views here.
# 定義視力函數(shù)返回原始頁面
def home(request):
return render(request, 'index.html')
# 定義視力函數(shù)返回包含上下文且有翻頁功能的頁面
def index(request):
# 可以直接在這里定義上下文
'''
context = {
'title': 'Just a title',
'des': 'Just a description',
'score': '1.0'
}
'''
# des = StringField()
# title = StringField()
# scores = StringField()
# tags = ListField(StringField())
# 多少條為一頁, 這里是4條為一頁
limit = 4
# 類實例化, 即變量arti_info被賦予了類Arties = StringField()
arti_info = ArtiInfo.objects
# 對數(shù)據(jù)進行分頁
paginator = Paginator(arti_info, limit)
# 獲取當(dāng)前分頁的頁碼數(shù)
page = request.GET.get('page', 1)
# 查看下request是什么內(nèi)容
print(request) # <WSGIRequest: GET '/index/?page=17'>
# 查看下request.GET又是什么內(nèi)容
print(request.GET) # <QueryDict: {'page': ['17']}>
# 裝載指定的頁
loaded = paginator.page(page)
'''
context = {
'title': arti_info[0].title,
'des': arti_info[0].des,
'score': arti_info[0].scores,
}
'''
# context中的ArtiInfo可以隨便是其它的名字
context = {'ArtiInfo': loaded}
# 返回數(shù)據(jù)包括上下文context
return render(request, 'index_paginator_58.html', context)
# Paginator用法說明
'''
iter = 'aaaabbbbccccddddeeee'
paginator = Paginator(iter, 4)
page1 = paginator.page(1) 分頁1
page1.object_list 當(dāng)前分頁內(nèi)容
out: 'aaaa'
page3 = paginator.page(3) 分頁3
page3.object_list 當(dāng)前頁內(nèi)容
out: 'cccc'
page3.has_next() 當(dāng)前分頁是否有下一頁
out: True
page3.number 當(dāng)前分頁的頁碼: 3
page3.paginator.num_pages 總共有幾個分頁
out: 5
page5 = paginator.page(5)
page5.has_next() 最后一頁沒有分頁了
out: False
'''
3.4 在urls.py中添加index, homeurl
urls.py全部內(nèi)容如下
from django.conf.urls import url
from django.contrib import admin
from pure.views import home, index
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^home/', home),
url(r'^index/', index),
]
3.5 最后修改模板文件
index.html全部內(nèi)容如下
{% load static %}
<!doctype html>
<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" >
<!--[if lte IE 8]>
<link rel="stylesheet" >
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" >
<!--<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/layouts/blog-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="{% static 'css/layouts/blog.css'%}">
<!--<![endif]-->
</head>
<body>
<div id="layout" class="pure-g">
<div class="sidebar pure-u-1 pure-u-md-1-4">
<div class="header">
<h1 class="brand-title">A Sample Blog</h1>
<h2 class="brand-tagline">Creating a blog layout using Pure</h2>
<nav class="nav">
<ul class="nav-list">
<li class="nav-item">
<a class="pure-button" >Pure</a>
</li>
<li class="nav-item">
<a class="pure-button" >YUI Library</a>
</li>
</ul>
</nav>
</div>
</div>
<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 >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 class="posts">
<h1 class="content-subhead">Recent Posts</h1>
<section class="post">
<header class="post-header">
<img class="post-avatar" alt="Eric Ferraiuolo's avatar" height="48" width="48" src="{% static 'img/common/ericf-avatar.png' %}">
<h2 class="post-title">Everything You Need to Know About Grunt</h2>
<p class="post-meta">
By <a class="post-author" href="#">Eric Ferraiuolo</a> under <a class="post-category post-category-js" href="#">JavaScript</a>
</p>
</header>
<div class="post-description">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</section>
<section class="post">
<header class="post-header">
<img class="post-avatar" alt="Reid Burke's avatar" height="48" width="48" src="{% static 'img/common/reid-avatar.png' %}">
<h2 class="post-title">Photos from CSSConf and JSConf</h2>
<p class="post-meta">
By <a class="post-author" href="#">Reid Burke</a> under <a class="post-category" href="#">Uncategorized</a>
</p>
</header>
<div class="post-description">
<div class="post-images pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<a >
<img alt="Photo of someone working poolside at a resort"
class="pure-img-responsive"
src="http://farm8.staticflickr.com/7448/8915936174_8d54ec76c6.jpg">
</a>
<div class="post-image-meta">
<h3>CSSConf Photos</h3>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2">
<a >
<img alt="Photo of the sunset on the beach"
class="pure-img-responsive"
src="http://farm8.staticflickr.com/7382/8907351301_bd7460cffb.jpg">
</a>
<div class="post-image-meta">
<h3>JSConf Photos</h3>
</div>
</div>
</div>
</div>
</section>
<section class="post">
<header class="post-header">
<img class="post-avatar" alt="Andrew Wooldridge's avatar" height="48" width="48" src="{% static 'img/common/andrew-avatar.png' %}">
<h2 class="post-title">YUI 3.10.2 Released</h2>
<p class="post-meta">
By <a class="post-author" href="#">Andrew Wooldridge</a> under <a class="post-category post-category-yui" href="#">YUI</a>
</p>
</header>
<div class="post-description">
<p>
We are happy to announce the release of YUI 3.10.2! You can find it now on the Yahoo! CDN, download it directly, or pull it in via npm. We’ve also updated the YUI Library website with the latest documentation.
</p>
</div>
</section>
</div>
<div class="footer">
<div class="pure-menu pure-menu-horizontal">
<ul>
<li class="pure-menu-item"><a class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a class="pure-menu-link">Twitter</a></li>
<li class="pure-menu-item"><a class="pure-menu-link">GitHub</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
index_paginator_58.html全部內(nèi)容如下
{#如果views中是直接定義的context, 則這里就可以直接寫context字典中的鍵值了#}
{#{{ des }}#}
{#{{ title }}#}
{#{{ score }}#}
{% load static %}
<!doctype html>
<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" >
<!--[if lte IE 8]>
<link rel="stylesheet" >
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" >
<!--<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="{% static 'css/layouts/blog-old-ie.css' %}">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="{% static 'css/layouts/blog.css' %}">
<!--<![endif]-->
</head>
<body>
<div id="layout" class="pure-g">
<div class="sidebar pure-u-1 pure-u-md-1-4">
<div class="header">
<h1 class="brand-title">A Sample Blog</h1>
<h2 class="brand-tagline">Creating a blog layout using Pure</h2>
<nav class="nav">
<ul class="nav-list">
<li class="nav-item">
<a class="pure-button" >Pure</a>
</li>
<li class="nav-item">
<a class="pure-button" >YUI Library</a>
</li>
</ul>
</nav>
</div>
</div>
<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">Recent Posts</h1>
<!-- 循環(huán)顯示項, views視圖中的limit限制多少條為一頁 -->
{% for item in ArtiInfo %}
<section class="post">
<header class="post-header">
<h3 class="post-title">RMB: {{ item.price }} - {{ item.pub_date }}</h3>
<p class="post-meta">
<span class="post-category">{{ item.look }}</span>
{% for cate in item.cates %}
<a class="post-category post-category-js" href="#">{{ cate }}</a>
{% endfor %}
{% for area in item.area %}
<a class="post-category-design" href="#">{{ area }}</a>
{% endfor %}
</p>
</header>
<div class="post-description">
<p>
{{ item.title }}
</p>
</div>
</section>
{% endfor %}
</div>
<div>
{% if ArtiInfo.has_previous %}
<a href="?page={{ ArtiInfo.previous_page_number }}">< Pre</a>
{% endif %}
<span>{{ ArtiInfo.number }} of {{ ArtiInfo.paginator.num_pages }}</span>
{% if ArtiInfo.has_next %}
<a href="?page={{ ArtiInfo.next_page_number }}">Next ></a>
{% endif %}
</div>
<div class="footer">
<div class="pure-menu pure-menu-horizontal">
<ul>
<li class="pure-menu-item"><a class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a class="pure-menu-link">Twitter</a></li>
<li class="pure-menu-item"><a class="pure-menu-link">GitHub</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<div class="main-content-pagitor">
{% if ArtiInfo.has_previous %}
<a href="?page={{ ArtiInfo.previous_page_number }}">< Pre</a>
{% endif %}
<span> {{ ArtiInfo.number }} of {{ ArtiInfo.paginator.num_pages }} </span>
{% if ArtiInfo.has_next %}
<a href="?page={{ ArtiInfo.next_page_number }}">Next ></a>
{% endif %}
</div>
3.6 訪問頁面
運行服務(wù): python3 manage.py runserver
http://127.0.0.1/home
Paste_Image.png
Paste_Image.png
4. 總結(jié)
用mongoengine連接mongodb更方便
在models.py中可定義獲取數(shù)據(jù)庫數(shù)據(jù)的ORM模型
mongoengine中的Document包含
StringFiled,IntField,ListField等定義ORM時, 變量名要和數(shù)據(jù)庫一致且要包含全部字段
-
django.core.paginator中的Paginator有按條目限制的分頁:
- paginator = Paginator(iter, 4) // 表示每4條分一頁
- paginator.page(1) // 分頁1
- paginator.page(1).object_list // 顯示當(dāng)前分頁內(nèi)容
- paginator.page(1).has_previous() // 當(dāng)前分頁是否有上一頁
- paginator.page(1).has_next() // 當(dāng)前分頁是否有下一頁
- paginator.page(1).paginator.num_pages // 總共分頁的數(shù)量
- paginator.page(1).previous_page_number // 上一頁頁碼
- paginator.page(1).next_page_number // 下一頁頁碼
-
網(wǎng)頁中的循環(huán)及判斷
- {% for xxx in oo %} blabla {% endfor %}
- {% if something %} blabla {% endif %}
