基于微信小程序点餐系统的设计与实现计.doc

《基于微信小程序点餐系统的设计与实现计.doc》由会员分享，可在线阅读，更多相关《基于微信小程序点餐系统的设计与实现计.doc（37页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、本科毕业设计（论文）基于微信小程序系统点餐系统的设计与实现Design and Implementation of Ordering System based on Wechat Mini Program System院 （系）计算机学院专 业软件工程班 级2016级软件工程9班学 号16210120932学生姓名周 政指导教师张 强提交日期2020年 4 月 12 日毕业设计（论文）原创性声明本人郑重声明：所呈交的毕业设计（论文），是本人在指导老师的指导下，独立进行的设计（研究）工作及取得的成果，论文中引用他人的文献、数据、图件、资料均已明确标注出，论文中的结论和结果为本人独立完成，不包含他

2、人已经发表或撰写的作品及成果。对本文的研究作出贡献的个人和集体，均已在论文中作了明确的说明。本人完全意识到本声明的法律结果由本人承担。毕业论文作者（签字）： 签字日期： 年 月 日广东东软学院本科毕业设计成绩评定成绩项论文成绩（百分制）折合比例实得成绩（折合分）指导教师成绩30%评阅教师成绩20%答辩成绩50%总评成绩注：毕业设计（论文）成绩按百分制评定。答辩成绩不及格的（评分低于60分的），则该毕业设计（论文）总评成绩为1内容摘要在现今的社会，随着web技术高速发展，大数据的时代也到来了。科技被科学的应用，互联网的出现给这个社会增添了无限的机遇与挑战；互联网的出现给曾经不敢想的一切变得有理可

3、循。随着互联网的发展，智能手机也已被广泛使用，同时各种手机应用也层出不穷。随着越来越多的手机应用被开发出来，人们手机中的应用也日益增加，人们的每一种需求都有了对应的APP，所以手机的内存也受到了很大的挑战。手机内存是有限的，但是人类的需求是无限的，所以一款集具有多个功能的软件就很必需了，但是一般这类软件又是比较大的。为了解决轻巧而不占内存这个问题，桌面快应用、微信小程序随之诞生了。快应用是基于硬件平台共同推出的一种新型应用生态，手机用户无需下载软件安装，即点即用，享受原生应用的性能体验1。由于快应用只能安装在Android手机上，IOS用户的系统不支持快应用的安装，也就意味着快应用的使用群体有

4、限。而微信的社交性又很占优势，基本每一部手机都有安装微信，而且大家日常使用微信的频率也可谓感人。针对手机用户对微信的粘度很高，所以微信上搭建的微信小程序用户在使用上就更方便了。所以开发一款微信小程序就更容易被大家广泛使用。FastEating小程序系统依据现实点餐的模式在程序中实现，使人们通过网络就可以完成现实中外出购买食物的操作。基于微信平台的FastEating小程序的实现不仅可以基本实现客户利用网络点餐的功能，还支持在此基础上提供更多的线下购物没有的贴心的服务，比如：支持送货上门，支持修改地址，有平台优惠等，也能及在第一时间了解商品的折扣优惠活动。点餐系统还给外卖人员提供了更多的就业机会

5、，让人们能足不出户享受喜欢的美食。线上外卖商城的重要性也因为疫情的爆发变得更加的突出，因为无接触配送，让大家不出门、少出门接触其他用户，线上购物也发挥着极大的作用。线上商城也可通过色彩、图片、说明、设置动画加强对菜品更直观的宣传，给顾客刺激性的视觉体验，让客户有更直观的感受的同时，也给商户带来了更多的展示自己的机会。对于订单的处理，及商品的上新、推新管理起来也方便。想要推某款商品，在网上商城，推广的效果在线上也能更及时、更迅速，推广的范围更广，使其想要的效果可以立竿见影。关键词：小程序网上商城；微信；FastEating；服务；外卖IIAbstractIn todays society, wi

6、th the rapid development of web technology, the era of big data is coming. The application of science and technology, the emergence of the Internet to this society has added unlimited opportunities and challenges; the emergence of the Internet to once dare not think of everything has become reasonab

