一、商城基础模板设计
在设计中所有页面的顶部都是相同的,包含了搜索功能和网站导航,也就是说这部分的 HTML 代码是完全相同的,因此我们可以将这部分代码单独抽取出来放置在一个文件中。然后在每个网页的代码中调用该文件,便于日后的维护与管理。
在 templates
文件夹中新建文件 base.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>
二、商城首页模板设计
templates
文件夹的 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 %}
三、运行测试
在运行网站首页之前,确保数据表 commodity_types 和 commodity_commodityinfos 存在测试数据。此外,商品主图文件应放置在项目文件夹 media/imgs。
运行项目,然后访问 http://127.0.0.1:8000/,如果你看到的是下面的画面,那就说明到目前为止一切顺利啦。