基于微信小程序点餐系统的设计与实现-周政-毕业设计

i4.3系统设计目标FastEating系统是基于微信平台开发的一款外卖小程序，它的出现是为了避免了柜面上繁琐的点餐、付款和排队环节，使消费者可以更直观、便捷地进行点餐和付款，相比传统的就餐模式更加省时省力。4.4系统功能概要设计FastEating项目是用户通过自己微信账号授权登录小程序，通过浏览页面显示的商品，对感兴趣的商品加入购物车后进行商品结算从而完成前台界面下单的过程整个系统的设计思维导图如下：图4-1FastEating小程序设计图4.4.1系统模块概述看完了整个系统的流程图，想必这个网站的框架大致就明白了。下面是介绍一下整个系统的具体设计：系统分为菜单、订单、卡包、联系商家四大核心模块，各大模块都对应着线下实体店购买食品的操作，具体设计情况如下：菜单模块：设有菜单分类，每个菜品归属于某个特定的商品种类；订单模块：获取用户选择的菜品及数量；用户模块：管理用户账号，设置默认的地址、联系电话等信息；卡包模块：管理后台管理员账号、个人信息；本系统通过用户进行微信授权登录系统->选择自己喜欢的商品->确认信息，下单->商家收到数据后进行配送。通过这一系列的简单操作，完成了线上购买食物的操作，给用户和商户都产生了不可估计的效益。4.4.2系统的架构设计FastEating系统选用基于有赞商城的开源小程序框架VantWeapp。VantWeapp是Vant的小程序版本，Vant和VantWeapp它们是基于相同的UI风格，同一套视觉规范，提供的一致的API接口能让开发者基于框架快速搭建属于自己的一类商城类的小程序应用。具体架构看图：编辑器显示的架构图：图4-5 小程序在开发工具里的架构情况 上方的图左侧栏是属于整个项目的目录结构，每个页面对应一个文件夹，每个页面有4部分数据组成。其中wxml文件是页面结构文件，用来搭建页面的框架；json文件是页面的数据文件，用来存放页面显示的数据；wxss文件是页面的样式文件，用来渲染页面的界面显示；js文件是用来获取用户的交互从而操作json文件中的数据。Cloudfunction文件夹是使用微信的云函数而引入的一个文件。思维导图整理出的架构图：图4-6 项目文件架构图（思维导图）Npm模块是通过开发者工具中的构建npm,使用npm模块选项即可引入的组件。它是用来管理第三方包软件的工具；Pages文件夹里面的每一个文件夹对应小程序的每一个页面，每个文件夹里面又都包含着4个页面构建的js、wxss、wxml、json文件；通过配置json文件来引入需要的组件，引入之后可以直接在wxml里使用相应的组件；使用vant-weapp框架之后，主要的功能就是如何设置页面风格样式，组件是有自带样式的，但是我们可以通过自定义样式来覆盖掉原始样式。4.5核心功能模块介绍4.5.1菜单列表模块菜单列表模块包含小程序授权后进入的首页就是菜单列表信息页，列表上方是菜品分类的导航栏，左右滑动来切换分类类别。列表显示菜品名、单价、菜品原料及套餐信息。有两个按钮，一个新增商品，多次点击数量增加；一个是减少商品，数量减少到0将删除选中的商品。4.5.2提交订单模块提交订单模块主要是顾客选择的商品汇总页，该模块用来显示顾客购买的商品信息列表，可以修改外卖配送地、配送时间及支付方式，是否需要餐具，及优惠券的使用等，甚至可以给商家备注一些额外的信息。4.5.3订单信息模块针对前台用户下单的商品的一个订单汇总列表，该模块还针对订单信息增加了导出汇总数据功能，可以支持导出Excel文件和CSV文件，CSV文件兼容性更好，能弥补Excel文件导出有可能乱码的情况。4.5.4订单模块 订单模块是显示用户下单的历史数据。订单是否支付成功，何时下的单以及配送的信息等。4.5.5卡包模块卡包模块主要是显示用户拥有的优惠券。4.5.6联系商家模块联系商家模块主要是针对一些特殊情况，需要联系商户，显示的一些商户地址、联系电话等信息。第5章系统的设计与实现5.1网站界面介绍FastEating系统的界面都是本着简洁大方的风格进行设计的。前端界面主打黑白色调，给人以干净、大方的感受，后端主要走黑白灰的简洁工作风路线。前后台在色彩上的选择都是以近似色的色阶进行选取，不会给人太突兀的感觉，整个系统使用下来不会有太大的视觉疲劳的感受[8]。该系统已经设计完毕，所有的功能都能正常使用，下面用一些系统的界面截图进行介绍。5.1.1菜单列表页 图5-1菜单列表页菜单列表页显示商户上架的菜品信息，列出有菜品制作的材料、单价及加入购物车按钮。5.1.2下单页图5-2下单页下单页，显示用户挑选下单的商品列表，商品对应的总价、商品材料及可以选择送货地址、备注一些口味相关的信息及是否需要餐具等信息。5.1.3订单历史页图5-1菜单列表页图5-3订单历史页订单历史页显示用户下单过得记录。5.1.4卡包详情页图5-4卡包页卡包页显示用户所拥有的优惠券信息。5.1.5联系商家页图5-5联系商家页该页面的设计主要是为了顾客能快速找到商户的信息，有问题能及时与商户进行沟通。第6章系统测试6.1测试目的一个系统要正式发布上线，首先得经过一系列的测试，才能给用户使用，测试的目的必须确保系统的整体功能正常使用；确保整个的系统流程能走通同时也能达到期望的结果；作为一个商城网站还得确保系统安全性。通过测试，不断完善系统，在功能都实现的基础上，不断提升用户体验。6.2测试方法 软件测试是人为的使用或通过脚本控制的手段来执行或测量某个程序的过程，它是用来检测软件是否满足设计的需求目标或检测程序的反应与预期设想的结果与现实中具体使用的结果之间的差别。

