使用Django搭建网站实现商品分页功能


Posted in Python onMay 22, 2020

装好Django,写好index.html后,可以展示网页了。但是这只是静态页面,没有关联数据库,也不能分页展示商品信息。本节连接mongodb数据库(事先已准备好数据),从中取出几十条商品信息,每页展示4个商品信息,并具有翻页功能,做好的页面效果大致如下:

使用Django搭建网站实现商品分页功能

开始代码:

1、在settings.py(项目名称目录下)中,增加2段代码,分别是static文件夹位置和连接mongodb的代码:

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR,'static'),)  # 指定static文件夹位置

from mongoengine import connect
connect('ganji', host='127.0.0.1', port=27017)  # 连接ganji数据库

2、在models.py(本APP目录下)中,代码:

from django.db import models
from mongoengine import *
 
# Create your models here.
 
# 创建帖子信息类,继承自mongoengine的文件类<br data-filtered="filtered">class PostInfo(Document):  
  area = ListField(StringField())
  title = StringField()
  cates = ListField(StringField())
  price = StringField()
 
  pub_date = StringField()   # 数据集里面所有的字段都要有,就算不用也得列出来
  url = StringField()
  look = StringField()
  time = IntField()
  cates2 = StringField()
 
  meta = {'collection':'goods_info'}  # 定位好是goods_info数据集

3、在views.py(本APP目录下)中,代码:

from django.shortcuts import render
from sample_blog.models import PostInfo  # 导入已写好的数据结构
from django.core.paginator import Paginator # 导入分页器
 
# Create your views here.
def index(request):
  limit = 4 # 每页放几条帖子
  all_post_info = PostInfo.objects[:20] # 取前20个帖子的数据
  paginatior = Paginator(all_post_info, limit)  # 用分页器分页
  page_num = request.GET.get('page', 1) # 取request中的页码,取不到就为1
  loaded = paginatior.page(page_num) # 取page_num那一页的数据,一般是4条
 
  context = {
    # 首条固定的帖子信息
    'title': '三星 A5 白色',
    'des': '【图】三星 A5 白色 没有打开过 - 朝阳望京台式机/配件 - 北京58同城',
    'price': '1500',
    'area': ["朝阳", "望京"],
    'tag1': "北京二手市场",
    'tag2': "北京二手台式机/配件",
 
    # 每页更新的帖子信息
    'one_page_post': loaded
  }
  return render(request, 'index.html',context)

4、修改index.html文件,主要修改了有文字标注的部分:

<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' %}">





<!-- 修改了{{title}}等 -->
           <h2 class="post-title">{{ title }}</h2>
 
           <p class="post-meta">
             地区 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="post-author">{{ area }}</a> under <a class="post-category post-category-design" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ tag1 }}</a> <a class="post-category post-category-pure" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{tag2}}</a>
           </p>
         </header>
 
         <div class="post-description">
           <p>
             {{ des }}|价格:{{ price }}
           </p>
         </div>
       </section>
     </div>
 
     <div class="posts">
       <h1 class="content-subhead">Recent Posts</h1><!-- 增加for循环,将one_page_post值带入 -->
       {% for item in one_page_post %}
         <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">{{ item.title }}</h2>
 
             <p class="post-meta">
               地区 <a class="post-author" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ item.area }}</a>分类<!-- 再增加一个for循环,把cates里的元素都展示出来 -->
               {% for cate in item.cates %}
                  <a class="post-category post-category-pure" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ cate }}</a>
               {% endfor %}
             </p>
           </header>
 
           <div class="post-description">
             <p>
               {{ item.title }}|价格:{{ item.price }}
             </p>
           </div>
         </section>
       {% endfor %}
 
     </div>



<!-- 增加本段div,实现页面底部可翻页 -->
      <div align="center">
       {% if one_page_post.has_previous %}
         <a href="?page={{ one_page_post.previous_page_number }}" rel="external nofollow" >< Pre</a>
       {% endif %}
         <span> {{ one_page_post.number }} of {{ one_page_post.paginator.num_pages }} </span>
       {% if one_page_post.has_next %}
         <a href="?page={{ one_page_post.next_page_number }}" rel="external nofollow" >Next ></a>
       {% endif %}
      </div>

5、附上urls.py(项目名称目录下)文件,本节中并没有修改,但也备注上:

from django.contrib import admin
from django.urls import path
from sample_blog.views import index
 
urlpatterns = [
  path('admin/', admin.site.urls),
  path('index/', index),
]

以上步骤完成后,启动服务(python manage.py runserver),访问http://127.0.0.1:8000/index/即可看到效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python语言的12个基础知识点小结
Jul 10 Python
Django框架中的对象列表视图使用示例
Jul 21 Python
Python时间获取及转换知识汇总
Jan 11 Python
深入理解python中函数传递参数是值传递还是引用传递
Nov 07 Python
Python中return self的用法详解
Jul 27 Python
Django 通过JS实现ajax过程详解
Jul 30 Python
让你的Python代码实现类型提示功能
Nov 19 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
Feb 29 Python
python实点云分割k-means(sklearn)详解
May 28 Python
python实现简单的五子棋游戏
Sep 01 Python
python 开心网和豆瓣日记爬取的小爬虫
May 29 Python
python对文档中元素删除,替换操作
Apr 02 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
May 22 #Python
Python实现发票自动校核微信机器人的方法
May 22 #Python
基于django micro搭建网站实现加水印功能
May 22 #Python
基于Tensorflow一维卷积用法详解
May 22 #Python
Python参数传递机制传值和传引用原理详解
May 22 #Python
python filecmp.dircmp实现递归比对两个目录的方法
May 22 #Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
May 22 #Python
You might like
PHP XML操作类DOMDocument
2009/12/16 PHP
php Xdebug的安装与使用详解
2013/06/20 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
php探针不显示内存解决方法
2019/09/17 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python实现子类调用父类的方法
2014/11/10 Python
python实现计算倒数的方法
2015/07/11 Python
Django Highcharts制作图表
2016/08/27 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
Pycharm中如何关掉python console
2020/10/27 Python
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
行政总监岗位职责
2013/12/05 职场文书
公司合作意向书范文
2014/07/30 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
ipad隐藏软件app图标方法
2022/04/19 数码科技