20. 项目实战之移动端的店铺切换

最新推荐文章于 2025-05-08 21:06:30 发布

oliver3455

最新推荐文章于 2025-05-08 21:06:30 发布

阅读量615

点赞数

分类专栏：点餐项目开发合集文章标签： django 后端 python 开发语言 javascript

本文链接：https://blog.youkuaiyun.com/oliver3455/article/details/125696883

版权

本博客介绍了移动端店铺选择切换的实现过程，包括编辑视图文件以获取和处理店铺信息，配置路由来处理店铺选择切换，以及编辑模板文件以展示选定店铺的数据。通过这些步骤，实现了移动端用户能够切换店铺并查看相应菜品的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本节将实现移动端店铺选择切换效果，也就是为了实现移动端首页菜品展示做准备。
具体店铺切面效果如下。切换某个店铺，然后跳转到某个店铺展示菜品
实现移动端店铺的切换步骤：
编辑视图文件index.py
配置店铺选择切换路由信息

编辑店铺选择模板文件

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

(1). 编辑视图文件获取店铺信息
编辑 mobile/views/index.py 视图文件的shop()和selectshop()函数，完成店铺信息选择切换操作。

from myadmin.models import Shop

# ... ...

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

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

# ... ...

(2). 配置店铺选择切换路由

编辑 mobile/urls.py 移动端路由文件。


... ...

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

... ...

(3).　编辑模板文件实现店铺信息展示

打开模板文件：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"><i></i></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="{% url 'mobile_selectshop' %}?sid={
    {vo.id}}">
					<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>&