《基于SpringBoot Vue Android的餐厅营业系统设计与实现.doc》由会员分享，可在线阅读，更多相关《基于SpringBoot Vue Android的餐厅营业系统设计与实现.doc（122页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、摘要本论文研究的是一种基于SpringBoot、Vue、Android，使浏览器，移动端，服务器，三端交互，交流，实现的餐厅营业系统。采用B/S,C/S架构。开发工具使用IntelliJ IDEA，Visual Studio Code，Android Studio。使用的关系型数据库是MySQL5.7,非关系型数据库Redis。浏览器与服务器，移动端与服务器，的通讯方式是Htpp协议。数据交流类型是Json。本系统面向的用户为餐厅的管理人员，及来就餐的客户。客户在手机端进行下单，或者到前台人员处下单。管理人员获得订单，通知相关人员做菜，上菜。后台管理预计添加账号模块，提供登录，推出，账号创建功
2、能。商品管理，提供商品创建，商品查看，修改商品，商品上架，下架。权限控制，创建角色，角色权限管理，账号角色管理。订单管理，查看订单，确认订单。销售管理，折扣设定，后台下单。统计管理。商品销售数量统计，流量统计，销售额统计。移动端，提供用户注册，登录，推出，信息修改。主页模块，商品列表，商品详情，加入购物车。订单模块，提交订单，支付订单，取消订单，查看订单。本文将详细介绍系统的实现，包括该餐厅营业系统的可行性分析、需求分析、概要设计、详细设计、数据库设计、系统实现和系统测试以及使用的技术。系统数据的统计，对管理人员的积极意义。关键字：餐厅营业 SpringBoot 点餐 MySQL 安卓 Abs
3、tractThis paper studies a restaurant business system based on springboot, Vue and Android, which makes browser, mobile terminal, server, three terminal interaction, communication and implementation. B / s and C / S architecture are adopted. The development tools are IntelliJ idea, visual studio code
4、 and Android studio. The relational database used is mySQL5.7, and the non relational database Redis. The communication mode between browser and server, mobile terminal and server is HTTP protocol. The type of data exchange is JSON.The users of this system are restaurant managers and customers who c
5、ome to eat. The customer places an order on the mobile terminal or at the front desk. The management personnel get the order and inform the relevant personnel to cook and serve. Background management is expected to add account module to provide login, launch and account creation functions. Commodity
6、 management, provide commodity creation, commodity view, modify commodity, commodity on the shelf, off the shelf. Authority control, create role, role authority management, account role management. Order management, view order, confirm order. Sales management, discount setting, background order.Stat
7、istics management. Statistics of commodity sales quantity, flow and sales volume. The mobile terminal provides user registration, login, launch and information modification. This paper will introduce the implementation of the system in detail, including the feasibility analysis, demand analysis, out
8、line design, detailed design, database design, system implementation, system testing and the technology used. The statistics of system data is of positive significance to managers.Key words：restaurant business SpringBoot order MySQL 目录内容摘要4ABSTRACT5第一章 绪论11.1 开发背景11.2 开发目标11.3 开发意义1第二章 技术与工具平台32.1 前
9、端开发技术-Vue32.2 后端开发技术-SpringBoot32.3 移动端开发技术-Android32.4 开发环境42.4.1开发工具42.4.2硬件环境4第三章 系统分析53.1餐厅营业可行性分析53.2系统总体分析53.3系统总体架构63.4系统功能介绍73.4.1 后台管理系统模块73.4.2 移动客户端系统模块83.5系统用例93.5.1 系统总体用例图93.5.2 系统总体用例表93.5.3 系统主要用例错误！未定义书签。第四章 系统详细设计154.1 系统总体设计154.2类图设计164.3功能模块设计214.3.1 后台管理端系统模块设计21登录模块21商品管理22销售统计
10、27订单管理30账号管理35角色管理38权限管理434.2.2移动端用户模块设计46用户登录46用户注册47商品列表48加入购物车49清空购物车50创建订单51我的订单52订单详情53修改个人信息54第五章 数据库设计555.1数据库概念设计555.1.1 角色表555.1.2 用户表555.1.3 商品信息表555.1.5 订单详情表565.1.6 订单基础信息表565.1.7 权限信息表565.1.8 各实体关联关系图575.2 实体属性575.3餐厅营业系统数据库的逻辑结构设计585.3.1 数据库表物理结构585.3.2 数据库表物理模型60第六章 系统实现616.1 后台管理子系统模
11、块实现611登录模块612.商品管理643.销售统计714.订单管理755.账号管理826.角色管理887.权限管理956.2 移动端子系统模块实现971.用户登录972.用户注册993.商品列表1004.加入购物车1025.清空购物车1036.创建订单1047.我的订单1058.订单详情1069.修改个人信息107第七章 系统测试1097.1系统功能测试1097.1.1餐厅营业系统移动端功能测试1097.1.2餐厅营业系统系统后台功能测试1107.2系统性能测试112第八章 总结113参考文献115致谢116广东东软学院本科生毕业设计（论文）第一章 绪论1.1 开发背景改革开放以来，特别是进
12、入21世纪，互联网的在我国发展是极其迅速和全面的。不仅是在计算机技术取得非常大的成就，而更多的是在互联网行业的发展，比如商务、银行、汽车等行业与互联网都得到了不同程度的应用。微信与支付宝的移动支付业务，更是改变人们的生活。 在这样的环境背景下，餐饮行业出现了许多外卖点餐平台，如饿了么，美团外卖，百度外卖等外卖软件。也催生骑手职业的需要。然而，这些软件也只是解决了在外卖配送方面的需求。而许多餐厅外卖只是日常需求的一部分，对与许多到店就餐的的需要，并没有信息化，依然继承着许多传统习惯。客户需要在前台排队，下单。商家用笔写下每个用户的菜单，凭记忆写下金额，再使用计算器计算出总额。这样的营业方式，使得
13、餐厅营业效率低下，容易丢失客源。在生意火爆时，一条长长的队伍，往往打消了客户的消费需求。1.2 开发目标本选题的研究目的开发出一款软件，帮助商家展示自己的商品，消费者选择自己的商品，通过软件交流，减少排队现象。通过信息化的菜单，可以展示更丰富的信息，也能随时修改商品价格，避免纸质化菜单修改的麻烦。信息化后的数据，可以让电脑帮助计算统计，避免手工记账的信息错误。商家也可以使用软件，统计出许多营业状况信息，帮助自己更好的调整营业策略。 1.3 开发意义餐厅营业系统是一个帮助商家与客户减少交流的频率，减少不必要的沟通，让商家腾出更多的时间。一个热门的餐厅，必定很多客户。如果客户多起来，又没有相应的系
14、统，人们一旦排起队，将会减少餐厅内部的走动空间，造成拥挤。服务员上菜受阻，上菜效率变慢。并且额外的下单，也会耗费服务员的时间。如果使用本系统，就可以让用户自己下单，实时了解当前商品信息。系统对菜单结算，更准确无误。使得商家好更少的时间，做更简单的事。而且，并不是必须到店才能浏览商品。只需要在任何一个有网络的地方，用户登录账号就可以查看到商品信息。第二章 技术与工具平台2.1 前端开发技术-VueVue是目前而言比较热门的一套主流前端开发框架。Vue遵循MVVM模式，将视图UI和业务逻辑分开。Vue的双绑特性会将View层的数据及时更新到model中，model中的数据也会及时渲染到view中。
15、Vue使得前端开发不用操作DOM元素，解放用户双手。 2.2 后端开发技术-SpringBootJava是一门面向对象的编程语言，以往的java后端开发中，传统开源框架SSM(Spring+SpringMVC+MyBatis)是比较常用的。其中Spring框架在程序中扮演着一个对象工厂的角色，为业务处理提供对象。框架的核心就是控制反转（IoC），以往编辑代码需要使用对象时，都需要使用关键字new,生成一个对象。在Spring中，不需要这样操作，当配置好对象信息时，Spring会根据配置信息自动实例化该对象到容器中。到了需要使用时，Spring会将该对象取出来。而SpringMVC则是拦截用户的
16、请求，再将请求匹配到对应的Controller当中处理，请求中的参数也会封装到对应的实体类当中。匹配到后就可以按照代码的逻辑进行处理。而Mybatis则是对Java的连接数据库技术JDBC进行封装，为开发提供了便利，将数据库查到的数据映射成对应的对象，使得数据处理方便起来。各框架各司其职，但是需要协同一起合作就需要进行很多配置，除了框架本事的配置还有对整合进行配置。大量繁琐的配置就为业务开发带来的一定的阻碍，为了解决这些繁琐的配置,SpringBoot便应运而生。提供自动配置的stater，只要引入相应的stater就可以不进行xml的配置。大大的提高了开发效率，此外SpringBoot内嵌了
17、Tomcat或者Jetty等Servlet容器，为项目部署提供了便捷。若部署项目到服务器，服务器只需要安装jdk就行，项目可以打包成jar包，然后运行在服务器中。2.3 移动端开发技术-AndroidAndroid可使用Java语言进行开发。其开发模式模式是视图分离的，即使用xml进行图形界面布置，使用线性布局，相对布局，帧布局三种常用布局。在xml布局文件中，用个各种标签属性对页面进行控制。每个界面都与一个Activity进行绑定，如果需要对该页面的控件进行控制，就需要对控件进行绑定。各个Activity的间的切换通过Intent进行，有需要也可在Intent中存储数据，使各活动中可以进行数
18、据交互。在页面上的动态视图，可以用适配器进行绑定，再将数据交给适配器进行渲染变化。2.4 开发环境2.4.1开发工具表2-1 软件基本信息表序号名称版本备注1Windows10专业版操作系统2MySQL5.7数据库3JDK8开发环境4Tomcat8服务器（容器）5IntelliJ IDEA 2018.2.4 x64JavaEE开发工具6Android Studio3.5.3Android开发工具7Visual Studio Code1.39.2前端开发工具8Navicat Premium12MySQL数据库可视化工具2.4.2硬件环境表2-2 硬件信息表序号名称配置备注1CPU酷睿i5-421
19、0M CPU 2.60GHZ2存储128G SSD固态硬盘+1TB 机械硬盘3内存8G 第三章 系统分析3.1餐厅营业可行性分析本系统是为了方便餐厅经营者更方便有效的经营开发的。点餐系统采用B/S和C/S的结构。从硬件需求上看，系统的运行需要与电脑，手机的支持。在如今的时代，电脑，手机，相信是家家户户都拥有的。而通讯网络，也是必不可少的。只要服务器端没有出现问题，系统可以在任意具有网络环境的电脑或者手机登录进来。是相当方便的。系统针对传统餐厅现有的工作现状，结合计算机软件技术，可以在多个方面为提升餐厅的营业效率，减少人员的人力成本，提高订单的成交效率，将繁琐而重复的工作交给计算机，及客户操作，
20、数据的计算会比人工计算精准而迅速，客户的意愿也能准确的表达出来。所以使用本系统后，可以极大的提升营业的效率。由于该系统使用的技术是开源免费的，数据库也是。所以开发授权费用几乎为零。经济上是可行的。而且使用的技术也是目前web开发所使用的主流技术，大部分问题都是有解决方案的。技术上，也是可行的。3.2系统总体分析餐厅营业系统主要分为两个操作端。其中，大部分功能在于管理员的后台管理端。在进入后台管理系统后，经营者可以创建商品，对商品的价格，图片，类型，名字等信息进行编辑。可以在销售管理中创建订单，并下单。为促销商品，对商品设定打折优惠。可以查看订单情况。在统计管理中，可以统计出最近销售情况，包括销
21、售额，销售数量，人流活跃时段。对这些数据的统计，可以帮助经营者更好的了解经营情况。权限控制中，经营者可以创建新的后台账号，然后创建角色，给角色赋予权限。可以将部分权限交给工作人员操作。而在客户移动端，客户可以注册账号，然后登录餐厅，看到上架的商品，然后选择喜欢的商品下单。可以查看，编辑自己的个人的资料。查看自己的订单记录。3.3系统总体架构该系统有三端程序交互运行服务的。后台管理员共餐厅营业方使用，用于商品及数据的管理。移动客户端是客户登录使用的。服务器端就是接收后台及移动的请求，然后查询数据库的数据，返回给两端。交互如下图图3-1三端交互的关系图图3-2系统分层图3.4系统功能介绍3.4.1
22、 后台管理系统模块图3-3后端系统功能模块图(1) 商品管理系统管理人员在有权限的情况下，可以为系统新增商品，查看商品，删除商品，修改商品。(2) 账号模块指系统用户登录系统，推出系统的部分功能。(3) 订单管理管理员在有权限的情况下，可以查看移动端提交的订单，确认订单。(4) 权限管理管理员在有权限的情况下，可以创建不同的角色，给不同的角色分配权限，然后再将角色赋予账号，账号就拥有不同的权限。(5) 销售管理管理员在有权限的情况下，可以在后台创建订单，此功能是方便不喜欢在自动端下单的客户设计。也可以在这里设定商品的折扣。(6) 统计管理管理员在有权限的情况下，可以查看近期的销售额数据，销售数
23、量数据，以及订单创建的频率3.4.2 移动客户端系统模块图3-4 移动客户功能模块图(1) 用户注册 未拥有账号信息的用户，通过填写相应的注册信息，注册一个属于自己的账号，供管理员识别身份(2) 我的资料用户查看个人的信息，以及个人信息改变后，需要对自己账号信息进行更改。(3) 我的订单用户可以查看自己的订单历史，确认自己的商品是否匹配上，以及商品信息是否正确。(4) 选择商品 用户查看店铺的主要商品，浏览价格信息，以及商品的图示跟商家描述。(5) 创建订单用户决定购买商品，结算自己的商品。3.5系统用例3.5.1 系统总体用例图图3-5系统总体用例图3.5.2 系统总体用例表图3-6系统总体
24、用例表总用例表编号参与者用例名称用例说明A01移动端用户注册账户用户登录页面，填写个人信息注册账户A02登录用户在app输入账户密码进行登录A03查看商品列表用户登录后进入商品列表页，获取商品列表A04加入/移出购物车将商品放入，移出购物车中A05订单列表查询查询个人的历史订单列表。A06订单详情查看某个订单的详细情况A07创建订单用户确认购物车的商品，并填写桌号确认下单A08修改个人资料用户修改个人的资料用例B01管理员登录管理员在浏览器输入账户密码登录B02新增账号管理员增加后台账号B03查询账号列表查询后台账号列表，用于管理B04修改账号资料修改账号资料B05查看查看单个账号的资料及角色
25、B06销售统计可以查看三个数据的统计包括，订单总额，订单数量，商品销售数量B07订单搜索用于后台开订单B08删除订单用于删除错误的订单B09查看订单查看单个订单的详情B10搜索商品输入商品名，选择类型，上架状态搜索相应商品B11商品上/下架对商品进行上/下架操作，即设置商品是否可购买B12新增商品增加需要销售的商品B13查看商品查看单个商品详情B14编辑商品修改商品信息B15搜索角色输入角色名，选择角色状态，搜索对应的角色B16增加角色新建需要其他权限的角色B17角色停/启用管理角色是否启用B18编辑角色修改角色名，拥有权限B19查看角色查看角色信息，包括拥有的角色B20增加权限增加可以操作的
26、权限B21编辑权限编辑已有的权限B22编辑账号角色给账号分配角色B23新增订单后台管理员开具订单，用于无app客人3.5.3 系统主要用例1.移动注册用例图 3-7注册用例图2.添加/移除购物车用例图图 3-8添加/移除购物车用例图3.后台新增订单用例图 3-9后台新增订单用例图4.后台编辑账号角色用例图 3-10后台编辑账号角色用例图第四章 系统详细设计4.1 系统总体设计由图4-1可知道，餐厅营业系统主要分为后台管理端子系统，和移动客户端子系统。移动客户端子系统主要有主页模块，用户模块，订单模块，各模块功能如图4-2可见。后台管理端子系统有账户模块，商品管理，权限控制，订单管理，销售管理，
27、统计管理。各模块功能由4-3可见。图4-1 餐厅营业系统模块划分图图4-2 移动客户端系统模块划分图图4-3后台管理子系统模块划分图1.2 类图设计（1） User类图4-4 User类图（2） Commodity类图4-5 Commodity类图（3） MainOrder类图4-6MainOrder类图（4） Right类图4-7 Right类图（5） Role类图4-8 Role类图（6） RoleRight类图4-9 RoleRight类图（7） UserRole类图4-10 UserRole类图（8） OrderList类图4-11 OrderList类图4.3功能模块设计4.3.1
28、后台管理端系统模块设计登录模块登录进入登录页面，输入账号密码。通过http请求，以json格式传送账号和密码给后台。后台经过加密算法计算加密后的密码，以账号和加密后的密码做查询条件查询账号。如果查询到该账号，则进入后台的首页。错误则会提示，账号或密码错误。图4-12 登录流程图图4-13 登录状态图登出点击头像，下方弹出退出登录按钮。点击退出登录。后台将清楚保存的账户数据，清除完毕。返回结果给前端。前端跳转到登录页面。图4-14 退出流程图图4-15 退出状态图商品管理 创建商品管理员点击商品管理，展开列表，选择创建商品。弹出商品信息输入框。输入商品的名字，价格等基础信息。选择商品的图片。图片
29、使用单独文件上传接口上传。后台返回一个重命名的图片名，前端再将图片名字跟商品信息一起发送给服务器端。服务器插入数据库正常，则返回添加成功信息。如果失败，则返回失败信息。图4-16 创建商品流程图图4-17 创建商品状态图 查看商品点击商品管理，先请求出商品列表总览。点击某个商品的查看按钮，将商品id传给后台服务器，后台服务器查询数据库。如果查询到该商品，则返回具体商品信息。查询失败，则返回失败信息。图4-18 查看商品流程图图4-19 查看商品状态图 修改商品点击商品管理，在商品列表中，选择编辑商品，商品编辑框回显出商品信息。用户对错误或者不满意的信息进行修改后，点击确认。数据交给服务器进行更
30、新数据库。数据更新成功后，提示更新成功。失败，则提示失败。图4-20 修改商品信息流程图图4-21 修改商品信息状态图删除商品点击商品管理，后台查询到商品列表。勾选需要删除在商品，点击删除商品。弹出确认删除提示框。将要删除的商品编码已数组形式提交给后台服务器。后台服务器访问数据库对相应商品进行删除。对删除结果回馈给前端显示出来。图4-22 删除商品流程图图4-23 删除商品状态图商品上/下架在商品列表勾选商品。点击上/下架按钮，将列表传给后台。后台查询数据库，将商品状态进行修改。再将修改结果信息传给前端。图4-24 商品上/下架流程图图4-25 商品上/下架状态图销售统计销售额统计点击销售统计
31、，在销售额统计的右方，点击下拉框选择需要查看的月份销售额。将月份信息发送给后台。后台查询数据库，统计出该月份每天的销售额。以列表形式返回给前台以折线统计图表现出来。图4-26 统计销售额流程图图4-27 统计销售额状态图商品销售数统计点击销售统计，在商品数量统计的右方，点击下拉框选择需要查看的的月份信息。将月份信息发送给后台。后台查询数据库，统计出该月份商品销售的数量。以列表形式返回给前台以条形统计图表现出来。图4-28 查询商品销售数流程图图4-29 查询商品销售数状态图时段订单统计点击销售统计，在时段订单的右方，点击下拉框选择需要查看的日期的时段订单。将日期信息发送给后台。后台查询数据库，
32、统计出该日期不同时段的订单数。以列表形式返回给前台以折线统计图表现出来。图4-30 查询时段订单流程图图4-31 查询时段订单状态图订单管理创建订单点击创建订单按钮，浏览器弹出订单信息框。输入订单对应的卓号，选择需要的商品，默认数量1。有需要可以更改。若有什么备注信息，可以填写备注信息框。将订单交给后台，后台访问数据库，添加订单信息。图4-32 订单创建流程图图4-33 订单创建状态图搜索订单在订单号框输入订单号，支持模块查询。选择已看状态。点击搜素，后台根据订单号，状态信息。访问数据库，查询数据库的订单信息。订单号查询可选，状态必选。图4-34 查询时段订单流程图图4-35 查询时段订单状态
33、图查看订单详情点击订单列表中，具体某个订单后边的查看按钮。查询该订单的详细信息。后台访问数据库，如果存在这个订单，将查询到的具体信息返回给前端页面。前端再展示出来。图4-36查询订单详情流程图图4-37查询订单详情状态图订单删除在订单列表中，前面有个可勾选方框，用于选择订单。将想要删除的订单勾选，支持多选。点击删除订单按钮。浏览器弹框提示，是否确认删除订单。防止误操作。确认无误，将订单列表信息交给后台。后台尝试访问数据据库，对相应订单进行删除。图4-38删除订单流程图图4-39删除订单状态图已看订单该功能用于确认移动端客户所创建的订单。表示该订单已被服务员查看。同样勾选未查看的订单，然后点击已
34、看按钮。前端将订单信息传给后端，后端访问数据库，对数据库相应的订单，将其状态修改为已查看。完成后，前端刷新数据。已看订单，只能在已看列表中查到。图4-40已看订单流程图图4-41已看订单状态图账号管理增加账号点击增加账号按钮，输入需要增加的账号数量。点击确定。后台根据填写的数量。创建对应数量的账号。账号统一有相关的默认信息。密码默认123456，名字未知用户。若要区别，应当编辑对应的信息，完善信息。图4-42增加账号流程图图4-43增加账号状态图查看账号详情在对应账号的后边，有查看按钮。点击查看，后台查询相关的账号信息，将信息返回给前端。图4-44查询账号流程图图4-45查询账号状态图编辑账号
35、在对应账号后边，有编辑资料按钮。点击编辑资料，账号信息框回显账号信息。由于密码经过加密处理，就不回显了。修改好信息后。前端将数据交给后台。后台访问数库，对数据库进行修改。将是否修改成功的信息传给前台。图4-46编辑账号流程图图4-47编辑账号状态图编辑角色为了对每个账号进行权限管理，每个账号都可以赋予不同的角色。不同角色对应不同的角色权限。点击账号后面的编辑角色。弹出该账户的角色信息，点击下拉框可以增加角色，对已有的角色。不可再增加，但可以删除。选择完毕。点击确认。将角色信息传给后台服务器。后台将修改结果传给前端。图4-48编辑角色流程图图4-49编辑角色状态图角色管理增加角色点击增加角色按钮
36、，弹出角色编辑框，输入角色名。点击确定，数据库将角色信息插入数据库。将是否成功信息返回给前端显示。 图4-50增加角色流程图图4-51增加角色状态图角色搜索在对应账号的后边，有查看按钮。点击查看，后台角色信息，将信息返回给前端。图4-52角色搜索流程图图4-53角色搜索状态图角色停启用再停启用角色列表，勾选需要角色。再点击停/启用按钮。调用后台接口。访问数据库修改状态。再将结果返回给前端。图4-54角色停/启用流程图图4-55角色停/启用状态图编辑角色点击编辑角色，通过下拉选择权限范围。对已有的权限可删除。修改角色名字。点击确认，后台根据数据访问数据库，修改对应数据。将操作结果返回前端。图4-
37、56角色编辑流程图图4-57角色编辑状态图查看角色点击角色列表中，后方的查看按钮。将给角色id传给后台，后台查询数据库获得该角色的信息。返回给前端。如果查不到，则返回查询失败信息。图4-58角色查看流程图图4-59角色查看状态图权限管理增加权限单击左上角增加权限，输入权限的名字，及对应的url地址。点击确定。前端将数据交给 后台，后台访问数据据将数据插入。将插入是否成功的结果传给前端。图4-60权限增加流程图图4-61权限增加状态图权限编辑点击需要更改的权限后方的编辑权限，页面显示改权限相关信息，并显示为可编辑状态。对需要修改的数据进行改动。点击确定后，将数据传给后端。后端访问数据库对对应信息
38、进行更新。再将是否更新成功的信息传给前端。图4-62 修改权限流程图图4-63 修改权限状态图1.2.2 移动端用户模块设计用户登录图4-64 移动登录流程图图4-65 移动登录状态图进入登录页面，输入账号密码。通过http请求，以json格式传送账号和密码给后台。后台经过加密算法计算加密后的密码，查询数据库账号。如果查找到该账号，则进入后台的首页。错误则会提示，账号或密码错误。图4-30 登录流程图显示。用户注册图4-66 移动注册流程图图4-67 移动注册状态图在登录页面点击注册账户。显示各属性录入框，手动输入各数据，如果数据有误或者未填写，在点击注册时会提示相应信息。填写完毕，将数据转化
39、为JSON数据，然后发送给后台验证。如果注册出错则提示错误信息商品列表图4-68 商品列表流程图图4-69 商品列表流状态图从登录页进入首页，客户端自动向服务器查询当前已上架的商品信息，显示在列表中。加入购物车图4-70 加入购物车流程图图4-71 加入购物车状态图点击商品信息框下的“+”按钮，商品将加入购物车中，同时总金额会产生改变。清空购物车图4-72 清空购物车流程图图4-73 清空购物车流状态图点击购物车，购物车弹出列表，右上角有清空购物车按钮，点击清空购物车按钮。购物车中已添加的商品信息将被清除。创建订单图4-74创建订单流程图图4-75创建订单状态图在商品列表又下方，在已经选择商品
40、的情况下，可以点击结算。将购物车中的商品信息加入订单，并且，订单必须填写桌号，用于配送。备注可以选择填写。点击确认，创建完毕将提示。我的订单图4-76订单列表流程图图4-77订单列表状态图在商品列表页面，将屏幕右滑动，带出侧滑栏。上面有我的订单选项，点击将查询我的订单历史记录。排序方式已创建时间降序排列，最新订单在最前面。方便用户查看最近订单信息。订单详情图4-78订单详情流程图图4-79订单详情状态图在订单列表中，每项订单都有一个查看详情按钮。点击按钮进去可以查看订单详细状态修改个人信息图4-80修改个人信息流程图图4-81修改个人信息状态图在侧滑栏中，点击姓名按钮，跳转到修改资料页面。输入
41、修改的信息，点击修改按钮。检查信息合法将调用后台接口进行信息更改。更改完成回到侧滑栏页面。第五章 数据库设计5.1数据库概念设计5.1.1 角色表图5-1 角色实体E-R图5.1.2 用户表图5-2 用户信息实体E-R图5.1.3 商品信息表图5-3 商品信息实体E-R图5.1.5 订单详情表图5-5 订单详情信息实体E-R图5.1.6 订单基础信息表图5-6 订单信息实体E-R图5.1.7 权限信息表图5-7 订单信息实体E-R图5.1.8 各实体关联关系图图5-8 各实体关联E-R图5.2 实体属性(1) 角色：角色用于保存不同用户的的权限信息。其中包含禁用状态，角色名字，创建人，创建日期
42、等。(2) 用户：用户包括用户ID、用户电话和用户密码。用户ID作为主键自增。密码经过加密保存(3) 商品：商品拥有id,商品名字，图片url,备注，创建日期，更新日期，创建人，创建人账号，原价，现价，类型，商品编码，上下架状态，这些属性。其中，id作为自增唯一主键，上下架状态，1表示上架，2表示下架。(4) 订单基础属性：基础属性有id,创建日期，总价，创建者，创建账号，订单编码，订单位置，支付状态，备注。其中，订单位置指顾客所在位置，支付状态指订单是否已付款，在后台管理开具的订单，默认已付款。(5) 订单列表：订单列表记录的是订单中选择的商品信息，有id,商品id,数量，单价，总价，主订单
43、编码。订单基础信息，与订单列表是一对多关系，主订单编码，标志本商品属于那一张订单。商品id，可以用于关联商品(6) 权限：权限保存权限名字以及权限对应的url地址5.3餐厅营业系统数据库的逻辑结构设计 5.3.1 数据库表物理结构用户信息表（user）的设计如下表5-1所示。商品类型信息表（commodity）的设计如下表5-2所示。主订单信息表（main_order）的设计如下表5-3所示。订单列表表（order_list）的设计如下表5-4所示。角色表（role）的设计如下表5-5所示。权限表（right）的设计如下表5-6所示。账号角色关系表（user_role）的设计如下表5-7所示。角色权限关系表（role_right）的设计如下表5-8所示。5.3.2 数据库表物理模型图5-9 数据库物理模型第六章 系统实现6.1 后台管理子系统模块实现1登录模块图6-1 登录首页登录进入登录页面，登录框使用Element-UI组件的form表单，为表现美观将登录框背景虚化。第一个输入框输入账号，第二个框输入密码。点击密码框的小眼睛可以显示密码明文。点击登录检查输入框是否为空。内容不为空就调用后台接口，将账号信息发送。图6-2 前端显示页面使用Element-