根据分类的不同，测试方法可以分为很多种，每种方法的分类也各异，从是否关心软件内部结构和具体实现的角度来划分的话，测试方法可以分为白盒测试和黑盒测试。白盒测试方法主要通过检査代码法、分析静态结构法、静态质量度量法、逻辑覆盖法、基本路径测试法、域测试、符号测试、路径覆盖和程序变异，黑盒测试方法主要包括等价类划分法、边界值分析法、错误推测法、因果图法、判定表驱动法、正交试验设计法、功能图法、场景法等。[9]6.3测试原则木桶原理：我们在测试软件应用的过程中，就算遇到再小的问题，也不可得过且过，应该正视每一个问题，不然系统有可能会因这个小问题而产生不可估量的后果。Bug的80-20原则：一般情况下，在分析、设计、实现系统的过程中能够发现和避免80%的Bug，而专门的系统测试过程中又能找出其余Bug中的80%，最后的5%的Bug可能只有在用户的大范围、长时间使用后才会显现出来，因为测试只能够保证尽可能多地发现错误，无法保证能够发现所有的错误。[10]6.4功能测试 由于微信开发者工具能模拟我们的真机进行调试，所以我是通过使用微信开发者工具来对我们开发的微信小程序进行调试的。甚至还可以通过刷描小程序生成的二维码直接在自己的手机上体验小程序。图6-1 功能测试效果图-1通过微信开发者工具点击真机调试，生成一个二维码，扫码后手机就能访问小程序，访问的请求接口会在开发者工具真机调试页面反馈接口信息。图6-2 功能测试效果图-2手机操作页面也会有相应的数据，可以设置打开调试面板，设置之后也可以直接在手机页面看到请求接口的数据。图6-3 功能测试效果图-3图6-4 功能测试效果图-4

第7章总结与反思经过一段时间的开发这个系统，该系统已经基本达到原定的目标，但是总体上还是存在很多问题需要改善的，比如整个系统的UI界面设计上还是缺少一些元素，因为自己不会设计需要的一些小icon，使得最终的没有达到自己想要的效果；其次数据库使用的是微信云数据库，数据库管理上面跟独立的数据库管理系统还是存在差别的；最后还有的模块的流程也还可以更顺畅一些，但是因为能力有限，只能尽量去不断完善这个系统。通过这段时间的学习，我收益颇多。在项目开发之前，设计思维导图的过程中，感觉整个系统的最终完成不会耗时太长，没想到后面的功能会比一开始的要复杂一些，整个网站的流程设计也是经过很多次比较大的调整。在这过程中，我也深刻的体会到一个靠谱的流程设计的重要性，因为后期返工会更耗时。前端的界面也更换过3种风格，最后确定了这一套。还有就是微信小程序开发的认识和具体的运用，发现小程序虽然没有网站庞大，但是要想制作出一个安全受欢迎的小程序还是有很多细致的地方需要加强的，该小程序的后台是使用云开发进行管理，使用者很受限制。再者就是对于UI设计方面，虽然不是专业上的，但是基本的界面设计的知识与审美我还是很欠缺的，之后应该要去学一些美工常识，多了解认识页面的构造。FastEating系统虽然大致流程走通了，想要的基本功能也都实现了，但是我之后还是会通过学习相关知识来不断改善它，争取能让使用的用户体验感更好。参考文献邱世华.Linux操作系统之奥秘.北京：电子工业出版社，2008.郭兵,熊光泽,陈宇.嵌入式应用软件开发环境的构造[J].计算机应用,2000,020(007):7.JavaScript资源

