資訊專欄INFORMATION COLUMN
摘要：文章目錄基礎(chǔ)模板設(shè)計(jì)首頁(yè)模板設(shè)計(jì)和的定義相應(yīng)的視圖函數(shù)配置媒體資源的路由信息基礎(chǔ)模板設(shè)計(jì)在項(xiàng)目的文件夾新建文件該文件用于存放每個(gè)網(wǎng)頁(yè)頂部的代碼母嬰商城請(qǐng)輸入需要的商品
在項(xiàng)目babys的templates文件夾新建文件base.html
該文件用于存放每個(gè)網(wǎng)頁(yè)頂部的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="請(qǐng)輸入需要的商品"> <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 %}>首頁(yè)</a> <a href="{% url "commodity:commodity" %}" {% if classContent == "commoditys"%}class="active"{% endif %}>所有商品</a> <a href="{% url "shopper:shopcart" %}" {% if classContent == "shopcarts"%}class="active"{% endif %}>購(gòu)物車</a> <a href="{% url "shopper:shopper" %}" {% if classContent == "informations"%}class="active"{% endif %}>個(gè)人中心</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天無(wú)理由退換貨</a> <a class="icon2" href="javascript:;">滿99元全場(chǎng)免郵</a> <a class="icon3" style="margin-right: 0" href="javascript:;">100%品質(zhì)保證</a> </p> </div> </div> <div class="mod_help w1200"> <p> <a href="javascript:;">關(guān)于我們</a> <span>|</span> <a href="javascript:;">幫助中心</a> <span>|</span> <a href="javascript:;">售后服務(wù)</a> <span>|</span> <a href="javascript:;">母嬰資訊</a> <span>|</span> <a href="javascript:;">關(guān)于貨源</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 %}讀取靜態(tài)資源
重寫base.html定義的接口content
實(shí)現(xiàn)“今日必?fù)尅钡纳唐窡徜N功能，該功能共分為2頁(yè)，每頁(yè)自動(dòng)進(jìn)行輪播展示
{% url ‘commodity:detail’ c.id %}是使用商品的主鍵字段id生成對(duì)應(yīng)的商品詳細(xì)頁(yè)的路由地址，當(dāng)單擊商品即可查看商品詳細(xì)頁(yè)。
{{ c.img.url }}代表當(dāng)前遍歷對(duì)象的字段img
{{ c.name }}獲取當(dāng)前遍歷對(duì)象的字段name
{{ c.discount|floatformat:‘2’ }}獲取當(dāng)前遍歷對(duì)象的字段discount
{{ c.price|floatformat:‘2’ }}獲取當(dāng)前遍歷對(duì)象的字段price
實(shí)現(xiàn)某分類的商品熱銷功能，分別為“寶寶服飾”、“奶粉輔食”和“寶寶用品”
重寫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"),
配置媒體資源的路由信息
一定要配置否則無(wú)法加載媒體資源
運(yùn)行Django 服務(wù)器
瀏覽器打開 http://127.0.0.1:8000/
參考資料：《精通Django 3 Web開發(fā)》
素材：https://github.com/xyjw/Django3-Web
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/119019.html
摘要：文章目錄商品列表頁(yè)邏輯代碼商品列表頁(yè)的數(shù)據(jù)渲染商品詳細(xì)頁(yè)實(shí)現(xiàn)商品收藏商品列表頁(yè)邏輯代碼的定義視圖函數(shù)商品列表獲取請(qǐng)求參數(shù)變量是商品搜索功能的關(guān)鍵字，它與模型的字段進(jìn)行模糊匹配，因此查詢條件為。 ...
摘要：內(nèi)部結(jié)構(gòu)時(shí)，頁(yè)面發(fā)生錯(cuò)誤會(huì)直接拋給前臺(tái)，便于程序員進(jìn)行修改。，用戶新建了需要在該欄目下進(jìn)行注冊(cè)。拓展閱讀圖解筆記基礎(chǔ)教程自強(qiáng)學(xué)堂備注該筆記源自網(wǎng)易微專業(yè)開發(fā)節(jié)本文由創(chuàng)作采用知識(shí)共享署名中國(guó)大陸許可協(xié)議進(jìn)行許可。 Why Django 在一定的時(shí)間內(nèi)，有限的技術(shù)情況下，建設(shè)一個(gè)高質(zhì)量的網(wǎng)站，Django幾乎成了唯一的方案。Django把所有可能性都考慮到了，從這種程度上看復(fù)雜就意味著全面...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
閱讀 590·2023-04-25 21:29
閱讀 1122·2023-04-25 21:27
閱讀 1062·2021-11-25 09:43
閱讀 1098·2021-09-29 09:43
閱讀 3631·2021-09-03 10:30
閱讀 2870·2019-08-29 15:26
閱讀 2815·2019-08-29 12:52
閱讀 1760·2019-08-29 11:10
