第九篇(H5手机移动端点餐："主页调试-动态页面"和店铺切换)

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

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

博客目录：

......

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

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

九、基于Django+mysql的点餐系统设计-第九篇(H5手机移动端点餐："主页调试-动态页面"和店铺切换)

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

　　所谓动态网页，就是通过后端的渲染，前端动态展示数据库里面的最新内容。要动态展示内容，就先处理后端的逻辑吧！在mobile/views/index.py中的index函数负责将逻辑判断的结果渲染到前端，现在捋一下实现逻辑：index函数中先去缓存中获取店铺信息，<1>如果没有缓存信息，将页面重定向店铺选择页，店铺选择完后，遍历菜品类别和菜品信息，然后以字典的形式封装，渲染到前端；<2>如果有缓存信息，遍历菜品类别和菜品信息，然后以字典的形式封装，渲染到前端。代码如下：

    '''移动端首页'''
    #获取并判断当前店铺信息
    shopinfo = request.session.get("shopinfo", None)
    if shopinfo is None:
        return redirect(reverse("mobile_shop")) # 重定向到店铺选择页
    # 获取当前店铺下的菜品类别和菜品信息
    clist = Category.objects.filter(shop_id=shopinfo['id'],status=1)
    productlist = dict()
    for vo in clist:
        plist = Product.objects.filter(category_id=vo.id, status=1)
        productlist[vo.id] = plist
        context = {'categorylist': clist, 'productlist': productlist.items(), 'cid': clist[0]}
    return render(request, "mobile/index.html")

　　后端渲染完了，咱们看一下前端代码怎么改动？templates/mobile/index.html中要接收后端传过来的信息，然后把信息遍历出来展现到页面上。前端代码如下

{% extends 'mobile/base.html' %}
{% load static %}

{% block mainbody %}
    <!--头部-->
    <header class="search" id="search">
        <div class="header">
            <h1>{{ request.session.shopinfo.name }}-{{ request.session.shopinfo.shop }}</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>
            {% for vo in categorylist %}
            <a href="javascript:void(0);"onclick="doselectList(this,{{ vo.id }})" {% if cid.id == vo.id %}class="select"{% endif %} >{{ vo.name }}</a>
            {% endfor %}
        </div>

        <!--右侧产品-->
        <div class="sortContent line">
            <!--产品列表-->
            {% for key,plist in productlist %}
            <ol class="list-content" id="list-content{{ key }}" style="display:none;">
                {% for vo in plist %}
                <li class="line">
                    <a href="#">
                        <div class="pro-img"><img src="{% static 'uploads/product/' %}{{ vo.cover_pic }}" alt=""></div>
                        <div class="pro-con"><h3>{{ vo.name }}</h3><font>绝对超值，店长推荐</font><b>{{ vo.price }}</b></div>
                    </a>
{#                    <a href="javascript:doCartAdd({{ vo.id }})" class="list-cart"><i class="icon-cartadd"></i></a>#}
                </li>
                    {% endfor %}
            </ol>
            {% endfor %}

            <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){#}
    {#    $.ajax({#}
    {#        url:"{% url '' %}?pid="+id,#}
    {#        type: 'get',#}
    {#        data: {},#}
    {#        dataType: 'json',#}
    {#        success:function (res) {#}
    {#            console.log(res.cartlist);#}
    {#            doShowCart(res.cartlist);#}
    {#        }#}
    {#    });#}
    {#}#}

    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 %}

　　现在前端和后端都写完代码了，理论上可以调试了，但是现在访问链接会报错。这是因为后端在拿不到缓存信息的情况下会重定向到商铺选择页，所以咱们还得继续把商铺选择页的逻辑实现才能进行调试。

　　mobile/urls.py中加入商铺选择页面的路由，如下：

    #店铺选择
    path('shop',index.shop, name="mobile_shop"), # 移动端店铺选择页

　　mobile/views/index.py中编写shop函数，获取商铺信息，将商铺信息渲染到前端

def shop(request):
    '''呈现店铺选择页面'''
    context = {'shoplist': Shop.objects.filter(status=1)}
    return render(request, 'mobile/shop.html', context)

　　templates/mobile/shop.html中编写店铺选择页面，获取后端传过来的数据，遍历信息后将信息展现到页面

{% extends 'mobile/base.html' %}
{% load static %}

{% block mainbody %}
    <!--头部-->
    <header>
        <div class="header">
            <h1>切换店铺</h1>
            <a href="{% url 'mobile_index' %}" class="return"></a>
        </div>
    </header>

    <!--内容区-->
    <article class="main-container">

        <!--产品-->
        <div class="list-content cartlist order-Pro">
            <ul>
                {% for vo in shoplist %}
                    <li class="line select">
                        <a href="">
                        <div class="pro-img"><img src="/static/uploads/shop/{{ vo.cover_pic }}" alt=""></div>
                        <div class="pro-con"><h3>{{ vo.name }}</h3><p>电话：{{ vo.phone }}</p><p>{{ vo.address }}</p></div>
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </article>
{% endblock %}

　　写到这，可以访问链接调试了，启动工程访问http://127.0.0.1:8000/mobile，页面跳到了店铺选择页

　　现在店铺选择页面能正常访问了，但是还需继续选择一个店铺，后端的index函数的代码才能继续往下走，前端页面才能显示餐品浏览主页。下面开始编写执行店铺选择的操作。testorder/mobile/url.py添加“执行店铺选择”的路由，如下：

    path('shop/select',index.selectShop, name="mobile_select_shop"), # 执行移动端店铺选择

　　templates/mobile/shop.html页面中添加"执行店铺选择"的路由：

 <!--产品-->
        <div class="list-content cartlist order-Pro">
            <ul>
                ......
                <a href="{% url 'mobile_select_shop' %}?sid={{ vo.id }}">
                ......
            </ul>
        </div>

　　mobile/views/index.py中新增selectShop函数，用以处理执行店铺选择的逻辑：

def selectShop(request):
    '''执行店铺选择'''
    # 获取店铺id号，通过店铺id号获取店铺信息
    sid = request.GET['sid']
    ob = Shop.objects.get(id=sid)
    # 将店铺信息放入到seession中
    request.session['shopinfo'] = ob.toDict()
    return redirect(reverse('mobile_index'))

执行店铺选择后页面会重定向到mobile/views/index.py的index函数中，展示所选择商铺的餐品信息

　 主页展示现在是正常了，为了在主页方便切换店铺，在templates/mobile/index.html中添加"切换店铺选择页"的路由信息

 <!--底部栏目-->
    <menu>
        <a href="{% url 'mobile_shop' %}"><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>

　　现在点击下主页左下角的"切换店铺"，可以正常切换店铺

　　好了，本篇主要讲的内容："主页调试-动态页面"和店铺切换说完了,下一篇文章开始讲H5手机移动端点餐的登录