发门网
5.大型电商项目之创建前端展示模板并调用
创始人
2024-04-22 23:39:03
0次

1. templates前端模板的使用

1.1 templates前端模板的创建

首先，我们页面很多地方是相似的，这里就创建一个基础模板，不同的地方，对模板内容的block进行修改即可；对于相同的地方，我们就使用include包含即可
创建基础模板templates
利用基础模板，创建好可以修改的位置，以后使用的模板，就直接继承他就好




{% block title %}{% endblock %}{% block headerjs %}{% endblock %}

{% include 'top.html' %}{% block main %}{% endblock %}

{% block footer %}{% endblock %}

创建顶层模板templates
我们发现，顶层位置上存在很多一样的代码，创建一个顶层模板，以后直接插入就好

子应用中创建模板
我们在Django中分类模板的根据，是通过不同的页面，创建不同的子应用，在不同的子应用下创建templates/子应用名。


{% extends 'base.html' %}
{% block title %} 商品列表页 {% endblock %}
{% block main %}

{% endblock %}{% block footerjs %}

{% 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路径



{% load static %}
{% block title %}{% endblock %}{% block headerjs %}{% endblock %}

当前效果展示
在这里插入图片描述

图片无法显示的原因是，图片放在top.html中，这里我们需要修改top.html
修改top.html


{% load static %}

在这里插入图片描述

3.动态加载商品数据

修改商品goods.html
观察上述代码可发现，对于商品的展示，我们选择了一个商品对应一个div去展示，这样非常不方便。我们首先，只保留第一个div，剩余删掉，用循环的方式去改变。顶部的菜单栏也是如此
templates模板修改


{% extends 'base.html' %}
{% block title %} 商品列表页 {% endblock %}
{% block main %}





{% endblock %}{% block footerjs %}

{% 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
词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：c语言：枚举类型—enum

下一篇：win10下CH340模块下载stc89c52程序

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播，要解决的几个问题是：1&...
Windows10添加群晖磁盘... 在使用群晖NAS时，我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章，在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF，目录中的页码并非PDF中直接索引的页码...
Fluent中创建监测点 1 概述某些仿真问题，需要创建监测点，用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装（Wind... 前言：刚换了一台电脑，里面所有东西都需要重新配置，习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile，这个类提供了一个没有缓存的二进制格式的磁盘...
有效的括号 一、题目 给定一个只包括 '('，')'，'{'，'}'...