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

2020-11-02 14:40:29 浏览数 (1)

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

开始代码:

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

代码语言:javascript复制
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目录下)中,代码:

代码语言:javascript复制
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目录下)中,代码:

代码语言:javascript复制
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文件,主要修改了有文字标注的部分:

代码语言:javascript复制
<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(项目名称目录下)文件,本节中并没有修改,但也备注上:

代码语言:javascript复制
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/即可看到效果。

以上就是本文的全部内容,希望对大家的学习有所帮助。

0 人点赞