7、le. With the development of the Internet, smart phones have been widely used. At the same time, a variety of mobile applications are emerging in an endless stream. With the development of more and more mobile applications, the applications in peoples mobile phones are also increasing. Each kind of d

8、emand of people has a corresponding app, so the memory of mobile phones has also been greatly challenged. The memory of mobile phone is limited, but the demand of human beings is infinite, so a software with multiple functions is very necessary, but generally this kind of software is relatively larg

9、e.In order to solve the problem of lightness without occupying memory, desktop fast applications and wechat applets came into being. Fast application is a new application ecology based on hardware platform. Mobile users do not need to download software installation, that is, click to use, and enjoy

10、the performance experience of native applications 1. Because fast apps can only be installed on Android phones, IOS users systems do not support the installation of fast apps, which means that the user group of fast apps is limited. Wechats social nature is dominant. Wechat is installed in almost ev

11、ery mobile phone, and the frequency of daily use of wechat is also touching. The viscosity of wechat is very high for mobile users, so the wechat applet built on wechat is more convenient for users. So its easier to develop a wechat app and its widely used.Fasteating small program system is implemen

12、ted in the program according to the actual ordering mode, so that people can complete the operation of going out to buy food in reality through the network. The implementation of fasteating applet based on wechat platform can not only basically realize the function of customers online ordering, but

13、also support to provide more intimate services that offline shopping does not have, such as: support home delivery, support to modify the address, have platform discounts, etc., as well as understand the discount activities of goods at the first time. The ordering system also provides more jobs for

14、takers, so that people can enjoy their favorite food at home. The importance of online takeout mall has become more prominent because of the outbreak of the epidemic. Because of the contactless distribution, people do not go out and contact other users less. Online shopping also plays a great role.

15、Online shopping malls can also enhance the more intuitive publicity of dishes through colors, pictures, descriptions and animations, so as to provide customers with stimulating visual experience, more intuitive feelings and more opportunities for merchants to show themselves. It is also convenient f

16、or the processing of orders and the management of new products. If you want to push a product, in the online shopping mall, the effect of promotion can be more timely, more rapid, and the scope of promotion is wider, so that the desired effect can be immediate.Keywords: applet online mall; wechat; F

17、astEating; service; take outV目录内容摘要IAbstractIII目录VII第1章 前言11.1 系统的研究背景与意义11.1.1 国外研究现状11.1.2 国内研究现状11.2 系统的研发思路2第2章 开发环境与技术42.1 项目性质及开发环境说明42.1.1项目的开发环境42.2 系统框架及架构模式的选择42.2.1 系统框架的介绍与选择52.3 开发工具的介绍和选择52.3.1 开发语言介绍52.3.2 小程序开发工具介绍62.3.3 云开发介绍6第3章 项目可行性分析83.1 项目的社会需求分析83.2 项目的技术可行性分析83.3 项目的经济与效益可行性分

18、析9第4章 系统需求分析104.1 面向群体特征分析104.2 项目需求规定104.2.1 用户104.2.2 状态104.3 系统设计目标114.4 系统功能概要设计114.4.1 系统模块概述124.4.2 系统的架构设计124.5核心功能模块介绍144.5.1 菜单列表模块144.5.2 提交订单模块144.5.3 订单信息模块144.5.4 订单模块144.5.5 卡包模块154.5.6 联系商家模块15第5章 系统的设计与实现165.1 网站界面介绍165.1.1 菜单列表页165.1.2 下单页175.1.3 订单历史页185.1.4 卡包详情页195.1.5 联系商家页20第6章

19、 系统测试216.1 测试目的216.2 测试方法216.3 测试原则216.4 功能测试22第7章 总结与反思24参考文献25致谢26第1章 前言1.1 系统的研究背景与意义1.1.1 国外研究现状由于经济发达的国家人对时间的意识更迫切，时间观念相对来说更强，所以对餐饮服务的要求也相对较高。所以针对日常用餐而言，在经济发达国家中餐饮业的科技化也比发展中的国家更全面些。比较突出的是经济发达的国家的餐饮业通过科学的运用先进的管理方法和手段,充分地利用巨大的网络科技在发展餐饮业。世界上，大多数经济发达的国家和地区，餐饮业的发展不断的被互联网影响，各种外卖平台崛起，外国的外卖平台经营模式也已经十分成

