5.大型电商项目之创建前端展示模板并调用
2024-05-06 19:15:29
1. templates前端模板的使用
1.1 templates前端模板的创建
首先，我们页面很多地方是相似的，这里就创建一个基础模板，不同的地方，对模板内容的block进行修改即可；对于相同的地方，我们就使用include包含即可
创建基础模板templates
利用基础模板，创建好可以修改的位置，以后使用的模板，就直接继承他就好
<!-- netshop/templates/base.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{% block title %}{% endblock %}</title><link rel="stylesheet" href="./首页_files/login.css"><link rel="stylesheet" href="./首页_files/index.css"><link rel="stylesheet" href="./首页_files/detail.css"><link rel="stylesheet" href="./首页_files/carts.css"><link rel="stylesheet" href="./首页_files/reset.css"><link rel="stylesheet" href="./首页_files/mygxin.css"><script src="./首页_files/jquery.min.js.下载"></script><script src="./首页_files/carts.js.下载"></script>{% block headerjs %}{% endblock %}
</head>
<body>{% include 'top.html' %}{% block main %}{% endblock %}
</body>
{% block footer %}{% endblock %}
</html>
创建顶层模板templates
我们发现，顶层位置上存在很多一样的代码，创建一个顶层模板，以后直接插入就好
<!-- netshop/templates/top.html -->
<div class="head"><div class="head-in"><ul class="options"><li class="sub"><a href="http://127.0.0.1:8000/?category=2#">我的订单</a></li><li class="sub"><a href="http://127.0.0.1:8000/?category=2#">客户服务</a></li><li class="sub"><a href="http://127.0.0.1:8000/cart/cart.html">我的购物车</a></li></ul><div class="register"><a href="http://127.0.0.1:8000/user/register">免费注册</a></div><div class="sign"><a href="http://127.0.0.1:8000/user/login">登录</a></div></div>
</div>
<div class="search"><ul class="items"><li class="item"><a href="http://127.0.0.1:8000/?category=2#"><img src="./首页_files/1_09.png"><p>10:00开抢</p></a></li><li class="item"><a href="http://127.0.0.1:8000/?category=2#"><img src="./首页_files/1_11.png"><p>买手砍价</p></a></li><li class="item"><a href="http://127.0.0.1:8000/?category=2#"><img src="./首页_files/1_13.png"><p>验货质检</p></a></li></ul><div class="input"><input type="" name="" value="请输入想找的宝贝"><img src="./首页_files/1_06.png"></div>
</div>
子应用中创建模板
我们在Django中分类模板的根据，是通过不同的页面，创建不同的子应用，在不同的子应用下创建templates/子应用名。
<!-- netshop\goodsapp\templates\goodsapp\index.html -->
{% extends 'base.html' %}
{% block title %} 商品列表页 {% endblock %}
{% block main %}
<div class="classes"><ul class="classes-items"><li class="items"><a href="http://127.0.0.1:8000/category/7">男装</a></li><li class="items active "><a href="http://127.0.0.1:8000/category/8">女装</a></li><li class="items"><a href="http://127.0.0.1:8000/category/9">鞋子</a></li><li class="items"><a href="http://127.0.0.1:8000/category/10">箱包</a></li><li class="items"><a href="http://127.0.0.1:8000/category/11">母婴</a></li><li class="items"><a href="http://127.0.0.1:8000/category/12">美妆</a></li><li class="items"><a href="http://127.0.0.1:8000/category/13">居家</a></li><li class="items"><a href="http://127.0.0.1:8000/category/14">家纺</a></li><li class="items"><a href="http://127.0.0.1:8000/category/15">文体</a></li><li class="items"><a href="http://127.0.0.1:8000/category/16">美食</a></li><li class="items"><a href="http://127.0.0.1:8000/category/17">数码</a></li><li class="items"><a href="http://127.0.0.1:8000/category/18">电器</a></li><li class="items"><a href="http://127.0.0.1:8000/category/19">内衣</a></li><li class="items"><a href="http://127.0.0.1:8000/category/20">装饰</a></li></ul>
</div><div class="goods-model"><div class="goods-content"><div class="good"><a href="http://127.0.0.1:8000/goodsdetails/4"><img src="./首页_files/hong_Dm4fQ6U.jpg" width="285px" height="285px"><p class="name">90绒大毛领保暖羽绒服</p><div class="price"><i>￥</i><p class="big">99.00</p><s>￥499.00</s></div><div class="sale">特卖</div></a></div><div class="good"><a href="http://127.0.0.1:8000/goodsdetails/5"><img src="./首页_files/bai_mt1VrH5.jpg" width="285px" height="285px"><p class="name">秋时尚印花两件套装裙</p><div class="price"><i>￥</i><p class="big">35.00</p><s>￥100.00</s></div><div class="sale">特卖</div></a></div><div class="good"><a href="http://127.0.0.1:8000/goodsdetails/6"><img src="./首页_files/hong_y7wQwRw.jpg" width="285px" height="285px"><p class="name">韩版侧开叉宽松毛衣</p><div class="price"><i>￥</i><p class="big">39.00</p><s>￥369.00</s></div><div class="sale">特卖</div></a></div><div class="good"><a href="http://127.0.0.1:8000/goodsdetails/7"><img src="./首页_files/lan_BKQdpOj.jpg" width="285px" height="285px"><p class="name">无袖套头毛衣马甲女秋</p><div class="price"><i>￥</i><p class="big">39.00</p><s>￥296.00</s></div><div class="sale">特卖</div></a></div><div class="good"><a href="http://127.0.0.1:8000/goodsdetails/8"><img src="./首页_files/hong_zHPXVqY.jpg" width="285px" height="285px"><p class="name">红色原宿bf风小外套</p><div class="price"><i>￥</i><p class="big">69.00</p><s>￥229.00</s></div><div class="sale">特卖</div></a></div><div class="good"><a href="http://127.0.0.1:8000/goodsdetails/9"><img src="./首页_files/lan_IThSO4Z.jpg" width="285px" height="285px"><p class="name">不规则毛边喇叭牛仔裤</p><div class="price"><i>￥</i><p class="big">65.00</p><s>￥199.00</s></div><div class="sale">特卖</div></a></div><div class="good"><a href="http://127.0.0.1:8000/goodsdetails/10"><img src="./首页_files/lan_ELubwxG.jpg" width="285px" height="285px"><p class="name">宽松短款牛仔外套</p><div class="price"><i>￥</i><p class="big">79.00</p><s>￥259.00</s></div><div class="sale">特卖</div></a></div><div class="good"><a href="http://127.0.0.1:8000/goodsdetails/11"><img src="./首页_files/lv_H5hkmmq.jpg" width="285px" height="285px"><p class="name">气质收腰显瘦连衣裙</p><div class="price"><i>￥</i><p class="big">69.00</p><s>￥199.00</s></div><div class="sale">特卖</div></a></div><div class="good"><a href="http://127.0.0.1:8000/goodsdetails/12"><img src="./首页_files/hui.jpg" width="285px" height="285px"><p class="name">针织袖拼接毛呢打底裙</p><div class="price"><i>￥</i><p class="big">69.00</p><s>￥199.00</s></div><div class="sale">特卖</div></a></div><div class="good"><a href="http://127.0.0.1:8000/goodsdetails/13"><img src="./首页_files/hei_kYyKPNv.jpg" width="285px" height="285px"><p class="name">双排扣假两件连衣裙</p><div class="price"><i>￥</i><p class="big">69.00</p><s>￥299.00</s></div><div class="sale">特卖</div></a></div><div class="good"><a href="http://127.0.0.1:8000/goodsdetails/14"><img src="./首页_files/lv_sxlJZTq.jpg" width="285px" height="285px"><p class="name">修身包臀蕾丝打底裙</p><div class="price"><i>￥</i><p class="big">69.00</p><s>￥199.00</s></div><div class="sale">特卖</div></a></div><div class="good"><a href="http://127.0.0.1:8000/goodsdetails/15"><img src="./首页_files/ju.jpg" width="285px" height="285px"><p class="name">修身显瘦格子打底裙</p><div class="price"><i>￥</i><p class="big">69.90</p><s>￥259.00</s></div><div class="sale">特卖</div></a></div></div>
</div><div id="pager" style="text-align: center; font-size: 16px; overflow: hidden; margin-top: 10px;"><a href="http://127.0.0.1:8000/category/8/page/2" style="display: inline-block; padding: 5px; margin: 5px;">下一页</a>
</div>
{% endblock %}{% block footerjs %}
<script>$('#pager').css({'text-align':'center','font-size':'16px','overflow':'hidden','margin-top':'10px'})$('#pager a').css({'display':'inline-block','padding':'5px','margin':'5px'})
</script>
{% endblock %}
1.2 调用前端模板
views
from django.shortcuts import render# Create your views here.# 商品列表页
def index(request):return render(request,'goodsapp/index.html')根urls
from django.contrib import admin
from django.urls import path,includeurlpatterns = [path('admin/', admin.site.urls),path('',include('goodsapp.urls')),
]子urls
# netshop\goodsapp\urls.py
from django.contrib import admin
from django.urls import path,include
from goodsapp import views
urlpatterns = [path('',views.index),
]1.3 当前效果
2. 资源文件修改
我们需要修改前端的各个路径；并且，把各个所需要的文件放入文件夹中（根目录的）
配置上传文件与静态资源settings
# 静态资源文件配置
STATIC_URL = 'static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR,'static'),]
# Default primary key field type
# https://docs.djangoproject.com/en/4.0/ref/settings/#default-auto-fieldDEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'# 配置上传文件
MEDIA_URL= 'media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media')
配置上传的资源根urls
我们需要上传文件的时候，需要配置一下根路由
#访问上传的资源
from django.conf import settings
from django.conf.urls.static import static
if settings.DEBUG:urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
修改base.html路径
<!-- netshop/templates/base.html -->
<!DOCTYPE html>
<html lang="en">{% load static %}
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{% block title %}{% endblock %}</title><link rel="stylesheet" href="{% static 'css/login.css' %}"><link rel="stylesheet" href="{% static 'css/index.css' %}"><link rel="stylesheet" href="{% static 'css/detail.css' %}"><link rel="stylesheet" href="{% static 'css/carts.css' %}"><link rel="stylesheet" href="{% static 'css/reset.css' %}"><link rel="stylesheet" href="{% static 'css/mygxin.css' %}"><script src="{% static 'js/jquery.min.js.下载' %}"></script><script src="{% static 'js/carts.js' %}"></script>{% block headerjs %}{% endblock %}
</head>
当前效果展示
图片无法显示的原因是，图片放在top.html中，这里我们需要修改top.html
修改top.html
<!-- netshop/templates/top.html -->
{% load static %}
<div class="head"><div class="head-in"><ul class="options"><li class="sub"><a href="http://127.0.0.1:8000/?category=2#">我的订单</a></li><li class="sub"><a href="http://127.0.0.1:8000/?category=2#">客户服务</a></li><li class="sub"><a href="http://127.0.0.1:8000/cart/cart.html">我的购物车</a></li></ul><div class="register"><a href="http://127.0.0.1:8000/user/register">免费注册</a></div><div class="sign"><a href="http://127.0.0.1:8000/user/login">登录</a></div></div>
</div>
<div class="search"><ul class="items"><li class="item"><a href="http://127.0.0.1:8000/?category=2#"><img src="{% static 'images/1_09.png' %}"><p>10:00开抢</p></a></li><li class="item"><a href="http://127.0.0.1:8000/?category=2#"><img src="{% static 'images/1_11.png' %}"><p>买手砍价</p></a></li><li class="item"><a href="http://127.0.0.1:8000/?category=2#"><img src="{% static 'images/1_13.png' %}"><p>验货质检</p></a></li></ul><div class="input"><input type="" name="" value="请输入想找的宝贝"><img src="{% static 'images/1_06.png' %}"></div>
</div>
3.动态加载商品数据
修改商品goods.html
观察上述代码可发现，对于商品的展示，我们选择了一个商品对应一个div去展示，这样非常不方便。我们首先，只保留第一个div，剩余删掉，用循环的方式去改变。顶部的菜单栏也是如此
templates模板修改
<!-- netshop\goodsapp\templates\goodsapp\index.html -->
{% extends 'base.html' %}
{% block title %} 商品列表页 {% endblock %}
{% block main %}
<div class="classes"><ul class="classes-items">{% for category in categoryList %}<li class="items {% if category.id == currcategoryid %} active {% endif %} "><a href="http://127.0.0.1:8000/category/8">{{category.cname}}</a></li>{% endfor %}</ul>
</div>
<div class="goods-model"><div class="goods-content">{% for goods in goodsList %}<div class="good"><a href="http://127.0.0.1:8000/goodsdetails/4"><img src="{{ goods.getImgUrl }}" width="285px" height="285px"><p class="name">{{ goods.gname }}</p><div class="price"><i>￥</i><p class="big">{{ goods.price }}</p><s>￥{{ goods.oldprice }}</s></div><div class="sale">特卖</div></a></div> {% endfor %}</div>
</div><div id="pager" style="text-align: center; font-size: 16px; overflow: hidden; margin-top: 10px;"><a href="http://127.0.0.1:8000/category/8/page/2" style="display: inline-block; padding: 5px; margin: 5px;">下一页</a>
</div>
{% endblock %}{% block footerjs %}
<script>$('#pager').css({'text-align':'center','font-size':'16px','overflow':'hidden','margin-top':'10px'})$('#pager a').css({'display':'inline-block','padding':'5px','margin':'5px'})
</script>
{% endblock %}
模型model.py
添加查询函数
# 商品表
class Goods(models.Model):gname = models.CharField(max_length=100, verbose_name='商品名称')gdesc = models.CharField(max_length=100, verbose_name='商品描述')# DecimalFiled:数字字段，可以设置整数位与小数位oldprice = models.DecimalField(max_digits=5, decimal_places=2, verbose_name='商品原价')price = models.DecimalField(max_digits=5, decimal_places=2, verbose_name='商品现价')# 创建外键，关联商品分类表category = models.ForeignKey(Category, on_delete=models.CASCADE)# 获取商品图片def getImgUrl(self):# 获取第一个库存——>颜色——>urlreturn self.inventory_set.first().color.colorurldef __str__(self) -> str:return self.gname
5.大型电商项目之创建前端展示模板并调用相关推荐
- 大型电商项目3.0实战+支付宝、微信支付项目实战
须知:视频来源网络,侵权请联系删除! 大型电商项目3.0实战 获取方式 扫描下面二维码回复:A110 支付宝.微信支付项目实战 获取方式 扫描下面二维码回复:A106
- 112.Spark大型电商项目-广告点击流量实时统计-需求分析、技术方案设计以及数据设计
目录 需求分析 技术方案设计 数据表设计 ad_user_click_count //用户点击广告表 ad_blacklist //用户黑名单 ad_stat //广告状态表 ad_province ...
- 50.Spark大型电商项目-用户访问session分析-top10热门品类之本地测试
本篇文章记录用户访问session分析-top10热门品类之本地测试. 在测试的过程中,到很多问题. 问题一:二次排序需要序列化,否则会在程序运行的时候报错. public class Categor ...
- 114.Spark大型电商项目-广告点击流量实时统计-使用高性能方式将实时计算结果写入MySQL中
目录 误区 Spark Streaming foreachRDD的正确使用方式 对于这种实时计算程序的mysql插入,有两种pattern(模式) 代码 AdUserClickCount.java I ...
- 99.Spark大型电商项目-各区域热门商品统计-模块介绍
目录 各区域热门商品统计 作业提交 大数据方向的职业发展规划 用户行为分析意义 本篇文章记录各区域热门商品统计-模块介绍. 各区域热门商品统计 需求:根据用户指定的日期范围,统计各个区域下的最热门的t ...
- 1. Python_Django项目之大型电商项目介绍
1.开发项目目的 联系已掌握的知识点 发现新的知识点 掌握开发技巧 掌握项目结构 增加项目经验 2.所用技术 语言:Python3(Django4) 数据库:MySQL web服务器:Nginx+uw ...
- 【大型电商项目开发】商品上架-es应用到商品上架-35
一:商品上架 上架的商品才可以在网站展示. 上架的商品需要可以被检索. es是将数据保存到内存当中,所以我们不能将什么数据都保存到es当中,我们需要将重要的数据保存到es中.例如商品名称,规格型号,价 ...
- 43.Spark大型电商项目-用户访问session分析-top10热门品类之需求回顾以及实现思路分析
目录 需求回顾 top10热门品类 二次排序 实现思路分析 本篇文章将记录用户访问session分析-top10热门品类之需求回顾以及实现思路分析. 需求回顾 top10热门品类 计算出来通过筛选条件 ...
- 【大型电商项目开发】商品服务之SPU检索SKU检索-29
一:spu检索 请求url:/product/spuinfo/list 1.编辑list接口 1)编辑SpuInfoController的list方法 /*** 列表*/@RequestMapping ...
最新文章
- 纯js制作的弹球游戏
- python【蓝桥杯vip练习题库】ADV-298 和谐宿舍2（DP）
- docker linux redis 安装
- FZU2020 lucas定理求解组合数
- ajax、jsonp简单封装
- Spring Schedule关闭订单
- 识别SDN中的安全隐患
- Eclipse 报java.lang.OutOfMemoryError: PermGen space错
- 数据中台应该具备的能力
- 一步一步学WF系列（四）——工作流模拟登陆
- 【WCF】无法加载协定为“ServiceReference1.xxxxxx”的终结点配置部分，因为找到了该协定的多个终结点配置。请按名称指示首选的终结点配置部分.
- 结构型设计模式 （1）—— 适配器模式（Adapter Pattern）
- 王通讲生物信息学学习方法
- Android SDK怎么救砖,Android手机刷机变砖后无法开机的修复方法
- 实体映射最强工具类：MapStruct 真香！
- 华为正式发布鸿蒙艾,安卓12正式发布，华为掉出首发名单，鸿蒙系统硬扛谷歌苹果...
- Grunt 入门教程一：开始使用Grunt（翻译自官方教程）
- uni-app 开发微信小程序 自动化编译，启动项目
- C语言程序设计————学习知识归纳总结（三）
- 想做网上线上引流怎么做？如何通过网络获取流量？