PHP+Vue的订餐WebApp的设计与实现

PHP+Vue的订餐WebApp的设计与实现

PHP+Vue的订餐WebApp的设计与实现DesignandImplementationofWebAppforOrderingmealsBasedonPHP+Vue绪论研究背景及意义快速发展的互联网技术，使得网络早已渗透现代人日常生活的方方面面，网上订餐由于其具备的方便快捷的特性，更能够轻而易举地被人们尤其是不具备做饭条件的大学生群体的认同和接受。目前校园网上订餐业务在我国还处于形成期，主要形式是网上订餐平台，代表性的美团外卖、饿了么和淘点点，这些平台的每日成交量不低，足见网上订餐拥有庞大的客户群和广阔市场，但产生这一成交量的条件是，校园周围有繁华的商业区、便利的交通条件和众多的餐馆。大学生因学习紧张、距离食堂较远等因素，对“足不出户，送餐上门”的需求很强烈。该网上订餐系统的选题恰恰是来源于现实生活，希望能够解决现实生活中的实际问题。面向大学生消费群体的网上订餐系统，具有广阔的发展前景和推广应用价值。一方面，对食堂来说，在成本核算上，通过预定避免了食品的浪费，通过在线留言板，及时收集信息，改进菜品种类、质量，提高销售收入；另一方面，对学生来说，在食品安全、校园安全方面有更多保障；节约了生活成本和时间成本；还可为勤工俭学的学生提供送餐员的工作机会。研究现状近几年，由于互联网的普及和发展，网上订餐得以迅猛发展，一面是由于众多餐饮企业认识到了信息化的重要性，另一方面，餐饮也渗入到各大互联网公司。网上订餐这种生活方式被民众所接受的时，各餐饮企业也在尝试这一新的盈利模式。同时，也涌现了一批把网上订餐服务作为其主要业务的互联网公司。在百度中以“订餐网”作为关键词进行搜索，可以搜索到的网页数据高达300万条，根据查询，国内目前成熟的、具有较大规模的能够满足人们各种需求的网站并不多且这些网站提供的网上订餐服务主要集中在商业和交通发达地区。在国外，网上订餐起步比较早，用户群也比较广。美国家餐饮协会的统计资料显示，早在9年前，使用网上订餐的美国人就占到总人数的13%，其中仅必胜客的网上订餐规模就达到10亿美元[7-8]。而到了2012年，根据国外抽样调查资料显示，使用网上订餐的美国人的这一比例上升到40%，并且随着智能手机的普及，网上订餐的用户数量还在迅速增长。有机构曾经在2010年底做过一项调查发现，在美国，SUBWAY、PaneraBread等快餐店都为消费者提供了网上订餐的业务，并且其网上订餐的营业额占比高达70%，再比如KFC、McDonald等已经拥有比较专业的订餐网站，主要客户群体是写字楼的上班族，每天都会收到来自各大写字楼的很多外卖订单。在国外，应用到餐饮业中的信息技术使得订餐网站的发展非常成熟，人们能够利用信息技术享受网上订餐带来的相比于实体消费更便捷更高效的用餐体验，比如通过点餐网站，消费者可以短时间内进行各餐馆菜单浏览和价格比较，可以查看其它顾客的对于菜品和服务的消费评价，从而选择更适合自己的、性价比更高的。

