20. 项目实战之 移动端菜品展示

• 本节将实现项目在 移动端首页菜品展示，根据之前选择的店铺信息获取对应的菜品类别和菜品信息。这和之前的大堂点餐的获取方式是一样的，只是这个还多出一个切换展示的效果

 实现步骤：

编辑视图文件index.py

配置店铺菜品展示路由

编辑店铺菜品输出模板文件

=========================================================================

(1). 编辑视图文件获取当前店铺的菜品信息

• 编辑此视图文件：mobile/views/index.py 代码如下：

# 购物车信息管理视图文件
.....
from myadmin.models import Shop
from myadmin.models import Category
from myadmin.models import Product

# Create your views here.
def index(request):
    '''移动端首页'''
    #获取并判断当前店铺信息
    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 = {"shopinfo": shopinfo, "categorylist": clist, "productlist": productlist.items(), "cid": clist[0]} #cid 是默认选中侧边栏的哪个选项卡
    return render(request,"mobile/index.html",context)

(2). 配置项目中购物车urls路由信息

• 打开根路由文件：myobject/mobile/urls.py路由文件，编辑路由配置信息:

from django.urls import path

from mobile.views import index
from mobile.views import member

urlpatterns = [
    path('', index.index, name="mobile_index"), #移动首页

     # 移动端会员注册/登录路由
    path('register', index.register, name="mobile_register"),
    path('doregister', index.doregister, name="mobile_doregister"),

    # 选择商铺
    path('shop', index.shop, name="mobile_shop"),
    path('shop/select', index.selectShop, name="mobile_select_shop"),

    # 处理订单
    path('orders/add', index.addOrders, name="mobile_orders_add"),

    # 会员中心
    path('member', member.index, name="mobile_member_index"), #会员中心首页
    path('member/orders', member.orders, name="mobile_member_orders"), #会员中心订单
    path('member/detail', member.detail, name="mobile_member_detail"), #会员订单详情
    path('member/logout', member.logout, name="mobile_member_logout"), #会员退出
]

 

(3).　编辑模板文件，实现当前店铺菜品信息展示

• 编辑首页模板文件：templates/mobile/index.html 并进行编辑,实现菜品信息展示

  {% extends 'mobile/base.html' %}
  {% load static %}
  
  
  
  {% block mainbody %}
  	
  	
  
  		
  			{{request.session.shopinfo.name}}--{{request.session.shopinfo.shop}}
  		
  		
  	
  
  	
  	
  		
  	
  
  	
  	
  		
  		
  		
  			
  分类导航
  			{% for vo in categorylist %}
  			{vo.id}})" {% if cid.id == vo.id %}{% endif %}>{{vo.name}}
              {% endfor %}
  
  
  
  
  		
  		
  		
  		
  			
  			{% for key,plist in productlist %}
  
  			
  
  
  				{% for vo in plist %}
  				
  
  					
  						{vo.cover_pic}}" alt="">
                          {{vo.name}}绝对超值,店长推荐 ¥{{vo.price}}
  
  					
  					{vo.id}})" >
  				
                  {% endfor %}
  			
              {% endfor %}
  
  			
  
  
  		
  		
  		
  		
  			
  			
  				清空
  				
  			
  			
  			
  				
  
  					
  				
  			
  			
  			
  				共计：¥0.00
  			
  		
  
  	
  
  	
  	
  		切换店铺
  		
  		0购物车
  		我的
  		去结算
  	
  	
  	
  	
  {% endblock %}
  
  {% block myjavascript %}
  
  {% endblock %}