18.移动点餐端搭建----点餐系统移动端

最新推荐文章于 2023-03-17 15:58:31 发布

oliver3455

最新推荐文章于 2023-03-17 15:58:31 发布

阅读量720

点赞数

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

本文链接：https://blog.csdn.net/oliver3455/article/details/125689045

版权

本节完成会员移动端点餐应用，创建基本视图、配置路由、套用模板实现移动点餐端应用项目结构的搭建,主要就是把各种模板给套成功。
此移动端的应用名称为 mobile，具体项目结构如下：

myobject/ 项目目录
    |   
    |--myadmin/ 后台管理应用
    |    |...
    |
    |--web/ 前台应用（大堂点餐）
    |    |...
    |
    |--mobile/ 移动端点餐应用\
    |    |-- __init__.py
    |    |--views/
    |    |    |--index.py 首页、店铺选择、下订单、登录，退出等路由
    |    |    |--cart.py  购物车信息管理视图
    |    |    |--member.py 个人中心管理视图
    |    |    |--......
    |    |
    |    |-- admin.py
    |    |-- apps.py
    |    |-- models.py
    |    |-- tests.py
    |    |-- urls.py 配置了移动端点餐应用的所有请求路由
    |
    |--myobject/ 项目目录
    |    |-- __init__.py
    |    |-- settings.py
    |    |-- urls.py
    |    |-- wsgi.py
    |
    |--static/ 静态资源目录
    |    |-- uploads/   上传文件存储目录
    |    |-- myadmin/   后台管理静态资源目录
    |    |-- web/       大堂点餐静态资源目录
    |    |-- mobile/    移动端管理静态资源目录
    |    |      |-- css/ css文件夹
    |    |      |-- font/ 字体文件夹
    |    |      |-- img/ 图片资源文件夹
    |    |      |-- js/ js文件夹
    |
    |--templates/ 模板目录
    |    |-- mobile/  移动端管理模板目录
    |    |      |-- base.html 移动端父模板文件
    |    |      |-- register.html 注册/登录页面
    |    |      |-- shop.html 店铺选择页面
    |    |      |-- index.html 当前店铺菜品展示页面（首页）
    |    |      |-- add_order.html 准备下订单页
    |    |      |-- member.html 个人中心页面
    |    |      |-- member_orders.html 个人中心里的订单列表页面
    |    |      |-- member_detail.html 订单详情页
    |    |
    |    |-- myadmin/ 后台管理模板目录
    |    |-- web/     大堂点餐模板目录
    |
    |--manage.py 入口文件

项目展示效果如下：

开发步骤：
创建并编写视图文件index.py ,member.py
配置移动端应用urls路由文件
套用模板文件
- 注册/登录页
- 店铺选择切换页
- 店铺菜品展示页
- 会员中心页

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

（1）创建并编辑视图文件：
进入 mobile/views/ 目录，并创建： index.py和member.py 两个视图文件.
编辑移动端 mobile/views/index.py 视图文件，初始代码如下

from django.shortcuts import render
from django.http import HttpResponse
from django.shortcuts import redirect
from django.urls import reverse


# Create your views here.
def index(request):
    '''移动端首页'''
    return render(request,"mobile/index.html")

def register(request):
    '''加载注册/登录页面'''
    return render(request,"mobile/register.html")

def doRegister(request):
    '''执行注册/登录'''
    # 登录成功后跳转到店铺选择页面
    pass

def shop(request):
    ''' 呈现店铺选择页面 '''
    return render(request,"mobile/shop.html")

def selectShop(request):
    ''' 执行店铺选择 '''
    # 选择好店铺后会跳转到移动端首页
    pass

def addOrders(request):
    ''' 加载准备下订单页，由会员确认 '''
    return render(request,"mobile/addOrders.html")

编写移动端 mobile/views/member.py 会员中心视图文件，初始代码如下

from django.shortcuts import render
from django.http import HttpResponse
from django.shortcuts import redirect
from django.urls import reverse

# 移动端个人中心

def index(request):
    '''个人中心首页'''
    return render(request,"mobile/member.html")

def orders(request):
    '''浏览会员订单'''
    return render(request,"mobile/member_orders.html")

def detail(request):
    '''浏览会员订单详情'''
    return render(request,"mobile/member_detail.html")

def logout(request):
    '''执行会员退出'''
    return render(request,"mobile/register.html")

（2）配置移动端应用路由信息：

打开并编辑路由文件：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_selectshop"), #执行移动端店铺选择
    #订单处理
    path('orders/add', index.addOrders, name="mobile_addorders"), #加载移动端订单页

    #会员中心
    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）套用静态模板

将事先准备好的移动点餐端静态模板素材文件下载并解压。
进入素材文件夹内，将提前准备好模板目录中的静态资源目录的：css、js、img和fonts 复制到项目的static/mobile/目录下。（需要的可以留言或私信）

编写模板文件

安装如下文件目录要求准备对应的模板文件，并进行套用，事先移动端页面的静态布局：

myobject/ 项目目录
    |
    |--templates/ 模板目录
    |    |-- mobile/  移动端管理模板目录
    |    |      |-- base.html 移动端父模板文件
    |    |      |-- register.html 注册/登录页面
    |    |      |-- shop.html 店铺选择页面
    |    |      |-- index.html 当前店铺菜品展示页面（首页）
    |    |      |-- add_order.html 准备下订单页
    |    |      |-- member.html 个人中心页面
    |    |      |-- member_orders.html 个人中心里的订单列表页面
    |    |      |-- member_detail.html 订单详情页
    |    |      ...
    |    ...
    ...

使用模板继承套用模板文件：base.html，这个文件是根据原来的index.html文件提出来的功能部分，作为父模板。

移动端父模板：templates/mobile/base.html 代码：


{% load static %}
<!doctype html>
<html>
<head>
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="author" content="guo,1057540638@qq.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,target-densityDpi=medium-dpi, minimal-ui" />
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

<!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->

<!--meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" -->
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 --&