声明：本次文章是看了B站上的视频和分享的代码笔记后，自己敲了一遍代码。然后再敲一遍代码的同时写文章梳理逻辑，看不懂的同学可以去看原文章和视频。文章如有雷同，可联系我删除！视频链接：

博客目录：

一、基于Django+mysql的点餐系统设计--第一篇(开篇：确认需求功能、数据库设计、程序设计)

二、基于Django+mysql的点餐系统设计--第二篇(搭建工程、前后端调试)

三、基于Django+mysql的点餐系统设计--第三篇(编写后台员工管理页面)

四、基于Django+mysql的点餐系统设计--第四篇(编写后台菜品分类管理功能)

五、基于Django+mysql的点餐系统设计--第五篇(编写后台店铺管理页面)

六、基于Django+mysql的点餐系统设计-第六篇(编写后台菜品管理页面)

七、基于Django+mysql的点餐系统设计-第七篇(编写后台会员管理页面及后台系统技术点总结)

八、基于Django+mysql的点餐系统设计-第八篇(H5手机移动端点餐：主页调试-静态页面)

本章源码下载地址：

　　本章开始编写H5手机移动端点餐的代码，不同于后台管理子系统，H5手机移动端点餐在用户访问到浏览页后，涉及到的增删改查的操作基本都在这一个页面完成。本章的主要任务是主页调试，首先将前端的css、font、img、js文件夹引入到static/mobile目录下。

　　然后在templates/mobile目录下引入base.html和index.html

　　这里说下base.html和index.html：base.html是父页面，搭建了H5手机移动端点餐页面的主框架。作为餐品浏览主页的index.html，首先要继承base.html.

这次为了方便调试，index.html里面的餐品信息没有接收后端传过来的信息进行遍历，而是把index.html写成了静态页面，也就是餐品信息在前端固定写好了，如下图：

