摘要：文章目录基础模板设计首页模板设计和的定义相应的视图函数配置媒体资源的路由信息基础模板设计在项目的文件夹新建文件该文件用于存放每个网页顶部的代码母婴商城请输入需要的商品
在项目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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/119019.html
摘要：文章目录商品列表页逻辑代码商品列表页的数据渲染商品详细页实现商品收藏商品列表页逻辑代码的定义视图函数商品列表获取请求参数变量是商品搜索功能的关键字，它与模型的字段进行模糊匹配，因此查询条件为。 ...
摘要：内部结构时，页面发生错误会直接抛给前台，便于程序员进行修改。，用户新建了需要在该栏目下进行注册。拓展阅读图解笔记基础教程自强学堂备注该笔记源自网易微专业开发节本文由创作采用知识共享署名中国大陆许可协议进行许可。 Why Django 在一定的时间内，有限的技术情况下，建设一个高质量的网站，Django几乎成了唯一的方案。Django把所有可能性都考虑到了，从这种程度上看复杂就意味着全面...
摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...
摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...
阅读 561·2023-04-25 21:29
阅读 1090·2023-04-25 21:27
阅读 1029·2021-11-25 09:43
阅读 1052·2021-09-29 09:43
阅读 3596·2021-09-03 10:30
阅读 2833·2019-08-29 15:26
阅读 2780·2019-08-29 12:52
阅读 1725·2019-08-29 11:10