系统分析1.1可行性分析本项目基于PHP+Vue的Web订餐系统，主要是为了实现网上订餐、下单以及其中的一些流程。目标清晰明确后，就能进行可行性分析了。1.1.1技术可行性基于PHP+Vue的Web订餐系统是一个Web点餐系统，在网页上使用的一个软件，联网是一个必须条件之一，在开发本系统时选择基于前端Vue框架进行开发设计。基于PHP+Vue的Web订餐系统数据库使用MySql，学习起来非常容易并且使用便利。因为学习了数据库的使用还有SQL语言并自学了MySql数据库。在大学期间对软件工程，软件测试也有一定的了解。可以独立进行此次开发。1.1.2操作可行性基于PHP+Vue的Web订餐系统的各种功能在目前都比较常见，市场上已有饿了吗，美团外卖，操作也极为相似并且页面有操作提示，不像一些比较复杂的网站需要进行用户培训。这个方面也能得到极好的用户体验，并且降低了经济成本。总之，本系统具有操作简单、管理方便、前后台交互性好的特点。在操作上与现知名网站相似，省去操作培训的麻烦。因此本系统可以进行开发。1.1.3经济可行性PHP+Vue的Web订餐系统是MVVM模式，出于经济考虑，使用MYSQL数据库对数据进行存储和使用，因为MySQL是开源的。而且对服务器要求不高，购买服务器花的钱少，开发和维护所需的开发人力、财力上耗费不高，而且此系统功能简洁需求清晰，开发周期不长，所以此系统花费较少具有一定的经济可行性。1.1.4法律可行性本系统基于PHP+Vue的Web订餐系统开发时所用到的技术资料都为开源合法的，在开发过程中没有抄袭其他相关系统，所以该系统不会存在侵犯版权的问题。更不会涉及法律问题。综上所述，基于PHP+Vue的Web订餐系统在各个方面都具有很高的可行性，此Web可以开发。1.2性能分析（1）系统的存储性：因为是外卖平台，所以就会在数据库要求上比较多繁琐，信息录入的比较多，而且丰富复杂，这就需要一个强大的数据库来存放更多的数据和保证数据的时时性。（2）系统的易学性：系统设计的应该简单易学的，设计的各种功能应该简单操作，本系统与现已有各大知名购物网站操作相似，不需要学习培训，用户能简单上手。（3）系统的数据要求：数据应该录入准确，需要更新时，数据应该可以及时的修改，数据还应该有独立保存，不能删除数据的时候会连带着把还需要的数据都删除掉。（4）系统稳定性：开发的Web订餐平台运行稳定，运行过程中无界面不清楚、字体模糊等现象。1.3功能分析基于PHP+Vue的Web订餐系统开发主要为了实现需求用户通过Web网络平台可查找食物商家，对想买的食物加入购物车以及最终的购买食物的需求，主要分为两个端，用户端、商家端。（1）用户：若是游客进入本Web订餐平台，他们仅能查看商家信息和食品信息，用户要想实现对想买的食品加入购物车、支付购买等操作，必须进行登录系统，未有账号用户可进入注册界面进行会员注册，一定要注册登录后才可以将商品添加到收藏或者是加入购物车，以及对个人信息的各种操作等是用户登录后才能操作，用例图如图1-1所示：图1-1用户用例图（2）商家模块：主要功能模块包括以下七大部分，用例图如图1-2所示：图1-2管理员用例图1.4数据流程分析WebApp的顶层数据流图如图1-3所示：图1-3系统顶层数据流程图第一层数据流图，它主要体现了用户和管理员共同管理协同操作的模块，也是商品管理到订单的一系列业务逻辑。第一层数据流图如图1-4所示：图1-4第一层数据流图非注册的用户可查询商品信息，无法进行购买操作，要想实现购买功能，必须先注册会员，会员登录后，可进行商品信息的查询，对想买的商品加入购物车，下订单购买。用户对商品的操作处理如图1-5所示：图1-5商品购买操作展开图1.5业务流程分析Web订餐平台业务流程图，如图1-6所示：图1-6系统业务流程图

1.6相关技术1.6.1Vue技术Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了Vue的优点总结：简单易用、灵活渐进式、轻量高效、压索之后20KB大小、虚拟DOM、数据驱动视图、常规的操作方式都是DOM、普通的javascript数据、提高开发效率方便重复使用、简化调试步骤、提升整个项目的可维护性、便于协同开发。1.6.2PHP技术PHP具有多种特性：是一种功能强大的CGI脚本语言，语法是混合了C、Java、Perl和PHP式的新语法，执行网页的速度比CGI、Perl和ASP更快，这是它的第一个突出特点。（2）PHP属于自由软件，源代码完全公开，任何程序员为PHP扩展附加功能非常容易（3）PHP支持多种主流与非主流的数据库，如：DBA、dBase、Informix、mSQL、MySQL、MicrosoftSQLServer、Sybase、ODBC、PostgreSQL、Oracle等。其中，PHP与MySQL是绝佳的组合，可以跨平台运行。（4）PHP提供了类和对象。为了实现面向对象编程，PHP4.0及更高版本提供了新的功能和特性，包括对象重载、引用技术等。（5）对象式的设计、结构化的特性、数据库的处理、网络接口的应用、安全编码机制，PHP几乎涵盖了所有网站的一切功能。1.6.3MVVM结构MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定，这使得ViewModel的状态改变可以自动传递给View，即所谓的数据双向绑定。Vue.js是一个提供了MVVM风格的双向数据绑定的Javascript库，专注于View层。它的核心是MVVM中的VM，也就是ViewModel。ViewModel负责连接View和Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。MVVM模式如图1-7所示：图1-7MVVM结构图1.6.4MYSQL数据库本次开发的基于Web订餐系统使用的数据库是MYSQL数据库，这个数据库是国外微软公司提出来的轻量型数据库。MySQL不仅是一个开源的数据库，而且它还拥有跨平台性，虽然功能未必强大，导致很多人都了解这个数据库的基本应用，在数据库中，总共建立了10几个表，这里面每个表都是相对应的，都各自有各自的联系，数据库意义重大，如果没有数据库的链接，就没办法运行程序，这显然可以看见数据库与程序的重要性，是紧密相连接的。MySQL是一种开放源代码的关系型数据库管理系统（RDBMS），使用最常用的数据库管理语言--结构化查询语言（SQL）进行数据库管理。MySQL是开放源代码的，因此任何人都可以在GeneralPublicLicense的许可下下载并根据个性化的需要对其进行修改。MySQL因为其速度、可靠性和适应性而备受关注。大多数人都认为在不需要事务化处理的情况下，MySQL是管理内容最好的选择。