20、熟了，顾客通过网络进入到不同的外卖商户，不需要移动脚步，就能浏览到各个商户的菜单信息、材料信息及价格信息，最终比对之后来选择所需要的美食佳肴。美国餐饮消费者越来越趋向于使用线上点餐的形式来点外卖，特别是现代的年轻消费者，这类群体越发的活跃在外卖平台。由此可见，线上外卖平台将成为餐饮业经营的又一种模式。1.1.2 国内研究现状由于互联网发展已深入各行各业，线上点餐这个模式也很早的被提出，它的出现将方便人们生活，提高人们的生活幸福指数。这类系统应该是基于现实点餐的模型，用虚拟的网络的形式来模拟现实的操作，使得用户通过互联网就可以完成生活中必要的购买食物的行为。系统的完成不仅可以基本实现客户点餐的功

21、能，还能在此基础上提供更多的，更便捷的服务。互联网的快速发展也将同步推动网络餐厅的发展，点餐系统的重要性也将发挥出它强大的作用。线上订餐可充通过丰富的色彩、各种不同的图片、食材、制作工艺的相关介绍、及合适的动图来加强产品的宣传，从而使得餐饮业的“色型”完美的呈现在顾客的眼中。网上工作也使得产品、订单、营业额的管理变得更方便，起到立竿见影的效果，不用因为更改菜色而重新印刷广告单。只需要在后台管理系统，从新上架新修改好的文案、图片，鼠标一点，系统的数据能够马上得到更新。采用服务器/浏览器的模式，订餐者无须再进行第三方软件的安装,直接通过手机微信联网就能进行线上消费，线上操作也更加简便，网上订餐也使

22、得订单信息更加准确。能避免通过口头传递信息的错误，优化服务。相比通过打电话订餐的形式，通过网络订餐不会跟打电话会出现占线的情况，在高峰期对订餐的处理更是游刃有余，系统能自动接单，商户只需要看着屏幕点打印即可，是一个不会丢失的电子数据，甚至还可以通过小程序的分享功能让更多的顾客知道我们的特色之处，省去了一大笔派人派宣传单人工费用和印刷传单的费用。点餐途径有了更好的改善，线上订餐成为人工点餐又一有力补充，扩大客流，从而整体提高业务量。在疫情严峻的当下，电商时代的崛起，使得社交网络成为最大的购物场所，逐渐凸显出“以人为中心”的购物核心理念。就餐饮业而言，小程序的开发，让线下的场景变得更加方便。对于顾

23、客来说，店家的地址在哪其实并不关心，顾客最关心的是食物的质量，这个有资质的商家，在食品安全方面都是可以保证的，所以剩余顾客关系的最多的就是如何更方便、更优惠的买到可口美味的食物。线上商城的菜品评分、其他顾客的评论都将实打实的作为购买用户的参考；食物不出门就能吃到，这将是无数宅居人最喜欢的地方；或者家长不在家，没办法给家里的老人小孩做饭，线上直接远程下单，解决多少时间、距离的问题呀。而小程序基于微信平台，微信又提供了功能完善的开发工具-微信开发者工具，使得小程序的开发成本少，运营成本少，维护起来也简单。1.2 系统的研发思路该系统主要是结合实际情况，整合出项目具体需求。将现实存在需要解决的情况开

24、发出对应的功能。每一个功能都有设计成独立的接口，一个好用的接口往往胜过强大的功能1。具体功能设计如下：1、 针对餐馆菜单设计，小程序对应有菜品列表功能，考虑到菜品种类繁多，设置有菜品类别导航，用户可以通过导航快速定位到具体某一类别的菜式；列表也会显示菜品价格、商品原料及折扣信息；套餐菜品还会有套餐内的详细介绍。2、 针对餐馆点菜功能，小程序在菜单列表右侧，设有添加商品到购物车按钮，点击按钮将商品添加到购物车，再次点击添加按钮同一款商品，如果购物车存在，则会之间在数量上调整，而不会增加一条新纪录；点击减少按钮，会将购物车的商品数减少，到0的时候，商品从购物车删除。 3、 针对点菜单，小程序对应设

