5.大型电商项目之创建前端展示模板并调用

news2024/11/25 7:15:45

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,include

urlpatterns = [
    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-field

DEFAULT_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):
        # 获取第一个库存——>颜色——>url
        return self.inventory_set.first().color.colorurl

    def __str__(self) -> str:
        return self.gname

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/86664.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

B. Hossam and Friends #837 div2

Problem - B - Codeforces 题意就是给你m个数对&#xff0c;这两个人不是好朋友&#xff0c;其他的所有人都是好朋友&#xff0c;问1~n里面有多少个区间里面所有数都是好朋友 分析: 这题我分析的没错&#xff0c;但是在计算区间的时候&#xff0c;想的复杂了&#xff0c;用模…

JS中,a标签里的javascript:;和 javascript:void(0)还有##

目录 1. javascript:;【常用】点击链接之后不会刷新页面&#xff0c;不会跳转链接&#xff0c;也不会传递参数 2. javascript:void(0) 【少用】点击链接后不会刷新页面&#xff0c;不会跳转链接&#xff0c;也不会传递参数 3. a标签中的# 点击链接后会刷新页面…

Spring Batch批处理-作业Job简介

引言 书接上篇Spring Batch 批处理入门案例解析&#xff0c;上篇带小伙伴们写了一个Spring Batch 入门案例解析&#xff0c;本篇就开始批处理正文啦&#xff0c;今天先对作业Job做个全面了解。 作业介绍 目前很多项目都流程的概念&#xff0c;比如web应用&#xff0c;集成应…

Java基础03_数据类型

数据类型 强类型语言 要求变量的使用要严格符合规定&#xff0c;所有的变量必须先定义后使用&#xff1b;安全性高但是速度低&#xff1b; 弱类型语言 例如&#xff1a;‘12’ 3 123 或者 ‘12’ 3 ‘123’ 在强类型语言中是有明显的区别的。而在弱类型语言中是不区分的…

算符优先分析器的构造

一、实验目的 &#xff08;1&#xff09;理解自底向上的语法分析的基本思想。 &#xff08;2&#xff09;理解算符优先文法的概念。 &#xff08;4&#xff09;掌握算符优先分析器的工作原理和工作流程。 &#xff08;3&#xff09;掌握算符分析表和优先函数的构造。 二、实验…

函数式接口

Lambda表达式的本质&#xff1a;作为函数式接口的实例 如果一个接口中&#xff0c;只声明一个抽象方法&#xff0c;则此接口就称为函数式接口 FunctionalInnterface public interface MyInterface{void method1(); }要想用Lambda表达式就一定要在函数式接口的条件下使用 相当于…

微信小程序直播状态接口如何获取

现如今&#xff0c;小程序直播非常的红火&#xff0c;越来越多的商家开通了微信小程序直播&#xff0c;但是在直播的过程中&#xff0c;偶尔会出现一些小问题&#xff0c;如禁播&#xff0c;异常状态等等&#xff0c;下面小编就来介绍一下微信小程序直播状态接口如何获取。 一、…

echarts5.4立体柱状图

资源下载&#xff1a;https://www.jsdelivr.com/package/npm/echarts 效果图&#xff1a; 借鉴资源&#xff1a;echarts 如何绘制三维 3D 立体柱状图 - 简书 代码示例&#xff1a; <!DOCTYPE html> <head><meta charset"utf-8"><title>ECh…

基于51单片机的智能小车系统设计

原理图&#xff1a; 程序运行图&#xff1a; 部分程序&#xff1a; /******************************************************************************* * 文件名称&#xff1a;main.c * 说明&#xff1a;本文件为小车控制的主函数 * 功能&…

分布式websocket探索

单体式架构 根据基于golang的gin框架开发的web项目所展开 如果一个Web项目采用单体式架构且配备了websocket通讯的功能&#xff0c;那么在单个实例中是能够正常运行的 在我的项目中&#xff0c;用户可以通过websocket来进行实时通讯和实时消息通知&#xff0c;同时如果在web业务…

