基于Django+mysql的点餐系统设计-第八篇(H5主页调试-静态页面)

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

https://www.bilibili.com/video/BV1pq4y1W7a1?spm_id_from=333.999.0.0

博客目录：

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

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

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

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

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

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

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

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

本章源码下载地址：https://github.com/hopeSuceess/testorder/tree/testorder_20220526_01

　　本章开始编写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层，可以启动程序访问页面调试了，访问：http://localhost:8000/mobile/页面展示正常，如下图：

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