25、计有购物车页。根据操作，可以看到自己添加到购物车的商品名、商品数及商品价格，餐具数量等。还可以进行添加备注，提示商家或者外卖送货员一些注意事项，像：不要香菜、或者外卖快到时提前联系等信息，确认无误后再进行结算操作。 4、 针对付款，小程序设计有线上微信支付功能。微信支付功能可以直接调取微信平台提供的API，安全性是可以保障的。5、 设有用户地址、电话填写或者进行修改的页面。该可以设置一个默认的地址，方便用户同一地址不需要多次填写而直接下单。该系统就是根据上述情况做了相应的开发。10第2章 开发环境与技术物竞天择，适者生存，这是自然界的定律。一个好的产品的出现，必然有其存在的意义。而一个好产品离

26、不开一群人的努力，离不开一些给力的辅助工具。对于系统来说，一个良好的开发环境对于项目开发人员来说无疑是提高生产效率的保证。那么，FastEating小程序的开发环境是什么？它是如何运行在手机端的呢？它又是由什么工具开发的呢？2.1 项目性质及开发环境说明2.1.1项目的开发环境软件开发环境(Software Development Environment，SDE)是指在基本硬件和宿主软件的基础上，为支持系统软件和应用软件的工程化开发和维护而使用的一组软件，简称SDE2。它由软件工具和环境集成机制构成，前者用以支持软件开发的相关过程、活动和任务，后者为工具集成和软件的开发、维护及管理提供统一的支

27、持3。人机界面这类系统是软件的开发环境与使用的用户之间存在着的一个一种交互式的系统，存储各种软件工具加工所产生的软件产品或半成品（如源代码、测试数据和各种文档资料等）的软件环境数据库是软件开发环境的核心4。共享数据的实现是通过工具之间的相互联系而实现的。FastEating小程序系统通过微信开发者工具进行小程序云开发，数据来源于微信平台提供的云函数实现对JSON数据库的数据操作。2.2 系统框架及架构模式的选择框架，即framework。简单的说就是某个应用或者软件的半成品，把不同应用程序中存在的一些共性的东西提取出来，做成一个半成品程序，这样的半成品就是所谓的框架。根据框架的架构，我们在此基

28、础上又可以搭建自己想要搭建的效果。框架就像我们常说的毛胚房，住房内部不装修，留给房子的主人按照自己的喜欢的风格自己布局。网站框架也是一样的道理，先把网站的构造搭建好了，然后功能就按照自己想要的来配置，省去了自己打基础的步骤。2.2.1 系统框架的介绍与选择软件系统发展到现在已经很成熟了。很多应用软件经过前人的研究，同时经受住了实践，这些软件已经被长久的使用的过程中被不断完善使之达到安全、成熟、稳定与用户体验度好的程度了。已经经过考验的东西不去使用，而是自己去折腾摸索，这是一种很耗时且不高效的方式。这就是框架存在的意义，解放底层的重复实现，直接开发需要的自定义功能，进而能省去大量重复造轮子的时间

29、。框架一般都具有“高内聚”的特性。框架的使用的好处是代码能够进行复用、重构。直接在成熟的框架下进行二次开发，不仅系统稳健行得到保障，还可以大大提高开发效率，加快开发的进度，从而降低开发的成本，提高工作效率。2.3 开发工具的介绍和选择2.3.1 开发语言介绍JavaScript（简称“JS”） 是一种编程语言，它具有函数优先的思想、它是轻量级的、解释型的或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。5在1995年，JavaS

30、cript首次设计实现而成。JavaScript是由Netscape公司的Brendan Eich在网景导航者浏览器上实现的。JavaScript出现的时候Java语言很受欢迎，所以Netscape公司想借用Java的名气来吸引使用者，因而取名JavaScript。实际上JavaScript的语法风格与Self及Scheme最为接近。JavaScript的标准是ECMAScript。数据表明：截止到2012年，线上的所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版