AcrelEMS-IDC数据中心综合能效管理系统解决方案-Susie 周

1、概述 安科瑞电气紧跟数据中心发展形式&#xff0c;推出AcrelEMS-IDC数据中心综合能效管理解决方案&#xff0c;包含有电力监控、动环监控、消防监控、能耗统计分析、智能照明控制以及新能源监测几个子系统。集成了变配电监测、电源备自投、电气接点测温、智能照明控制、电能…

yearning搭建及使用

yearning搭建及使用 数据库审计管理&#xff0c;是数据安全规范中不可或缺的一环&#xff0c;通过审计管理我们能够把控、追溯sql执行情况。yearning作为一款开源的数据库审计软件&#xff0c;是我们开发运维工作中经常打交道的一个“伙伴”。 yearning提供的核心功能就是sql…

mysql 自增字段、属性

mysql自增属性 参考文章 https://www.php.cn/mysql-tutorials-489209.html https://blog.csdn.net/qq_41045806/article/details/108310772 在Mysql中&#xff0c;可以为某一属性设置自增属性&#xff0c;可以很好地为我们解决属性值重复的问题。 在mysql中&#xff0c;使用au…

DevExpress Universal全面的软件开发包

DevExpress Universal全面的软件开发包 DevExpress Universal帮助您使用所有DevExpress单平台控件等为Windows、Web、移动和平板电脑构建应用程序。它包括桌面控件(WinForms、WPF、UWP和桌面报告)、Web控件(ASP.NET、ASP.NET MVC和Core、Bootstrap Web Forms、JavaScript-jQuer…

第十章用Python获取sqlite、MySQL、Excel、csv、json中的数据

这里写目录标题项目背景获取sqlite3中的数据sqlite3库获取sqlite数据pandas库获取sqlite数据获取MySQL中的数据pymsql库获取MySQL数据pandas库获取mysql数据获取Excel中的数据xlrd库获取Excel数据pandas库获取Excel数据获取csv中的数据csv库读取csv数据pandas读取csv数据获取js…

Docker02(数据卷)

目录 一、宿主机与容器之间的文件拷贝 二、数据卷 三、数据卷容器 四、Dockerfile Dockerfile简介 自定义centos&#xff0c;具备vim及ifconfig作用 自定义tomcat8 一、宿主机与容器之间的文件拷贝 在生产环境中使用 Docker &#xff0c;往往需要对数据进行持久化&#…

Spring Cloud微服务治理框架深度解析

在学习一个技术之前&#xff0c;首先我们要了解它是做什么的&#xff0c;我们为什么要用它。不然看再多资料都理解不了&#xff0c;因此我们先来讲解下Spring Cloud Spring Cloud是一套微服务治理框架&#xff0c;几乎考虑到了微服务治理的方方面面。那么接下来具体说下 Spring…

WebRTC客户端主要流程分析

1.通信过程 因为WebRTC规范里没有包含信令协议&#xff0c;所以像OWT、mediasoup等支持WebRTC的开源项目&#xff0c;其通信两端建立连接的过程中的信令逻辑各不相同。但是&#xff0c;总体上来说&#xff0c;其通信过程必然会包括以下过程。 发起端创建本地的PeerConnection&…

基于微信小程序的校友录系统-计算机毕业设计

项目介绍 本系统采用微信开发者开发、结合后台java语言以及Mysql数据库等技术。系统主要分为管理员和用户、校友三部分&#xff0c;管理员服务端&#xff1a;首页、个人中心、用户管理、校友管理、校友风采管理、校友视频管理、视频分类管理、班级信息管理、留言板管理、论坛交…

虹科方案|适用于VMware vSphere®环境的Mac Pro®和微型服务器存储连接

一、前言 Thunderbolt支持ATTO的VMWare ESXi和ThunderLink产品线&#xff0c;使我们能够创建基于Mac的vSphere设置&#xff0c;从而能够为我们的macOS服务器提供虚拟化服务。将虚拟硬件、快照和Veeam备份与macOS服务器的简单性相结合&#xff0c;将改变SMB市场的游戏规则。 二…