資訊專欄INFORMATION COLUMN
摘要：文章目錄基礎模板設計首頁模板設計和的定義相應的視圖函數配置媒體資源的路由信息基礎模板設計在項目的文件夾新建文件該文件用于存放每個網頁頂部的代碼母嬰商城請輸入需要的商品
在項目babys的templates文件夾新建文件base.html
該文件用于存放每個網頁頂部的HTML代碼
<!DOCTYPE html><html lang="en"><head> {% load static %} <title>{{title}}</title> <link rel="stylesheet" type="text/css" href="{% static "css/main.css" %}"> <link rel="stylesheet" type="text/css" href="{% static "layui/css/layui.css" %}"> <script type="text/javascript" src="{% static "layui/layui.js" %}"></script></head><body> <div class="header"> <div class="headerLayout w1200"> <div class="headerCon"> <h1 class="mallLogo"> <a href="{% url "index:index" %}" title="母嬰商城"> <img src="{% static "img/logo.png" %}"> </a> </h1> <div class="mallSearch"> <form action="{% url "commodity:commodity" %}" method="get" class="layui-form" novalidate> <input type="text" name="n" required lay-verify="required" autocomplete="off" class="layui-input" placeholder="請輸入需要的商品"> <button class="layui-btn" lay-submit lay-filter="formDemo"> <i class="layui-icon layui-icon-search"></i> </button> </form> </div> </div> </div> </div> <div class="content content-nav-base {{classContent}}"> <div class="main-nav"> <div class="inner-cont0"> <div class="inner-cont1 w1200"> <div class="inner-cont2"> <a href="{% url "index:index" %}" {% if classContent == ""%}class="active"{% endif %}>首頁</a> <a href="{% url "commodity:commodity" %}" {% if classContent == "commoditys"%}class="active"{% endif %}>所有商品</a> <a href="{% url "shopper:shopcart" %}" {% if classContent == "shopcarts"%}class="active"{% endif %}>購物車</a> <a href="{% url "shopper:shopper" %}" {% if classContent == "informations"%}class="active"{% endif %}>個人中心</a> </div> </div> </div> </div> {% block content %}{% endblock content %} </div>{% block footer %}{% endblock footer %}<script type="text/javascript">{% block script %}{% endblock script %}</script></body></html>模板文件index.html的代碼
{% extends "base.html" %}{% load static %}{% block content %} <div class="category-con"> <div class="category-banner"> <div class="w1200"> <img src="{% static "img/banner1.jpg" %}"> </div> </div> </div> <div class="floors"> <div class="sk"> <div class="sk_inner w1200"> <div class="sk_hd"> <a href="javascript:;"> <img src="{% static "img/s_img1.jpg" %}"> </a> </div> <div class="sk_bd"> <div class="layui-carousel" id="test1"> <div carousel-item> <div class="item-box"> {% for c in commodityInfos %} {% if forloop.counter < 5 %} <div class="item"> <a href="{% url "commodity:detail" c.id %}"> <img src="{{ c.img.url }}"></a> <div class="title">{{ c.name }}</div> <div class="price"> <span>￥{{ c.discount|floatformat:"2" }}</span> <del>￥{{ c.price|floatformat:"2" }}</del> </div> </div> {% endif %} {% endfor %} </div> <div class="item-box"> {% for c in commodityInfos %} {% if forloop.counter > 4 %} <div class="item"> <a href="{% url "commodity:detail" c.id %}"> <img src="{{ c.img.url }}"></a> <div class="title">{{ c.name }}</div> <div class="price"> <span>￥{{ c.discount|floatformat:"2" }}</span> <del>￥{{ c.price|floatformat:"2" }}</del> </div> </div> {% endif %} {% endfor %} </div> </div> </div> </div> </div> </div> </div> <div class="product-cont w1200" id="product-cont"> <div class="product-item product-item1 layui-clear"> <div class="left-title"> <h4><i>1F</i></h4> <img src="{% static "img/icon_gou.png" %}"> <h5>寶寶服飾</h5> </div> <div class="right-cont"> <a href="javascript:;" class="top-img"><img src="{% static "img/img12.jpg" %}" alt=""></a> <div class="img-box"> {% for c in clothes %} <a href="{% url "commodity:detail" c.id %}"><img src="{{ c.img.url }}"></a> {% endfor %} </div> </div> </div> <div class="product-item product-item2 layui-clear"> <div class="left-title"> <h4><i>2F</i></h4> <img src="{% static "img/icon_gou.png" %}"> <h5>奶粉輔食</h5> </div> <div class="right-cont"> <a href="javascript:;" class="top-img"><img src="{% static "img/img12.jpg" %}" alt=""></a> <div class="img-box"> {% for f in food %} <a href="{% url "commodity:detail" f.id %}"><img src="{{ f.img.url }}"></a> {% endfor %} </div> </div> </div> <div class="product-item product-item3 layui-clear"> <div class="left-title"> <h4><i>3F</i></h4> <img src="{% static "img/icon_gou.png" %}"> <h5>寶寶用品</h5> </div> <div class="right-cont"> <a href="javascript:;" class="top-img"><img src="{% static "img/img12.jpg" %}"></a> <div class="img-box"> {% for g in goods %} <a href="{% url "commodity:detail" g.id %}"><img src="{{ g.img.url }}"></a> {% endfor %} </div> </div> </div> </div>{% endblock content %}{% block footer %} <div class="footer"> <div class="ng-promise-box"> <div class="ng-promise w1200"> <p class="text"> <a class="icon1" href="javascript:;">7天無理由退換貨</a> <a class="icon2" href="javascript:;">滿99元全場免郵</a> <a class="icon3" style="margin-right: 0" href="javascript:;">100%品質保證</a> </p> </div> </div> <div class="mod_help w1200"> <p> <a href="javascript:;">關于我們</a> <span>|</span> <a href="javascript:;">幫助中心</a> <span>|</span> <a href="javascript:;">售后服務</a> <span>|</span> <a href="javascript:;">母嬰資訊</a> <span>|</span> <a href="javascript:;">關于貨源</a> </p> </div> </div>{% endblock footer %}{% block script %}layui.config({ base: "{% static "js/" %}" }).use(["mm","carousel"],function(){ var carousel = layui.carousel, mm = layui.mm; var option = { elem: "#test1" ,width: "100%" ,arrow: "always" ,height:"298" ,indicator:"none" } carousel.render(option);});{% endblock script %}使用{%load static %}讀取靜態資源
重寫base.html定義的接口content
實現“今日必搶”的商品熱銷功能，該功能共分為2頁，每頁自動進行輪播展示
{% url ‘commodity:detail’ c.id %}是使用商品的主鍵字段id生成對應的商品詳細頁的路由地址，當單擊商品即可查看商品詳細頁。
{{ c.img.url }}代表當前遍歷對象的字段img
{{ c.name }}獲取當前遍歷對象的字段name
{{ c.discount|floatformat:‘2’ }}獲取當前遍歷對象的字段discount
{{ c.price|floatformat:‘2’ }}獲取當前遍歷對象的字段price
實現某分類的商品熱銷功能，分別為“寶寶服飾”、“奶粉輔食”和“寶寶用品”
重寫base.html定義的接口footer和script
commodity-urls.py
from django.urls import pathfrom .views import *urlpatterns = [ path(".html",commodityView,name="commodity"), path("/detail..html" ,detailView,name="detail"),]shopper-urls.py
from django.urls import pathfrom .views import *urlpatterns = [ path(".html",shopperView,name="shopper"), path("/login.html",loginView,name="login"), path("/logout.html",logoutView,name="logout"), path("/shopcart.html",shopcartView,name="shopcart"),]commodity-views.py
from django.http import HttpResponsedef commodityView(request): return HttpResponse("Hello World")def detailView(request, id): return HttpResponse("Hello World")shopper-views.py
from django.http import HttpResponsedef shopperView(request): return HttpResponse("Hello World")def loginView(request): return HttpResponse("Hello World")def logoutView(request): return HttpResponse("Hello World")def shopcartView(request): return HttpResponse("Hello World")bay小的url.py
from django.contrib import adminfrom django.urls import path, include, re_pathfrom django.views.static import servefrom django.conf import settingsurlpatterns = [ path("admin/", admin.site.urls), path("", include(("index.urls","index"),namespace="index")), path("commodity", include(("commodity.urls","commodity"),namespace="commodity")), path("shopper", include(("shopper.urls","shopper"),namespace="shopper")), re_path("media/(?P.*)" , serve, {"document_root":settings.MEDIA_ROOT}, name="media"),]
re_path("media/(?P.*)", serve, {"document_root":settings.MEDIA_ROOT}, name="media"),
配置媒體資源的路由信息
一定要配置否則無法加載媒體資源
運行Django 服務器
瀏覽器打開 http://127.0.0.1:8000/
參考資料：《精通Django 3 Web開發》
素材：https://github.com/xyjw/Django3-Web
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/119019.html
摘要：文章目錄商品列表頁邏輯代碼商品列表頁的數據渲染商品詳細頁實現商品收藏商品列表頁邏輯代碼的定義視圖函數商品列表獲取請求參數變量是商品搜索功能的關鍵字，它與模型的字段進行模糊匹配，因此查詢條件為。 ...
摘要：內部結構時，頁面發生錯誤會直接拋給前臺，便于程序員進行修改。，用戶新建了需要在該欄目下進行注冊。拓展閱讀圖解筆記基礎教程自強學堂備注該筆記源自網易微專業開發節本文由創作采用知識共享署名中國大陸許可協議進行許可。 Why Django 在一定的時間內，有限的技術情況下，建設一個高質量的網站，Django幾乎成了唯一的方案。Django把所有可能性都考慮到了，從這種程度上看復雜就意味著全面...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
閱讀 578·2023-04-25 21:29
閱讀 1104·2023-04-25 21:27
閱讀 1044·2021-11-25 09:43
閱讀 1077·2021-09-29 09:43
閱讀 3614·2021-09-03 10:30
閱讀 2853·2019-08-29 15:26
閱讀 2803·2019-08-29 12:52
閱讀 1741·2019-08-29 11:10