31、，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。5JavaScript语言的特点：1) 一种解释型脚本语言，直接在浏览器解释运行，这也意味着JavaScript安全性较差；2) 一种基于对象的脚本语言；3) 一种弱类型语言，对定义的变量对类型没有严格要求；4) 一种采用事件驱动的脚本语言，这意味着JavaScript不需要经过web浏览器就可以直接响应用户的操作；5) 支持跨平台使用，不依赖与操作系统，只需要浏览器支持。2.3.2 小程序开发工具介绍微信开发者工具是微信团队为了帮助微信公众平台、微信小程序第三方的开发者更方便、更快捷、更安全

32、地进行软件开发和调试基于微信网页而开发的一款开发工具。小程序是属于应用，它主要是通过模拟手机微信客户端的各种表现，来使得开发者可以使用这个工具方便地在PC端上进行开发和手机调试的相关工作。微信开发者工具分为多个区域块，其中左侧的预览区是为了开发者在右侧区域编写代码，左侧可以做到实时预览；有真机调试区，通过手机微信扫描二维码，就能直接使用手机体验小程序；版本控制，可以通过安装git插件，能实现代码直接上传到微信后台进行小程序版本发布；有云开发功能，启用云开发功能，可以直接通过云开发管理小程序的数据。微信开发者工具的功能： 开发小程序； 模拟器，支持开发的小程序实时预览和在线发布等； 支持调试微信

33、网页授权和开发微信相关的JS-SDK; 用于调试小程序API和基于小程序开发的相关页面。2.3.3 云开发介绍使用云开发，开发者可以无需搭建服务器，直接使用云开发的云端能力进行微信小程序、小游戏的开发。云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。云开发的优点：a) 提供大量云函数，无需自建服务器；b) 提供数据库，无需自建数据库，可直接通过js来读写JSON文件组成的数据库；c) 提供存储空间，无需自建存储和CDN；通过微信开发

34、者工具的云开发控制台，可以界面操作，对数据进行管理；a) 云调用的支持，前端和服务端都可以直接使用小程序开放接口，无需鉴权第3章 项目可行性分析为了简化和压缩FastEating系统的分析和设计，做了一个可行性分析调研，调研方向分别从：社会需求、所需技术、经济消耗和社会产能等四方面。下面分别介绍四个方面的调研情况。3.1 项目的社会需求分析随着手机的普及，手机应用对于人们的生活也是扮演着越来越重要的角色。越来越多的线下行为逐渐逐步演化到我们在手机上就能完成。外卖应用也是异军崛起，美团外卖、饿了么外卖、百度外卖为主的三大外卖平台日活量也是巨大的，但是商家入驻这些平台是需要的佣金越来越高，对于外卖

35、商家而言，这意味着自己的商品能赚的钱是少量的，不得已只能提高商品价格，提高价格后自己的商品有缺失了一定的竞争力，第三方外卖平台上面的商户数量也是很多的，这意味着如果不是非常有竞争力的商户就很难被顾客发现，所以有一个属于自己的外卖接单平台而不需要交付第三方佣金的外卖小程序就显得格外必需。FastEating项目正式迎合这种需求而进行设计。小程序是独立的商户外卖平台，不同商户拥有的小程序是不一样的，商户不需要交付佣金，商户利润大大提升，商户就可以在价格上对用户给与更实惠的价格。商户还可以针对自己家的特色设计自己的平台数据及优惠活动，主推菜品等。同时小程序还支持分享的功能，一个好的小程序还可以通过微

36、信在朋友圈里分享，从而引入额外的用户，实现客户裂变。现在手机的内存从16G变成32G，甚至更高的258G依旧没能够完全满足用户对APP的内存使用需求7。轻量级小程序的到来很大程度上解决了这个痛点，让用户不需要下载不同种类的外卖APP才能够获得所有的外卖信息，这使得用户更方便的享受到安装应用才能使用的功能。所以外卖小程序是有很强大的生命力的。3.2 项目的技术可行性分析FastEating项目基于微信平台进行开发，使用的是微信的生产环境，由于微信平台的技术是很成熟的，微信平台提供的接口也是经过检验的。一、 界面UI设计：表现层，微信为小程序开发提供了样式语言WXSS。二、 微信小程序开发页面结构

