1.编写index中的urls.py
2.编写视图
3.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>编写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 %}
最后显示样子