．Mozilla官网．2018-6-20[引用日期2020-04-12]社大鹏《RedhatLinux因特网服务器》中国水利水电出版社2004.2.岳浩《Linux操作系统教程》机械工业出版社2005.4.陈会安.JavaScript基础与实例教程[M].北京：中国电力出版社，2007.郑人杰，马素霞，麻志毅著.软件工程.北京：人民邮电出版社,2009.11.ADocumentEngineonaDBCluster.TorstenGrabs,KlemensBohm,Hans-JorgSchek.2005.ChallengerJRH,DantzigPM,DiasDM,etal.Methodandsystemforcachingcustomizedinformation[J].2004.张涛主编；张涛，马春燕，郑炜，杨帆，王海鹏，成静编．软件技术基础实验教程：西北工业大学出版社，2015.01：第111页

致谢在完成毕业设计之际，我首先要感谢父母四年来对于我的学业，无论是经济上还是精神上，都在默默的支持我、鼓励我，才能让我有机会顺利完成学业。同时也感谢计算机学院的老师们多年来对我的培养与帮助。感谢室友们和同学的陪伴与鼓励。感谢我的毕业设计导师张强老师，以及其他科任老师的指导，感谢老师这一段时间一直跟进我毕业设计的情况，不断的悉心指导与督促。最后能按时完成我的毕业设计，老师的帮助我会铭记在心的，再次感谢张强老师，您辛苦啦！