37、不使用HTML语言而是微信独有的WXML语言，支持数据绑定与渲染，支持模板的使用及事件绑定功能。三、 微信还提供了很多种类的组件，无需自己开发，可以直接调用微信小程序自带的，像容器、丰富的表单组件、导航等四、 项目实现过程中可能会存在的技术难点：该项目会涉及一些图片处理、微信第三方授权获取用户信息等技术难点，但是这些都是在我现有能力能克服实现的。综上所述，上面提到的语言技术，我们都有开设相关课程进行学习，以及之前也有参于过类似项目的实战经验，综上所述，开发该系统的技术是可性的。3.3 项目的经济与效益可行性分析网上销售这种模式很大的方便了顾客的需求沟通。虽然汽车消费属于大件消耗品,所以在短时间

38、内任然无法完全做到网上看菜单、下单、成交、支付等,但是网络营销这种模式至少能够充分发挥好互联网的优势，做到企业与客户能够很好的交流。商家可以通过利用网络为顾客提供更便捷的服务,使客户能买到自己想消费的并且实惠的商品,一个系统能够做到满足客户显性和隐性的需求,这是一种新型的、互动的、更加友善的销售模式,能快速拉近商户和消费者的情感距离，从而树立良好商户的品牌形象,就能更好的吸引客户,从而实现由沟通到顾客购买态度的转变。对于开发系统会存在一定的开销，但由于FastEating系统是单人开发的，所以大部分的开发人员开销已经省去了，开发该系统选择使用的开发语言、开发框架和开发工具都是开源免费的，所以开

39、发这个系统基本不需要开支。主要会有一下方面会需要开销：1. 购买相关参考书籍及文档；2. 项目部署上线，先认证商户信息，认证费用一次300元，提供好相关的资料填写完整，基本都能一次审核通过，如果有什么问题，微信客服也会主动联系，指导修改，所以费用300就够了。综上所述，整个项目的经济消耗不大，但是收益不可估量，项目具有可实施性。第4章 系统需求分析每个系统都有其使用的领域，使用的人群，那么FastEating的使用领域和使用人群在哪呢？整个系统的设计又是怎样的呢？下面会针对这些方面进行描述。4.1 面向群体特征分析本项目在设计初衷是提供给具体自己的店铺，但是没有属于自己专用的系统程序而又想要在

40、线上接单的小个体户使用的，但是但凡一个个人或者小团体也有服务能提供，也想要在线上接单的，这种需求FastEating也是能胜任的。对于该系统的管理者需要会基本电脑操作，因为要发布信息，但是界面简洁，操作过程中会有指示性的提示，所以对于使用者，门槛并不高。对于报名者，更是鼠标点击按钮即可，更不会要求操作复杂的动作。4.2 项目需求规定4.2.1 用户普通用户手机首先得拥有一个微信账号，登录账号后打开小程序，同意微信授权，授权之后可以对商城里的商品选购，选购完后提交提单，设置好自己的收获地址，付款即可。商户用户则通过微信开发者工具的云开发对系统里的数据进行添加、删除、编辑操作。4.2.2 状态用户

41、通过微信进入到小程序，第一次进入是如果需要对菜单进行操作，就会弹出微信信息授权给小程序的弹窗，只有允许授权的用户才能购买商品。授权之后，系统就会拿到用户的基本信息，其中有一个唯一的openid,，系统就是通过这个唯一的openid来识别用户，这个openid在使用小程序的过程中都是一致的。4.3 系统设计目标FastEating系统是基于微信平台开发的一款外卖小程序，它的出现是为了避免了柜面上繁琐的点餐、付款和排队环节，使消费者可以更直观、便捷地进行点餐和付款，相比传统的就餐模式更加省时省力。4.4 系统功能概要设计FastEating项目是用户通过自己微信账号授权登录小程序，通过浏览页面显示

42、的商品，对感兴趣的商品加入购物车后进行商品结算从而完成前台界面下单的过程 整个系统的设计思维导图如下：图4-1 FastEating小程序设计图4.4.1 系统模块概述看完了整个系统的流程图，想必这个网站的框架大致就明白了。下面是介绍一下整个系统的具体设计：系统分为菜单、订单、卡包、联系商家四大核心模块，各大模块都对应着线下实体店购买食品的操作，具体设计情况如下：菜单模块：设有菜单分类，每个菜品归属于某个特定的商品种类；订单模块：获取用户选择的菜品及数量；用户模块：管理用户账号，设置默认的地址、联系电话等信息；卡包模块：管理后台管理员账号、个人信息；本系统通过用户进行微信授权登录系统-选择自己