{% extends 'mobile/base.html' %}{% load static %}{% block mainbody %}    <!--头部-->    <header class="search" id="search">        <div class="header">            <h1>田老师红烧肉-朝阳将台路店</h1>        </div>        <!--通知公告/客服电话-->    </header>    <!--搜索内容-->    <div class="search-content" id="search-content">        <i class="icon-font"></i>    </div>    <!--内容区-->    <article class="main-container">        <!--左侧栏目-->        <div class="sortNav" id="sortNav">            <p class="icon-sort line">分类导航</p>            <a href="javascript:void(0);" onclick="doselectList(this,1)">双拼套餐</a>            <a href="javascript:void(0);" onclick="doselectList(this,2)" class="select">盖饭</a>            <a href="javascript:void(0);" onclick="doselectList(this,3)">小菜</a>            <a href="javascript:void(0);" onclick="doselectList(this,4)">汤/饮料</a>        </div>        <!--右侧产品-->        <div class="sortContent line">            <!--产品列表-->            <ol class="list-content" id="list-content1" style="display:none;">                <li class="line">                    <a href="#">                        <div class="pro-img"><img src="{% static '/mobile/img/img25.jpg' %}" alt=""></div>                        <div class="pro-con"><h3>法国猪肋排 1kg/袋</h3><font>瘦肉多，绝对超值精排 </font><b>¥35.00</b><p>乐果派旗舰店</p></div>                    </a>                    <a href="javascript:doCartAdd(1)" class="list-cart"><i class="icon-cartadd"></i></a>                </li>                <li class="line">                    <a href="#">                        <div class="pro-img"><img src="{% static '/mobile/img/img05.jpg' %}" alt=""></div>                        <div class="pro-con"><h3>乌拉圭进口牛肋条</h3><font>BTV推荐，全网独家热销</font><b>¥59.00</b><p>乐果派旗舰店</p></div>                    </a>                    <a href="javascript:doCartAdd(2)" class="list-cart"><i class="icon-cartadd"></i></a>                </li>                <li class="line">                    <a href="#">                        <div class="pro-img"><img src="{% static '/mobile/img/img12.jpg' %}" alt=""></div>                        <div class="pro-con"><h3>智利肋排脆骨 1kg/袋</h3><b>¥56.60</b><p>乐果派旗舰店</p></div>                    </a>                    <a href="#" class="list-cart"><i class="icon-cartadd"></i></a>                </li>                <li class="line">                    <a href="#">                        <div class="pro-img"><img src="{% static '/mobile/img/img28.jpg' %}" alt=""></div>                        <div class="pro-con"><h3>温氏 农养鸡 袋装 （800g）</h3><b>¥38.80</b><p>乐果派旗舰店</p></div>                    </a>                    <a href="#" class="list-cart"><i class="icon-cartadd"></i></a>                </li>            </ol>            <ol class="list-content" id="list-content2" style="display:none;">                <li class="line">                    <a href="#">                        <div class="pro-img"><img src="{% static '/mobile/img/img29.jpg' %}" alt=""></div>                        <div class="pro-con"><h3>江西萍乡土鸡蛋</h3><font>林地散养，原粮喂养，蛋黄大，蛋清粘稠</font><b>¥12.80</b><p>乐果派旗舰店</p></div>                    </a>                    <a href="#" class="list-cart"><i class="icon-cartadd"></i></a>                </li>                <li class="line">                    <a href="#">                        <div class="pro-img"><img src="{% static '/mobile/img/img30.jpg' %}" alt=""></div>                        <div class="pro-con"><h3>台湾皮蛋，松花蛋</h3><font></font><b>¥28.00<s>¥31.90</s></b><p>乐果派旗舰店</p></div>                    </a>                    <a href="#" class="list-cart"><i class="icon-cartadd"></i></a>                </li>            </ol>            <ol class="list-content" id="list-content3" style="display:none;">                <li class="line">                    <a href="#">                        <div class="pro-img"><img src="{% static '/mobile/img/img07.jpg' %}" alt=""></div>                        <div class="pro-con"><h3>萍乡土鸡蛋</h3><font></font><b>¥28.00<s>¥31.90</s></b><p>乐果派旗舰店</p></div>                    </a>                    <a href="#" class="list-cart"><i class="icon-cartadd"></i></a>                </li>                <li class="line">                    <a href="#">                        <div class="pro-img"><img src="{% static '/mobile/img/img16.jpg' %}" alt=""></div>                        <div class="pro-con"><h3>新鲜猪肉</h3><font></font><b>¥28.00<s>¥31.90</s></b><p>乐果派旗舰店</p></div>                    </a>                    <a href="#" class="list-cart"><i class="icon-cartadd"></i></a>                </li>                <li class="line">                    <a href="#">                        <div class="pro-img"><img src="{% static '/mobile/img/img27.jpg' %}" alt=""></div>                        <div class="pro-con"><h3>鸡肉</h3><font></font><b>¥28.00<s>¥31.90</s></b><p>乐果派旗舰店</p></div>                    </a>                    <a href="#" class="list-cart"><i class="icon-cartadd"></i></a>                </li>            </ol>            <br><br>        </div>        <!--购物车-->        <div class="cartContent fadeInBottom100" id="cartContent">            <div class="LayerHeader line">                <button class="Del" onclick="doCartClear()"><i class="icon-delete"></i>清空</button>                <button class="close pl"><i class="icon-plus rot45"></i></button>            </div>            <div class="cartContentList">                <ul class="line-li">                    <!--li>                        <img src="img/img01.jpg" alt=""><p>家乐都有机里脊肉 500g</p><span>¥150.00</span>                        <div class="D-BuyNum"><button><i class="icon-reduce"></i></button><input type="number" readonly class="line" value="9"><button><i class="icon-plus"></i></button></div>                    </li>                    <li>                        <img src="img/img02.jpg" alt=""><p>法国猪肋排 1kg/袋</p><span>¥150.00</span>                        <div class="D-BuyNum"><button><i class="icon-reduce"></i></button><input type="number" class="line" value="9"><button><i class="icon-plus"></i></button></div>                    </li>                    <li>                        <img src="img/img03.jpg" alt=""><p>乌拉圭进口（无骨）牛肋条 约1kg</p><span>¥150.00</span>                        <div class="D-BuyNum"><button><i class="icon-reduce"></i></button><input type="number" class="line" value="9"><button><i class="icon-plus"></i></button></div>                    </li-->                </ul>            </div>            <div class="LayerFooter">                共计：<span>¥0.00</span>            </div>        </div>    </article>    <!--底部栏目-->    <menu>        <a href=""><i class="icon-selectmore"></i>切换店铺</a>        <!--a href="member-order.html"><i class="icon-allorders"></i>订单</a-->        <a href="javascript:void(0)" id="orderCart"><i class="icon-cart"><span>0</span></i>购物车</a>        <a href=""><i class="icon-head"></i>我的</a>        <a><button onclick="location.href=''">去结算</button></a>    </menu>    <!--弹出圈圈loading-->    <div class="spinner" style="display:none;"><i></i></div>{% endblock %}{% block myjavascript %}<script type="text/javascript">    function doselectList(ob,m){        $("#sortNav a").removeClass("select");        $(ob).addClass("select");        $("ol.list-content").hide();        $("#list-content"+m).show();        return false;    }    cartlist = [];    function doCartAdd(id){        shoplist = [{'id':1,'name':'法国猪肋排','cover_pic':'img/img25.jpg','price':35.00,'num':1},{'id':2,'name':'乌拉圭进口牛肋条','cover_pic':'img/img05.jpg','price':90.00,'num':1}];        shop = shoplist[id-1];        var b=true;        for(var i=0;i<cartlist.length;i++){            if(cartlist[i].id==id){                b = false;                cartlist[i].num += 1;                break;            }        }        if(b){            cartlist.push(shop);        }        doShowCart();    }    function doCartClear(){        cartlist = [];        doShowCart();    }    function doShowCart(){        var cartContent = $("#cartContent div.cartContentList ul.line-li");        cartContent.empty()        var total = 0.0;        for(var i=0;i<cartlist.length;i++){            var str = "<li>";            str += '<img src="'+cartlist[i].cover_pic+'" alt=""><p>'+cartlist[i].name+'</p><span>¥'+cartlist[i].price+'</span>';            str += '<div class="D-BuyNum"><button><i class="icon-reduce"></i></button><input type="number" readonly class="line" value="'+cartlist[i].num+'"><button><i class="icon-plus"></i></button></div>'            str += "</li>";            cartContent.append(str);            total += cartlist[i].price * cartlist[i].num;        }        $("#cartContent div.LayerFooter span").html("￥"+total);        $("#orderCart i.icon-cart span").html(cartlist.length);    }</script>{% endblock %}

　　url控制器之前引用过跳转到主页的路由，这里再强调下：在mobile/urls.py中编写访问主页的路由：

urlpatterns = [    # path('admin/', admin.site.urls),    # ''表示前端页面直接输入域名或IP+端口会跳到此处，index.index表示在mobile/views/index.py文件下的index函数处理此处的逻辑    # name='mobile_index'：在前端代码中通过name值也能找到此处路由    path('',index.index, name="mobile_index")]

　　说完了url控制器，咱们看下views层怎么实现。因为前端是静态页面，view层只需将访问链接渲染到静态页面index.html上就可以，因此非常简单，看下面代码：

def index(request):     return render(request, "mobile/index.html")

　　因为是调试，前端用的静态页面，所以不需要调用Models层。现在写完了url控制器和views层、templates层，可以启动程序访问页面调试了，访问：页面展示正常，如下图：

　　经过上面的调试说明H5手机移动端点餐的主页面是调试通了，接下来咱们将静态页面改为动态页面，这里说的是静态页面，下一篇开始说主页的动态页面和切换店铺