使用Django搭建網站實現商品分頁功能
阿新 • • 發佈:2020-05-23
裝好Django,寫好index.html後,可以展示網頁了。但是這只是靜態頁面,沒有關聯資料庫,也不能分頁展示商品資訊。本節連線mongodb資料庫(事先已準備好資料),從中取出幾十條商品資訊,每頁展示4個商品資訊,並具有翻頁功能,做好的頁面效果大致如下:
開始程式碼:
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/即可看到效果。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。