系统设计2.1系统概要设计Web订餐系统，使用MySql作为数据库，使得程序的跨平台特性大大提高。只要有网，就能随时随地使用。系统工作原理图如图2-1所示：图2-1系统工作原理图2.2系统结构设计系统结构设计，实际上就是将系统需求细化的一个过程，将庞杂的需求细化成小任务，这些小的任务分段完成后，组合在一起形成一个完整的功能。在结构设计过程中，首先对系统进行需求分析，同样也是细化的过程，具体分析每一个功能模块具体应该首先哪些功能，最后将各个模块进行整合，实现系统结构的最终设计。系统结构图反映的是系统中模块的调用关系和层次关系,谁调用谁,有一个先后次序(时序)关系.所以系统结构图既不同于数据流图,也不同于程序流程图.在系统结构图中的有向线段表示调用时程序的控制从调用模块移到被调用模块,并隐含了当调用结束时控制将交回给调用模块。如果一个模块有多个下属模块,这些下属模块的左右位置可能与它们的调用次序有关.例如,在用结构化设计方法依据数据流图建立起来的变换型系统结构图中,主模块的所有下属模块按逻辑输入,中心变换,逻辑输出的次序自左向右一字排开,左右位置不是无关紧要的.系统结构图是对软件系统结构的总体设计的图形显示。在需求分析阶段,已经从系统开发的角度出发,把系统按功能逐次分割成层次结构,使每一部分完成简单的功能且各个部分之间又保持一定的联系,这就是功能设计.在设计阶段,基于这个功能的层次结构把各个部分组合起来成为系统.处理方式设计:确定为实现软件系统的功能需求所必需的算法,评估算法的性能.确定为满足软件系统的性能需求所必需的算法和模块间的控制方式(性能设计).确定外部信号的接收发送形式.Web订餐系统主要分为管理员模块和用户模块两大部分，系统的功能结构设计如图2-2所示：图2-2系统结构图2.3数据库设计一个数据库的设计关系到程序数据存储的准确性和正确性，还有合理性。在开发过程中我是用面向对象的思维来简历数据库，不光把实体类建立成一张表，把关系同样建立成一张表，将关系也看作一个实体，这样数据库的耦合性降低了扩展性提高了。若以后业务需求改变不会因为数据库的改动太大而导致程序修改艰难。数据库设计(DatabaseDesign)是指对于一个给定的应用环境，构造最优的数据库模式，建立数据库及其应用系统，使之能够有效地存储数据，满足各种用户的应用需求（信息要求和处理要求）。在数据库领域内，常常把使用数据库的各类系统统称为数据库应用系统。数据库设计的设计内容包括：需求分析、概念结构设计、逻辑结构设计、物理结构设计、数据库的实施和数据库的运行和维护。一对一设计原则在软件开发过程中，需要遵循一对一关系设计原则进而开展数据维护工作，通过利用此原则能够尽量减少维数据库护问题的出现，保证数据维护工作顺利开展同时降低维护工作难度。在此过程中，尽量避免数据大且数据杂现象出现，否则既会影响到软件开发进度，又会增加工作难度，给其产品质量带来影响。所以，设计工作人员必须重视起此问题。同时充分了解实体间存在的必然联系，进而实现信息数据分散的目标，并在此基础上提高整体工作人员的工作效率，提高软件应用程序可靠性、科学性、安全性以及自身性能。独特命名原则独特命名原则的应用是为了减少在数据库设计过程中出现重复命名和规范命名现象出现。通过应用此原则能够减少数据冗杂，维护数据一致性，保持各关键词之间存在必然相对应联系。独特命名原则能够锻炼工作人员对大小写字母熟练操作能力，有利于规范化后台代码工作的开展。双向使用原则双向使用原则包括：事务使用原则和索引功能原则。首先，双向使用原则是在逻辑工作单元模式基础上实现其表现形式的，不仅给非事务性单元操作工作提供基础保障，也保证其能够及时更新、获取数据资源。索引功能原则的有效运用，使其获取更多属性列数据信息，并且对其做到灵活排序。目前，软件市场常见的索引模式有：多行检索聚簇索引和单行检索非聚簇索引。有利于资源节约不少计算机软件设计时过于重视计算机软件的功能模块，却没有综合、全面地分析数据库设计，这往往会导致软件在实际运行过程中频频出现性能低下以及各类故障，甚至还会引发漏电、系统崩溃等一系列安全隐患。因此，对计算机软件数据库设计加以重视不仅可减少软件后期的维修，达到节约人力与物力的目的，同时还有利于软件功能的高效发挥。有利于软件运行速度的提高高水平的数据库设计可满足不同计算机软件系统对于运行速度的需求，而且还可充分发挥并实现系统功能。计算机软件性能提高后，系统发出的运行指令在为用户提供信息时也将更加快速有效，软件运行速度自然得以提高。此外，具有扩展性的数据库设计可帮助用户节约操作软件的时间[1]。在数据库设计环节，利用其信息存储功能可通过清楚一些不必要的数据库来提高系统的查询效率。除上述功能外，软件设计师还可依据软件功能需求进行有效的数据库设计，进而保障数据库有效发挥自身在计算机软件运行中的作用。有利于软件故障的减少在进行数据库设计时，有些设计师的设计步骤过于复杂，也没有对软件本身进行有效分析，这必然会导致计算机软件无法有效发挥自身功能。另一方面，有效的设计日志信息的缺乏还会导致软件在运行过程中出现一系列故障，用户在修改一些错误的操作时必然也会难度较大。因此，加强数据库设计可有效减少软件故障的发生几率，推动计算机软件功能的实现。2.3.1数据库实体（E-R图）使用E-R图可以完整地展示出实体类与字段之间的关系。E-R图中的三个最为重要的元素就是实体、属性、关系，E-R图即由这三点组成。E-R图是最能体系各个实体之间关系的，包括每个实体都包括哪些属性，搞清楚这些我们设计数据库表的时候才能够不遗忘，才能完整的设计[5]。下面是该系统所使用的几个E-R图。（1）管理员E-R如图2-3所示：图2-3管理员实体E-R图（2）类别信息E-R如图2-4所示：图2-4类别信息实体E-R图（3）商品信息E-R如图2-5所示：图2-5商品信息实体E-R图（4）订单信息E-R如图2-6所示：图2-6订单信息实体E-R图（5）用户信息E-R如图2-7所示：图2-7用户信息实体E-R图2.3.2数据库表设计本基于Web订餐系统后台数据库，本系统使用的是轻量级关系型数据库MYSQL作为信息存储工具，下面是该数据库中的各个表的详细介绍。表2-1t_admin管理员信息表字段名数据类型是否允许空字段含义The_userIdint(11)NOTNULL编号The_userNamevarchar(255)NULL用户名The_userPwvarchar(255)NULL密码表2-2t_catelog类别信息表字段名数据类型是否允许空字段含义The_catelog_idint(11)NOTNULL编号The_catelog_namevarchar(255)NULL名称The_catelog_miaoshuTextNULL描述The_catelog_delvarchar(450)NULL删除表2-3t_goods商品信息表字段名数据类型主键/允许空字段含义The_goods_idint(11)NOTNULL编号The_goods_namevarchar(1000)NULL名称The_goods_miaoshutextNULL描述The_goods_picvarchar(255)NULL图片The_goods_shichangjiaint(11)NULL市场价The_goods_tejiaint(11)NULL特价The_goods_isnottejiavarchar(255)NULL是否特价The_goods_isnottuijianvarchar(255)NULL推荐The_goods_catelog_idint(11)NULL类别The_goods_delvarchar(255)NULL删除The_kucunint(11)NULL库存表2-4t_order订单信息表字段名数据类型主键/允许空字段含义The_order_idint(11)NOTNULL编号The_order_bianhaovarchar(255)NULL订单编号The_order_datevarchar(255)NULL下单日期The_order_zhuangtaivarchar(255)NULL状态The_order_jineint(11)NULL金额The_order_songhuodizhivarchar(255)NULL送货地址order_fukuangfangshivarchar(255)NULL付款方式order_user_idint(11)NULL用户关联sjfkint(11)NULL实际付款statevarchar(20)NULL状态表2-5t_user用户信息表字段名数据类型主键/允许空字段含义The_user_idint(11)NOTNULL用户编号The_user_namevarchar(255)NULL用户名The_user_pwvarchar(255)NULL用户密码The_user_realnamevarchar(255)NULL用户姓名The_user_addressvarchar(255)NULL用户地址The_user_telvarchar(255)NULL用户电话The_user_emailvarchar(255)NULL用户邮箱表2-6pinglun评论信息表字段名数据类型主键/允许空字段含义idint(11)NOTNULL编号gidint(11)NULL商品编号plnrvarchar(500)NULL评论内容plrvarchar(50)NULL评论人plsjvarchar(50)NULL评论时间uidvarchar(50)NULL用户编号