43、喜欢的商品-确认信息，下单-商家收到数据后进行配送。通过这一系列的简单操作，完成了线上购买食物的操作，给用户和商户都产生了不可估计的效益。4.4.2 系统的架构设计FastEating系统选用基于有赞商城的开源小程序框架Vant Weapp。Vant Weapp是Vant的小程序版本，Vant和Vant Weapp它们是基于相同的UI风格，同一套视觉规范，提供的一致的API接口能让开发者基于框架快速搭建属于自己的一类商城类的小程序应用。具体架构看图：编辑器显示的架构图：图4-5小程序在开发工具里的架构情况上方的图左侧栏是属于整个项目的目录结构，每个页面对应一个文件夹，每个页面有4部分数据组成。

44、其中wxml文件是页面结构文件，用来搭建页面的框架；json文件是页面的数据文件，用来存放页面显示的数据；wxss文件是页面的样式文件，用来渲染页面的界面显示；js文件是用来获取用户的交互从而操作json文件中的数据。Cloudfunction文件夹是使用微信的云函数而引入的一个文件。思维导图整理出的架构图：图4-6项目文件架构图（思维导图）Npm模块是通过开发者工具中的构建npm,使用npm模块选项即可引入的组件。它是用来管理第三方包软件的工具；Pages文件夹里面的每一个文件夹对应小程序的每一个页面，每个文件夹里面又都包含着4个页面构建的js、wxss、wxml、json文件；通过配置js

45、on文件来引入需要的组件，引入之后可以直接在wxml里使用相应的组件；使用vant-weapp框架之后，主要的功能就是如何设置页面风格样式，组件是有自带样式的，但是我们可以通过自定义样式来覆盖掉原始样式。4.5核心功能模块介绍4.5.1 菜单列表模块菜单列表模块包含小程序授权后进入的首页就是菜单列表信息页，列表上方是菜品分类的导航栏，左右滑动来切换分类类别。列表显示菜品名、单价、菜品原料及套餐信息。有两个按钮，一个新增商品，多次点击数量增加；一个是减少商品，数量减少到0 将删除选中的商品。4.5.2 提交订单模块提交订单模块主要是顾客选择的商品汇总页，该模块用来显示顾客购买的商品信息列表，可以

46、修改外卖配送地、配送时间及支付方式，是否需要餐具，及优惠券的使用等，甚至可以给商家备注一些额外的信息。4.5.3 订单信息模块针对前台用户下单的商品的一个订单汇总列表，该模块还针对订单信息增加了导出汇总数据功能，可以支持导出Excel文件和CSV文件，CSV文件兼容性更好，能弥补Excel文件导出有可能乱码的情况。4.5.4 订单模块订单模块是显示用户下单的历史数据。订单是否支付成功，何时下的单以及配送的信息等。4.5.5 卡包模块卡包模块主要是显示用户拥有的优惠券。4.5.6 联系商家模块联系商家模块主要是针对一些特殊情况，需要联系商户，显示的一些商户地址、联系电话等信息。27第5章 系统的

47、设计与实现5.1 网站界面介绍FastEating系统的界面都是本着简洁大方的风格进行设计的。前端界面主打黑白色调，给人以干净、大方的感受，后端主要走黑白灰的简洁工作风路线。前后台在色彩上的选择都是以近似色的色阶进行选取，不会给人太突兀的感觉，整个系统使用下来不会有太大的视觉疲劳的感受8。该系统已经设计完毕，所有的功能都能正常使用，下面用一些系统的界面截图进行介绍。5.1.1 菜单列表页图5-1 菜单列表页菜单列表页显示商户上架的菜品信息，列出有菜品制作的材料、单价及加入购物车按钮。5.1.2 下单页图5-2 下单页下单页，显示用户挑选下单的商品列表，商品对应的总价、商品材料及可以选择送货地址、备注一些口味相关的信息及是否需要餐具等信息。5.1.3 订单历史页