HYPERLINK电脑快捷知识大全编辑本段一、常见用法F1显示当前程序或者windows的帮助内容。F2当你选中一个文件的话，这意味着“重命名”F3当你在桌面上的时候是打开“查找：所有文件”对话框F10或ALT激活当前程序的菜单栏windows键或CTRL+ESC打开开始菜单CTRL+ALT+DELETE在win9x中打开关闭程序对话框DELETE删除被选择的选择项目，如果是文件，将被放入回收站SHIFT+DELETE删除被选择的选择项目，如果是文件，将被直接删除而不是放入回收站CTRL+N新建一个新的文件CTRL+O打开“打开文件”对话框CTRL+P打开“打印”对话框CTRL+S保存当前操作的文件CTRL+X剪切被选择的项目到剪贴板CTRL+INSERT或CTRL+C复制被选择的项目到剪贴板SHIFT+INSERT或CTRL+V粘贴剪贴板中的内容到当前位置ALT+BACKSPACE或CTRL+Z撤销上一步的操作ALT+SHIFT+BACKSPACE重做上一步被撤销的操作Windows键+L锁屏键Windows键+M最小化所有被打开的窗口。Windows键+SHIFT+M重新将恢复上一项操作前窗口的大小和位置Windows键+E打开资源管理器Windows键+F打开“查找：所有文件”对话框Windows键+R打开“运行”对话框Windows键+BREAK打开“系统属性”对话框Windows键+CTRL+F打开“查找：计算机”对话框SHIFT+F10或鼠标右击打开当前活动项目的快捷菜单SHIFT在放入CD的时候按下不放，可以跳过自动播放CD。在打开word的时候按下不放，可以跳过自启动的宏ALT+F4关闭当前应用程序ALT+SPACEBAR打开程序最左上角的菜单ALT+TAB切换当前程序ALT+ESC切换当前程序ALT+ENTER将windows下运行的MSDOS窗口在窗口和全屏幕状态间切换PRINTSCREEN将当前屏幕以图象方式拷贝到剪贴板ALT+PRINTSCREEN将当前活动程序窗口以图象方式拷贝到剪贴板CTRL+F4关闭当前应用程序中的当前文本（如word中）CTRL+F6切换到当前应用程序中的下一个文本（加shift可以跳到前一个窗口）在IE中：ALT+RIGHTARROW显示前一页（前进键）ALT+LEFTARROW显示后一页（后退键）CTRL+TAB在页面上的各框架中切换（加shift反向）F5刷新CTRL+F5强行刷新目的快捷键激活程序中的菜单栏F10执行菜单上相应的命令ALT+菜单上带下划线的字母关闭多文档界面程序中的当前窗口CTRL+F4关闭当前窗口或退出程序ALT+F4复制CTRL+C剪切CTRL+X删除DELETE显示所选对话框项目的帮助F1显示当前窗口的系统菜单ALT+空格键显示所选项目的快捷菜单SHIFT+F10显示“开始”菜单CTRL+ESC显示多文档界面程序的系统菜单ALT+连字号(-)粘贴CTRL+V切换到上次使用的窗口或者按住ALT然后重复按TAB，切换到另一个窗口ALT+TAB撤消CTRL+Z编辑本段二、使用“Windows资源管理器”的快捷键目的快捷键如果当前选择展开了,要折叠或者选择父文件夹左箭头折叠所选的文件夹NUMLOCK+负号(-)如果当前选择折叠了，要展开或者选择第一个子文件夹右箭头展开当前选择下的所有文件夹NUMLOCK+*展开所选的文件夹NUMLOCK+加号(+)在左右窗格间切换F6编辑本段三、使用WINDOWS键可以使用Microsoft自然键盘或含有Windows徽标键的其他任何兼容键盘的以下快捷键。目的快捷键在任务栏上的按钮间循环WINDOWS+TAB显示“查找：所有文件”WINDOWS+F显示“查找：计算机”CTRL+WINDOWS+F显示“帮助”WINDOWS+F1显示“运行”命令WINDOWS+R显示“开始”菜单WINDOWS显示“系统属性”对话框WINDOWS+BREAK显示“Windows资源管理器”WINDOWS+E最小化或还原所有窗口WINDOWS+D撤消最小化所有窗口SHIFT+WINDOWS+M编辑本段四、“我的电脑”和“资源管理器”的快捷键目的快捷键关闭所选文件夹及其所有父文件夹按住SHIFT键再单击“关闭按钮（仅适用于“我的电脑”）向后移动到上一个视图ALT+左箭头向前移动到上一个视图ALT+右箭头查看上一级文件夹BACKSPACE编辑本段五、使用对话框中的快捷键目的快捷键取消当前任务ESC如果当前控件是个按钮，要单击该按钮或者如果当前控件是个复选框，要选择或清除该复选框或者如果当前控件是个选项按钮，要单击该选项空格键单击相应的命令ALT+带下划线的字母单击所选按钮ENTER在选项上向后移动SHIFT+TAB在选项卡上向后移动CTRL+SHIFT+TAB在选项上向前移动TAB在选项卡上向前移动CTRL+TAB如果在“另存为”或“打开”对话框中选择了某文件夹，要打开上一级文件夹BACKSPACE在“另存为”或“打开”对话框中打开“保存到”或“查阅”F4刷新“另存为”或“打开”对话框F5编辑本段六、桌面、我的电脑和“资源管理器”快捷键选择项目时，可以使用以下快捷键。目的快捷键插入光盘时不用“自动播放”功能按住SHIFT插入CD-ROM复制文件按住CTRL拖动文件创建快捷方式按住CTRL+SHIFT拖动文件立即删除某项目而不将其放入SHIFT+DELETE“回收站”显示“查找：所有文件”F3显示项目的快捷菜单APPLICATION键刷新窗口的内容F5重命名项目F2选择所有项目CTRL+A查看项目的属性ALT+ENTER或ALT+双击可将APPLICATION键用于Microsoft自然键盘或含有APPLICATION键的其他兼容键编辑本段七、Microsoft放大程序的快捷键这里运用Windows徽标键和其他键的组合。快捷键目的Windows徽标+PRINTSCREEN将屏幕复制到剪贴板（包括鼠标光标）Windows徽标+SCROLLLOCK将屏幕复制到剪贴板（不包括鼠标光标）Windows徽标+PAGEUP切换反色。Windows徽标+PAGEDOWN切换跟随鼠标光标Windows徽标+向上箭头增加放大率Windows徽标+向下箭头减小放大率编辑本段八、使用辅助选项快捷键目的快捷键切换筛选键开关右SHIFT八秒切换高对比度开关左ALT+左SHIFT+PRINTSCREEN切换鼠标键开关左ALT+左SHIFT+NUMLOCK切换粘滞键开关SHIFT键五次切换切换键开关NUMLOCK五秒QQ快捷键，玩QQ更方便Alt+S快速回复Alt+C关闭当前窗口Alt+H打开聊天记录Alt+T更改消息模式Ait+J打开聊天纪录Ctrl+A全选当前对话框里的内容Ctrl+FQQ里直接显示字体设置工具条Ctrl+J输入框里回车(跟回车一个效果)Ctrl+M输入框里回车(跟回车一个效果)Ctrl+L对输入框里当前行的文字左对齐Ctrl+R对输入框里当前行的文字右对齐Ctrl+E对输入框里当前行的文字居中Ctrl+V在qq对话框里实行粘贴Ctrl+Z清空/恢复输入框里的文字Ctrl+回车快速回复这个可能是聊QQ时最常用到的了Ctrl+Alt+Z快速提取消息Ctrl+Alt+A捕捉屏幕最常用的快捷键F5刷新DELETE删除TAB改变焦点CTRL+C复制CTRL+X剪切CTRL+V粘贴CTRL+A全选CTRL+Z撤销CTRL+S保存ALT+F4关闭CTRL+Y恢复ALT+TAB切换CTRL+F5强制刷新CTRL+W关闭CTRL+F查找SHIFT+DELETE永久删除CTRL+ALT+DEL任务管理SHIFT+TAB-反向切换CTRL+空格--中英文输入切换CTRL+Shift输入法切换CTRL+ESC--开始菜单CTRL+ALT+ZQQ快速提取消息CTRL+ALT+AQQ截图工具CTRL+ENTERQQ发消息Alt+1保存当前表单Alt+2保存为通用表单Alt+A展开收藏夹列表资源管理器END显示当前窗口的底端HOME显示当前窗口的顶端NUMLOCK+数字键盘的减号(-)折叠所选的文件夹NUMLOCK+数字键盘的加号(+)显示所选文件夹的内容NUMLOCK+数字键盘的星号(*)显示所选文件夹的所有子文件夹向左键当前所选项处于展开状态时折叠该项，或选定其父文件夹向右键当前所选项处于折叠状态时展开该项，或选定第一个子文件夹自然键盘【窗口】显示或隐藏“开始”菜单【窗口】+F1帮助【窗口】+D显示桌面【窗口】+R打开“运行”【窗口】+E打开“我的电脑”【窗口】+F搜索文件或文件夹【窗口】+U打开“工具管理器”【窗口】+BREAK显示“系统属性”【窗口】+TAB在打开的项目之间切换辅助功能按右边的SHIFT键八秒钟切换筛选键的开和关按SHIFT五次切换粘滞键的开和关按NUMLOCK五秒钟切换切换键的开和关左边的ALT+左边的SHIFT+NUMLOCK切换鼠标键的开和关左边的ALT+左边的SHIFT+PRINTSCREEN切换高对比度的开和关运行按“开始”－“运行”，或按WIN键+R，在『运行』窗口中输入：（按英文字符顺序排列）%temp%打开临时文件夹.C:\DocumentsandSettings\用户名所在文件夹..C:\DocumentsandSettings...我的电脑\C盘appwize.cpl添加、删除程序access.cpl辅助功能选项Accwiz辅助功能向导cmdCMD命令提示符commandCMD命令提示符chkdsk.exeChkdsk磁盘检查certmgr.msc证书管理实用程序calc启动计算器charmap启动字符映射表cintsetp仓颉拼音输入法cliconfgSQLSERVER客户端网络实用程序clipbrd剪贴板查看器control打开控制面板conf启动netmeetingcompmgmt.msc计算机管理cleanmgr垃圾整理ciadv.msc索引服务程序dcomcnfg打开系统组件服务ddeshare打开DDE共享设置dxdiag检查DirectX信息drwtsn32系统医生devmgmt.msc设备管理器desk.cpl显示属性dfrg.msc磁盘碎片整理程序diskmgmt.msc磁盘管理实用程序dvdplayDVD播放器eventvwr事件查看器eudcedit造字程序explorer打开资源管理器fsmgmt.msc共享文件夹管理器firewall.cplWINDOWS防火墙gpedit.msc组策略hdwwiz.cpl添加硬件iexpress木马捆绑工具，系统自带inetcpl.cplINTETNET选项intl.cpl区域和语言选项（输入法选项）irprops.cpl无线链接joy.cpl游戏控制器lusrmgr.msc本机用户和组logoff注销命令main.cpl鼠标mem.exe显示内存使用情况migwiz文件转移向导mlcfg32.cpl邮件mplayer2简易widnowsmediaplayermspaint画图板msconfig.exe系统配置实用程序mstsc远程桌面连接magnify放大镜实用程序mmc打开控制台mmsys.cpl声音和音频设备mobsync同步命令ncpa.cpl网络连接nslookupIP地址侦测器netstartX开始X服务netstopX停止X服务netstat-an命令检查接口netsetup.cpl无线网络安装向