系统实现3.1用户功能模块的实现核心代码块：<script>exportdefault{name:"Home",data(){return{selectedId:0,items:[{label:'热门'},{label:'晚餐'},{label:'蛋糕'},{label:'家常菜'},{label:'鲜花'},{label:'食品'},{label:'汉堡'}],//二级路由的路径subRouteUrl:['/home/hot','/home/dress','/home/box','/home/mbaby','/home/general','/home/food','/home/shirt','/home/man','/home/ele']}},methods:{handleChange(item,index){//console.log(item,index);this.$router.replace(this.subRouteUrl[index]);}}}</script>用户进入本系统，可查看首页、搜索类别、推荐以及购物车等。前台主界面展示如图3-1所示：图3-1系统前台主界面图3.1.1用户注册界面核心代码块：<template><divclass="login-container"><!--登录面板内容部分--><divclass="login-inner"><!--面板头部--><divclass="login-header"><divclass="login-logo"><imgsrc="../../components/mescroll/mescroll-empty.png"alt=""width="250"></div><!--面板标题--><divclass="login-header-title"><ahref="javascript:;":class="{current:loginMode}"@click="dealLoginMode(true)">短信登录</a><ahref="javascript:;":class="{current:!loginMode}"@click="dealLoginMode(false)">密码登录</a></div></div><!--面板表单部分--><divclass="login-content"><form><!--手机验证码登录部分--><div:class="{current:loginMode}"><sectionclass="login-message"><inputtype="tel"maxlength="11"placeholder="手机号"v-model="phone"><buttonclass="get-verification"v-if="!countDown":class="{phone_right:phoneRight}"@click.prevent="getVerifyCode()">获取验证码</button><buttonv-elsedisabled="disabled"class="get-verification">已发送({{countDown}}s)</button></section><sectionclass="login-verification"><inputtype="tel"maxlength="8"placeholder="验证码"v-model="code"></section><sectionclass="login-hint">温馨提示：未注册点餐的手机号，登录时将自动注册，且代表已同意<ahref="javascript:;">服务协议与隐私政策</a></section></div><!--账号登录部分--><div:class="{current:!loginMode}"><section><sectionclass="login-message"><inputtype="tel"maxlength="11"placeholder="用户名"v-model="user_name"></section><sectionclass="login-verification"><inputtype="password"maxlength="20"placeholder="密码"v-if="pwdMode"v-model="pwd"><inputtype="text"maxlength="20"placeholder="密码"v-elsev-model="pwd"><divclass="switch-show"><img@click.prevent="dealPwdMode(false)":class="{on:pwdMode}"src="./images/hide_pwd.png"alt=""width="20"><img@click.prevent="dealPwdMode(true)":class="{on:!pwdMode}"src="./images/show_pwd.png"alt=""width="20"></div></section><sectionclass="login-message"><inputtype="text"maxlength="4"placeholder="验证码"v-model="captcha"><imgclass="get-verification"src="http://localhost:1688/api/captcha"alt="captcha"@click.prevent="getCaptcha()"ref="captcha"></section></section></div><buttonclass="login-submit"@click.prevent="login()">登录</button></form><buttonclass="login-back"@click="$router.back()">返回</button></div></div></div></template>后端核心逻辑代码块展示：/***获取短信验证码*/router.get('/api/send_code',(req,res)=>{ //1.获取手机号 varphone=req.query.phone; //2.随机产生验证码 varcode=sms_util.randomCode(6); //3.成功 setTimeout(()=>{ users[phone]=code; console.log(users); res.send({ success_code:200, message:'验证码获取成功!', code }); },2000);});/***手机验证码登录*/router.post('/api/login_code',(req,res)=>{ //1.获取数据 constphone=req.body.phone; constcode=req.body.code; //2.判断验证码是否正确 if(users[phone]!==code){ returnres.json({ error_code:0, message:'手机或验证码不正确!' }) } //3.查询和操作数据 deleteusers[phone]; User.findOne({ phone },(err,user)=>{ if(user){//用户存在 req.session.userid=user._id; res.send({ success_code:200, data:{ _id:user._id, name:, phone:user.phone } }); }else{//用户不存在 varuserModel=newUser({ phone }); userModel.save(function(err,user){ req.session.userid=user._id; res.send({ success_code:200, data:{ _id:user._id, name:, phone:user.phone } }); }); } });});/*根据session中的userid,去查询对应的用户返回给客户端*/constfilter={ 'pwd':0, 'l_time':0, '__v':0};router.get('/api/userinfo',(req,res)=>{ //1.取出userId constuserId=req.session.userid; //2.查询 User.findOne({ _id:userId },filter,(err,user)=>{ if(!user){ //清除上一次的userId deletereq.session.userid; res.send({ err_code:0, message:'请先登录' }); }else{ res.send({ success_code:200, data:user }); } })});用户注册界面展示如图3-2所示：图3-2用户注册界面图3.1.2用户登录界面核心代码块：<script>import{MessageBox}from'mint-ui';import{mapState,mapActions}from'vuex';importSelectLoginfrom'./../Login/SelectLogin';exportdefault{name:"Me",computed:{...mapState(['userInfo'])},components:{SelectLogin},filters:{phoneFormat(phone){//1.字符串转成数组letphoneArr=[...phone];console.log(phoneArr);//2.遍历letstr='';phoneArr.forEach((item,index)=>{if(index===3||index===4||index===5||index===6){str+='*';}else{str+=item;}});//3.返回结果returnstr;}},methods:{...mapActions(['logOut']),dealLogout(){MessageBox.confirm('您确定退出登录吗?').then(action=>{//console.log(action);if(action==='confirm'){this.logOut();//回到主界面this.$router.replace('/home');}});}}}</script>后端核心逻辑代码块展示：/******************个人中心****************//***获取随机图形验证码*/router.get('/api/captcha',(req,res)=>{ //1.生成随机的验证码 varcaptcha=svgCaptcha.create({ color:true, noise:2, size:4,//验证码长度 ignoreChars:'0o1i',//验证码字符中排除0o1i }); //2.保存验证码到session req.session.captcha=captcha.text.toLocaleLowerCase(); console.log(req.session); //3.返回给客户端 res.type('svg'); res.status(200).send(captcha.data);});/***用户名和密码登录*/router.post('/api/login_pwd',(req,res)=>{ //1.获取数据 varuser_name=; varuser_pwd=md5(req.body.pwd); varcaptcha=req.body.captcha.toLocaleLowerCase(); console.log('/api/login_pwd',name,pwd,captcha,req.session); //2.合法验证 if(captcha!==req.session.captcha){ returnres.send({ err_code:0, message:'验证码不正确!' }); } //3.从session中删除验证码 deletereq.session.captcha; //4.查询数据库 User.findOne({ name },(err,user)=>{ if(user){//4.1用户已经注册 if(user.pwd!==pwd){//密码错误 res.send({ err_code:0, message:'用户名或密码不正确!' }); }else{ req.session.userid=user._id; res.send({ success_code:200, data:{ _id:user._id, name:, phone:user.phone } }); } }else{//4.2用户没有注册 varuserModel=newUser({ name, pwd }); userModel.save(function(err,user){ req.session.userid=user._id; res.send({ success_code:200, data:{ _id:user._id, name: } }); }); } });});用户不登录系统的话只能浏览商品，登陆后可进行商品添加购物车、收藏以及个人信息管理等功能，系统会判断输入信息，账号信息正确则登录成功，反之登录失败，用户登录界面展示如图3-3所示：图3-3用户登录界面图3.1.3商品详情界面核心代码块：<script>import{mapState}from'vuex';importShopListfrom'./../../components/ShopList/ShopList';importSelectLoginfrom'./../../pages/Login/SelectLogin';importScrollfrom'./../../components/mescroll/Scroll';importBScrollfrom'better-scroll'exportdefault{name:"Recommend",computed:{...mapState(['recshoplist','userInfo'])},components:{ShopList,SelectLogin,Scroll},methods:{dealWithCellBtnClick(goods_id){console.log(goods_id);},upCallback(page){constSIZE=10;this.$store.dispatch('reqRecShopList',{'app_name':'rectab_sim_gyl','offset':(page.num-1)*SIZE,'count':SIZE,'scb':(result)=>{console.log('成功');this.$refs.mescroll.endSuccess(result.length);},'ecb':(err)=>{console.log('失败');this.$refs.mescroll.endErr();}});}}}</script>后端核心逻辑代码块展示：/*获取推荐商品列表*/router.get('/api/recshoplist',(req,res,)=>{ setTimeout(function(){ constdata=require('./../data/recommend'); res.json({success_code:200,message:data}); },10) 用户可点击喜欢商品进入商品详情界面，在详情界面可输入添加数量点击加入购物车也可以做收藏操作，商品详情界面展示如图3-4所示：图3-4商品详情界面图3.1.4购物车界面核心代码块：<!--中间的列表--><mainclass="jd_shopCart_list"><section><divclass="shopCart_list_con"v-for="(goods,index)incartGoods":key="index"><divclass="list_con_left"><ahref="javascript:;"class="cart_check_box":checked="goods.checked"@click.stop="singerGoodsSelected(goods)"></a></div><divclass="list_con_right"><divclass="shop_img"><img:src="goods.thumb_url"alt=""></div><divclass="shop_con"><ahref="">{{goods.goods_name}}</a><pclass="shop_price">{{goods.price/100|moneyFormat}}</p><divclass="shop_deal"><divclass="shop_deal_left"><span@click.stop="updateGoodsCount(goods,false)">-</span><inputdisabled="disabled"type="tel"value="1"v-model="goods.buy_count"><span@click.stop="updateGoodsCount(goods,true)">+</span></div><divclass="shop_deal_right"@click.stop="clickTrash(goods)"><span></span><span></span></div></div></div></div>可查看购物车内商品信息，也可进行提交订单等操作，购物车界面展示如图3-5所示：图3-5界面图3.1.5搜索界面核心代码块：<template><divclass="search"><!--搜索导航--><search-nav:showSearchPanel="showSearchPanel"/><divclass="shop"><!--左边--><divclass="menu-wrapper"><ul><liclass="menu-item"v-for="(goods,index)insearchgoods":key="index":class="{current:currentIndex===index}"@click="clickLeftLi(index)"ref="menuList"><span>{{}}</span></li></ul></div><!--右边--><divclass="shop-wrapper"><ul><liclass="shops-li"v-for="(goods,index)insearchgoods":key="index"><!--头部--><divclass="shops-title"><h4>{{}}</h4><ahref="">查看更多></a></div><!--身体--><ulclass="shops-items"><liv-for="(item,index)ingoods.items":key="index"><imgv-lazy="item.icon"alt=""><span>{{item.title}}</span></li></ul></li></ul></div></div><!--显示面板--><search-panelv-if="isShow":showSearchPanel="showSearchPanel"/></div></template>可搜索查看商品信息，搜索界面展示如图3-6所示：图3-6搜索界面图3.1.6个人资料界面核心代码块：<template><divclass="user-detail"><divclass="user-detail-top">基本信息</div><divclass="user-detail-group"><divclass="user-icon"><span>头像</span><imgsrc="../../../build/logo.png"alt=""/></div><divclass="user-item"><span>手机</span><span>{{user_phone}}</span></div><divclass="user-item"><span>昵称</span><span><inputtype="text"v-model="user_name"></span></div><divclass="user-item"@click="sheetVisible=true"><span>性别</span><span>{{user_sex}}</span></div><divclass="user-item"><span>常住地</span><span><inputtype="text"v-model="user_address"></span></div><divclass="user-item"@click="$refs.picker.open()"><span>生日</span><span>{{user_birthday}}</span></div><divclass="user-item"><span>个性签名</span><span><inputtype="text"v-model="user_sign"></span></div><button@click="saveUserInfo">修改</button></div><!--选择性别--><mt-actionsheet:actions="actions"v-model="sheetVisible"></mt-actionsheet><!--选择出生年月--><mt-datetime-pickerref="picker"type="date"year-format="{value}年"month-format="{value}月"date-format="{value}日"@confirm="handleBirthday"></mt-datetime-picker></div></template>可查看个人详情信息，界面展示如图3-7所示：图3-7个人信息界面图3.1.7设置界面核心代码块：<template><divclass="me-setting"><div><me-common-cellleft-icon="itlike-2"leftTitle="免密码支付":clickCell="dealCellclick"></me-common-cell><me-common-cellleft-icon="itlike-3"leftTitle="免拼单设置":clickCell="dealCellclick"></me-common-cell><me-common-cellleft-icon="itlike-1"leftTitle="消息接受设置"rightTitle="接受"rightTitleColor="red"></me-common-cell></div><divstyle="margin-top:10px;"><me-common-cellleft-icon="itlike-5"leftTitle="常见问题":clickCell="dealCellclick"></me-common-cell><me-common-cellleft-icon="itlike-4"leftTitle="意见反馈":clickCell="dealCellclick"></me-common-cell></div><divstyle="margin-top:10px;"><me-common-cellleft-icon="itlike-1"leftTitle="商家入驻":clickCell="dealCellclick"></me-common-cell></div><divclass="logout"@click="dealLogout">退出登陆</div></div></template>可修改设置信息，也可进行退出操作，设置界面展示如图3-8所示：图3-8界面图系统测试4.1测试定义测试的定义：找到错误快速解决，使用户得到完美的用户体验。测试的任务与目的可以表现为：快速的查找与发现软件问题所在，可以及时的查找出程序中隐藏的错误。在程序开发中大大的减少了开发时间。纠错：纠错：说白了就是解决问题的过程。纠错就是得到测试结果后的处理方式，及时的纠错可以避免对用户造成损失和一些不好的体验。每一次系统的测试是要准备好若干个测试数据。不断的进行数据的录入来观察系统是否发生预期以外的事情[6]。测试与纠错信息流程如图4-1所示：图4-1测试与纠错信息流程图4.2测试目的测试的目的就是检测基于Web网上订餐系统是否均有漏洞，能不能在用户进行操作的时候得到一个完美的操作体验，给予一个用户完美的体验，不可以在用户操作的时候产生bug。流程是软件测试后就是项目上线，所以软件测试对开发者而言是一个开发成果的检测，软件测试的目的就是在已经规定好的条件下，对软件进行测试，通过测试去发现软件中程序的错误或者是BUG，这样可以让程序员衡量软件的质量，然后对软件是否满足最初的要求或者初衷做出一个正确的判断。对用户来说一个好的软件测试是对用户一种负责任的体现。从单独一个功能到所有功能相互整合在进行测试，可以是软件达到几近完美的程度。软件测试可以快速的定位到问题所在位置，测试可以避免开发人员长时间的对软件问题的定位[7]。4.3测试方法测试方法无非就只有两种（黑盒测试、白盒测试），我将系统当做一个黑盒子。把自己当做一个用户来对系统进行操作，不管系统功能的逻辑实现是怎么样的。白盒测试就得以此系统作者的身份来完成白盒测试，了解系统功能的逻辑实现，从逻辑方面对系统进行检查和测试[8]。4.4测试用例（1）用户、管理员登录测试，测试用例如下表4-1所示：表4-1用户、管理员登录测试用例编号SC001用例名称验证用户、管理员输错密码能否正常登录测试项账号、密码步骤打开浏览器，输入链接进入本系统输入账号：admin输入密码：12345点击登录期望结果登录失败，进入不了后台主界面。用户进入不了个人信息等页面。实际结果登录失败，用户进入不了个人信息、购物车。（2）用户、管理员登出测试，测试用例如下表4-2所示：表4-2用户、管理员登出操作测试用例编号SC002用例名称验证用户、管理员登出操作后页面跳转以及登出后可以进行的操作测试项退出登录按钮步骤用户登录、管理员登录找到退出登录按钮用户点击退出登录按钮、管理员点击退出登录按钮用户点击个人中心期望结果第三步：用户界面跳转到商城主页、管理员界面跳回到登录页面。第四步：用户进入不了个人中心，并提示请先登录实际结果第三步：用户界面跳转到商城主页、管理员界面跳回到登录页面。第四步：用户进入不了个人中心，并提示请先登录（3）商家端商品添加、修改测试，测试用例如下表4-3所示：表4-3商家端商品添加、修改测试用例编号SC003用例名称商品添加、修改后前台后台的数据显示结果步骤管理员账号登录点击右侧导航栏商品管理点击添加（修改）按钮，弹出商品添加页面填好（修改）商品信息后点击保存后台查看商品信息是否完整前台查看商品是否显示、能否购买期望结果第五步：后台检查商品信息与所填信息一致第六步：前台商品信息无误并且可以购买实际结果第五步：后台检查商品信息与所填信息一致第六步：前台商品信息无误并且可以购买（4）商家端订单处理测试，测试用例如下表4-4所示：表4-4商家端订单处理测试用例编号SC005用例名称订单管理功能测试步骤随便选择几样商品添加购物车点击提交订单管理员在后端查看订单详情管理员点击发货操作期望结果步骤三：订单详情与用户端提交数据一致步骤四：发货后订单状态变为已发货实际结果步骤三：订单详情与用户端提交数据一致步骤四：发货后订单状态变为已发货（5）统计测试，测试用例如下表4-5所示：表4-5统计测试用例编号SC004用例名称针对商品售出后统计结果是否与售出结果一致步骤用户选择几样商品点击添加购物车填写收货地址、收货人姓名电话点击提交订单管理员后端查看订单详情管理员点击发货操作查看统计数据是否与与购买商品对的上期望结果购买商品数量、金额、详细与统计一致实际结果购买商品数量、金额、详细与统计一致4.5测试分析本基于Web订餐系统设计可以完成线上点餐的一系列功能，已经具有了上线项目的基本雏形。页面效果也实现的比较不错，在错误信息的处理上也能达到一个较好的用户体验。但是，尽管在编写时完全感觉不到有什么问题，但是一经过测试所有系统的缺陷一下都暴露出来了，所以尤其是用户体验上，程序还需要不断的优化，卡顿情况时有发生，代码写的非常乱，可读性并不是很好。这都是因为对技术的不熟练造成的，有的代码块性能还是没有达到最佳性能。对于一些技术上的掌握还不是很透彻，所以需要我不断的后期努力，继续学习，后期继续来优化我这个项目。所以经过这次毕业设计我更应该努力的学习，从而减轻这种不好的现象。总的来说，此次项目通过测试。

研究或成果与社会、环境、文化、经济、环保等关系本次毕业设计成果不仅减少了商家成本。减小了交易的成本以及管理运营的成本，商家只需要在本平台上发布商品。然后顾客对喜欢的商品进行购买，在订单确认后即可发货交易。在商品、食品交易的过程中不仅减少了中间的交易环节，没有中间商赚取差价。对商家来说商家能按照商品订单进行商品的生产，不仅能给商家带来竞争优势，还能减少商品的堆积。增加了店铺流量，在店铺方面也可以大大减少成本，只需要一台电脑和一个仓库就能进行商品的销售，免去了店铺的租金。对卖家来说，商品够多能够随时随地的看商品，对