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

绪论1.1设计背景自互联网诞生以来，经过多年的快速发展，互联网已经全面渗透到经济发展的各个领域，彻底改变了人们生产建设、经济贸易、生活娱乐的方式。随着微电子技术的发展，智能手机得到大范围的普及与应用，＂移动互联网”最近五年得到了快速的发展。随着生活节奏的加快，人们更习惯千通过移动终端设备浏览互联网，这样不管是在上地铁上、公交车上，还是在路边都可以随时上网。在目前这个“移动互联网”时代，人们的学习、办公与生活都可在移动设备上进行。[1]信息化时代，餐饮业的工作方式也发生着巨大的变化。餐饮业中，传统的点餐方式是服务员手工记录，然后将订单手工传递给后厨；在用餐高峰时期，这种传统的点餐方式容易出错且点餐效率较低，十分影响顾客的店内体验，会造成顾客的流失。随着计算机技术的发展，电子化下单平台开始出现，服务员将用户订单录入电子终端，完成订单管理与结算的电子化[2];相比较传统方式，电子化下单平台提高了订单的管理水平，减小了下单过程中出错的儿率。但是在用餐高峰时间段，客人往往衙要排队等待点餐，点餐环节效率低下。由千长时间的等待，用户往往会产生负面情绪，影响整体就餐感受[3]。对千工作人员，在用餐高峰期往往会手忙脚乱、顾此失彼[4]。随着“移动互联网”的发展，餐饮业也积极向移动互联网方向变革，很多餐厅都开始开发自己的手机应用程序，客户可以通过手机客户端完成餐厅菜品的图文浏览、在线下单甚至是在线结账。餐厅定制手机客户端的方式极大的提高了餐厅的信息化水平，顾客无需长时间的排队就可以很方便的浏览菜品、在线下单与结算；餐厅也可以减少服务员数量，降低人工成本与管理成本。但这种餐厅定制手机客户端的方式有一个比较大的问题就是：客户端推广困难。目前智能手机内存与存储空间有限，智能手机用户往往不想因为一顿饭下载安装餐厅的定制应用。1.2设计意义“微信点单系统”的用户是微信用户，微信用户可以通过微信平台自助点餐并下单，享受美食。[3]微信点单系统能够为餐厅节约大晕的人力成本和经营成本。对千外卖业务，传统点餐模式需要专门安排人员来接听外卖电话，人工生成订单。对千在座点餐业务，需要服务员服务记录客人所点菜品，人工生成订单，这样必然需要大量的人力资源。而“微信点餐系统”能够不仅能够节约这部分的人力资源，而且可以减少因人工原因造成非服务问题数晕，提高商家的服务质量。消费者可以通过“微信点餐系统”订购外卖、在座点餐，点餐完成后自动生成订单。且能够节约商家推广费用。目前，商家每增加或修改菜品，变更价格，都要重新制作菜单和传单。主要推广费用来自与传单印刷和派发人员，但是传单派发基本是在马路边盲目的发放，无法判定是不是本餐厅的潜在客户，实际能够产生的客户微乎其微。而“微信点餐系统”使用的是电子菜单，在后台商家可以随便更改菜单。1.3技术路线1.3.1JSP动态网页技术随着网页开发技术的发展，传统的静态网页已无法满足用户的丰富需求。当前，动态网页是网站前端建设的主流。在动态网页上，用户不仅可以浏览网页图形信息，还可以通过网页与系统进行交互。例如，您可以在网页上输入用户信息以验证登录信息，填写表格并将信息输入系统。在JSP网页中，页面内容通过HTML和CSS代码显示，包括显示框架的布局，组件大小，颜色和样式。服务器端脚本负责为用户交互生成动态内容的逻辑。内容生成和显示的分离为JSP系统带来了良好的可维护性[1]。负责网站显示效果的前端艺术家不需要注意交互逻辑代码。更改网页的布局格式和组件的属性样式不会影响系统功能。对于大型，业务类型和复杂的交互式系统，JSP动态网页开发过程涉及许多组件。目前，JavaBeans或EnterpriseJavaBeans是非常好的JSP组件。开发人员可以在自己的项目中直接调用它们。另外，随着使用越来越多的JSP应用程序，开发人员继续总结和共享出色的组件。可以在JSP开发中使用的组件，有越来越成熟的框架，这进一步降低了JSP网页开发的难度[1]。1.3.2MVC开发模式软件系统的分层设计，应用广泛的MVC三层结构，可以提高软件系统的开发效率、提高系统的稳定性与可维护性[2]。优秀的MVC设计中，业务逻辑处理部分与显示部分逻辑上解耦，数据的交换通过接口实现。前端开发人员与后台开发人员分工明确，各自负责显示与业务逻辑的开发，一方面进行代码上的改动只要数据接口符合设计规范，不会影响另一方的正常运行[2]。需求分析2.1系统目标本次产品设计并实现了点餐系统，主要完成了3个功能模块分别为：管理员的登录、菜谱的信息维护、模拟点餐。本系统的目标是为了让顾客点餐更加便捷，为了让更多的管理员能尽快的上手完成数据的维护。2.2功能需求分析2.2.1系统总体用例图本系统的总体用例图如图2.1所示图2.1系统总体用例图2.2.2用例详细分析餐厅管理系统功能模块如表2.1所示表2.1餐厅管理系统功能列表序号功能名称功能简单描述1管理员登录管理员通过输入指定账号和密码进行系统登录2菜谱维护管理员登录后对菜谱的信息进行维护3模拟点餐顾客通过微信扫码后进行点餐管理员登录描述如表2.2所示表2.2管理员登录描述1、描述管理员通过输入账号和密码进行系统登录2、参与者管理员3、条件账号和密码是否正确4、结果系统登录成功或失败5、基本流程1.管理员进入系统登录界面2.管理员输入账号和密码3.数据传输经过系统服务器与数据库进行验证4.系统返回登录结果,管理员名和密码正确则跳转到系统主界面,出错或为空则返回到登录界面，并提示错误信息。6、异常由于账号、密码错误或账号、密码为空引起的登录失败访问数据库出错7、数据格式账号、密码8、返回数据登录结果菜谱模块如表2.3所示表2.3菜谱模块管理描述1、描述管理员对菜谱信息操作2、参与者管理员3、条件管理员登录成功4、结果数据操作成功或失败5、基本流程1.管理员进入系统2.管理员对菜谱的信息管理3.后台数据库做出相应的反应4.系统返回结果，出错或信息已经存在则做出相应的错误提示。6、异常访问数据库出错7、数据格式菜谱信息等8、返回数据操作结果模拟点餐描述如表2.4所示表2.4模拟点餐描述1、描述顾客扫码点餐2、参与者顾客3、条件顾客登录微信4、结果操作成功或失败5、基本流程1.顾客登录微信2.顾客扫码点餐3.加入购物车。6、异常访问数据库出错7、数据格式点餐的信息8、返回数据操作结果2.3性能需求分析这种设计的主要需求分析应该反映在数据库查询的准确性以及小程序的时间特性和灵活性上。它主要用于数据库的查询操作。对于自助式订单管理系统，总体准确性可以满足需求。时间特征主要是指获取食物的要求，这取决于信息量和用户输入的关键字的准确性。请求的平均响应时间应小于2s，WEB主页的打开速度应小于5s，Web登录速度应小于15s。一个接口支持200个用户同时呼叫（每3秒一次）。在100个并发用户的高峰期，管理系统的基本功能和处理能力至少达到10TPS。在小程序的灵活性方面，我们将考虑自助式订单管理系统在使用过程中可能出现的问题以及用户的使用要求，并尽可能地考虑用户的使用经验，因此请保留界面，以便当用户需求发生变化时，您可以尽快改进系统以增强用户体验。在100个并发用户的高峰期，管理系统的基本功能和处理能力至少达到10TPS。3.系统设计3.1系统架构设计3.1.1菜谱维护动态建模图3.1菜谱维护模块动态建模3.1.2模拟点餐模块动态建模模拟点餐动态建模如图3.2所示图3.2模拟点餐模块动态建模4.数据库设计4.1数据库概念设计在这一环节中，我们会使用到E-R图，也就是实体-联系的意思。在这个部分里面包含三个组成元素：实体、联系、属性。它强大的地方就是清楚明了，可以直接地、明确地反应实际的状况，透明清晰的显示出小程序的各项组成。本系统E-R图如下所示。图4.1数据库E-R关系图4.2数据表设计comment表数据表主要用于存储用户点单后对于菜品的评价信息，comment数据表如表4.1所示：表4.1comment数据表字段名名称数据类型是否为空创建时间备注Comment_idNameOpenidContentCreat_timeavatar-url（Auto）(NULL)(NULL)(NULL)CURRENT_TIMEST(NULL)contents数据表主要用来存储各种菜品的信息，contents数据表如表4.2所示表4.2contents数据表字段名名称数据类型创建时间是否为空备注IDbiaotimeitibanmianZISHUZUOZHE(Auto)(NULL)(NULL)(NULL)(NULL)(NULL)TICAIBEIZHUDANWEICREATE_TIME(NULL)(NULL)(NULL)CURRENT_TIMESTorder_detail数据表本表主要用来存储点单的客户一些点单的详情，主要包括订单号、菜品ID以及菜品的单价等。order_detail数据表如表4.3所示：表4.3order_detail数据表字段名点单号菜品ID主键成品单价产品数量DETAIL_IDORDER_IDPRODUCT_IDPRODUCT_NAMEPRODUCT_PRICEPRODUCT_QUANTITY(NULL)(NULL)(NULL)(NULL)(NULL)(NULL)PRODUCT_ICONCREAT_TIMEUPDATE_TINE(NULL)CURRENT_TIMESTCURRENT_TIMESTorder_master数据表此表主要用来存储本系统商家端的信息，用户在点单之后可以查看客户的订单、客户姓名等信息，以便于及时通知厨房下单，order_master数据表如表4.4所示：表4.4order_master数据表订单编号买家姓名联系方式地址桌号数量ORDER_IDBUYER_nameBUYER_PHONEBUYER_ADDRESSBUYER_OPENIDORDER_AMOUNT(NULL)(NULL)(NULL)(NULL)(NULL)(NULL)ORDER_STATUSPAY_STATUSCREAT_TIMEUPDATE_TIME00CURRENT_TIMESTCURRENT_TIMESTproduct_category数据表本表主要用来存储菜品的一些具体种类，以便点单者能够在小程序上快速选择自己心仪的菜品，product_category数据表如表4.6所示：表4.6order_master数据表类别ID菜系种类上架时间更新时间CATEGORY_IDCATEGORY_nameCATEGORY_TYPECREAT_TIMEUPDATE_TIME1粤菜12020-04-102020-04-102湘菜22020-04-102020-04-103川菜32020-04-102020-04-10(AUTO)(NULL)(NULL)CURRENT_TIMESTAMPCURRENT_TIMESTAMPproduct_info数据表本表主要用来存储菜品的一些列库存信息以及菜品的价格等，product_info数据表如表4.7所示：表4.7product_info数据表商品ID商品名商品价格库存用料图标地址PRODUCT_IDPRODUCT_namePRODUCT_PRICEPRODUCT_STOCKPRODUCT_DESCRIPTIONPRODUCT_ICON1586488195723776520手撕鸡15.00100材料：鸡肉/element_origin_min_pic/16/10/12/1957fe1a3e209a5.jpg1586488228430419095小炒肉12.00100材料：猪肉、辣椒/sheying/20170703/xiaochaorou_8392431.jpg1586490989737956902口水鸡22.0050材料：鸡肉/upload/20131118/13847834144652.jpg1586491106856997811水煮肉片20.0050材料：猪肉http://05/mobile/20181017/20181017132921_a749be4c24af0771fac72f784d54ba61_1.jpeg1589692161123670215糖醋排骨25.0050材料：猪排骨http://5/images/20180205/479708494b2c4b8c97bfef68011a5260.jpeg1589692317879459615毛血旺20.00100材料：毛肚、鸭血、蔬菜/dr/_390_/t01fe3017ea0dfe2bfa.jpg(NULL)(NULL)(NULL)(NULL)(NULL)(NULL)seller_info数据表与用户业务记录表seller_info相关的模块是外卖业务模块、店内业务模块，用户业务表还可以根据系统的开发情况进行进一步的扩展。用户业务记录表主要记录了用户的活动参与情况、点菜信息、浏览记录等信息。seller_info数据表如表4.8所示：表4.8seller_info数据表订单号用户名密码餐桌号创建时间更新时间IDUSERNAMEPASSWORDOPENIDCREATE_TIMEUPDATE_TIME1(NULL)(NULL)(NULL)CURRENT_TIMESTAMPCURRENT_TIMESTAMPSELLER_IDPHONE(NULL)(NULL)user数据表User主要用千系统登录验证模块一种情况是用户登录系统时进行身份信息验证及密码信息验证，另一情况则是当用户注册时，User表中。user数据表如表4.9所示表4.9user数据表用户ID创建时间餐桌号练习方式人数更新时间IDCREATE_TIMEOPENIDPHONERENSHUUPDATE_TIME(AUTO)(NULL)(NULL)(NULL)(NULL)(NULL)USERNAMEZHUOHAO(NULL)(NULL)5.系统实现5.1管理员登录实现管理员通过输入指定的账号和密码之后，点击登录，如果账号密码输入正确没有错误，则登录成功，反之账号密码输入错误则登录失败。管理员登录效果如图5.1所示：图5.1管理员登录实现@GetMapping("/loginAdmin")publicStringloginAdmin(@RequestParam("phone")Stringphone,@RequestParam("password")Stringpassword,HttpServletResponseresponse){SellerInfosellerInfo=repository.findByPhone(phone);("商家信息={}",sellerInfo);if(sellerInfo!=null&&sellerInfo.getPassword().equals(password)){Stringtoken=UUID.randomUUID().toString();("登录成功的token={}",token);Integerexpire=RedisConstant.EXPIRE;//3.设置token至cookieCookieUtil.set(response,CookieConstant.TOKEN,token,expire);return"登录成功";}else{thrownewSellException(ResultEnum.LOGIN_FAIL);}}5.2查询菜谱列表管理员通过点击列表进行查询后，可以看到菜谱上的所有菜品，商品ID、商品名称、图片、单价、库存多少、对菜品的描述、菜品所在的类目以及它的创建和修改时间这些信息都可以清楚的了解到，一目了然。查询菜谱列表效果如图5.2所示：图5.2查询菜谱列表@GetMapping("/list")publicModelAndViewlist(Map<String,Object>map){List<SellerInfo>categoryList=repository.findAll();map.put("categoryList",categoryList);returnnewModelAndView("admin/list",map);}@GetMapping("/index")publicModelAndViewindex(@RequestParam(value="sellerId",required=false)IntegersellerId,Map<String,Object>map){SellerInfosellerInfo=repository.findBySellerId(sellerId);map.put("category",sellerInfo);returnnewModelAndView("admin/index",map);}5.3更新菜品“管理员可以更新菜品，需要填写符合格式的字段（名称、价格、库存、材料、图片、类目），其中的信息为必填项，如果名称冲突了则添加失败，其他都可以直接填写，填写后后台会将这些字段传到数据库后，将可以直接展示在菜单中，供给顾客进行选择”。更新菜品图如图5.3所示：图5.3更新菜品@PostMapping("/save")publicModelAndViewsave(@ValidSellerFormform,BindingResultbindingResult,Map<String,Object>map){("SellerForm={}",form);if(bindingResult.hasErrors()){map.put("msg",bindingResult.getFieldError().getDefaultMessage());map.put("url","/sell/admin/index");returnnewModelAndView("common/error",map);}SellerInfosellerInfo=newSellerInfo();try{if(form.getSellerId()!=null){sellerInfo=repository.findBySellerId(form.getSellerId());}BeanUtils.copyProperties(form,sellerInfo);repository.save(sellerInfo);}catch(SellExceptione){map.put("msg",e.getMessage());map.put("url","/sell/admin/index");returnnewModelAndView("common/error",map);}map.put("url","/sell/admin/list");returnnewModelAndView("common/success",map);}5.4添加菜品管理员登录进入可以添加菜品，可以添加不同菜系的菜品（例如川菜、湘菜），管理员通过输入菜品名称和类目，点击提交即可生成新的菜品。添加菜品效果图如图5.4所示：图5.4添加菜品List<Integer>categoryTypeList=productInfoList.stream().map(e->e.getCategoryType()).collect(Collectors.toList());List<ProductCategory>productCategoryList=categoryService.findByCategoryTypeIn(categoryTypeList);//3.数据拼装List<ProductVO>productVOList=newArrayList<>();for(ProductCategoryproductCategory:productCategoryList){ProductVOproductVO=newProductVO();productVO.setCategoryType(productCategory.getCategoryType());productVO.setCategoryName(productCategory.getCategoryName());List<ProductInfoVO>productInfoVOList=newArrayList<>();for(ProductInfoproductInfo:productInfoList){if(productInfo.getCategoryType().equals(productCategory.getCategoryType())){ProductInfoVOproductInfoVO=newProductInfoVO();BeanUtils.copyProperties(productInfo,productInfoVO);productInfoVOList.add(productInfoVO);}}productVO.setProductInfoVOList(productInfoVOList);productVOList.add(productVO);}returnResultVOUtil.success(productVOList);}5.5模拟点餐顾客通过微信扫码确认授权登录，进行模拟点餐，顾客挑选好自己想吃的菜系菜品，点击添加进购物车，如有不想添加了可以取消不喜欢和不想吃的菜品。模拟点餐效果如图5.5所示：图5.5模拟点餐@GetMapping("/list")publicModelAndViewlist(@RequestParam(value="page",defaultValue="1")Integerpage,@RequestParam(value="size",defaultValue="10")Integersize,Map<String,Object>map){PageRequestrequest=newPageRequest(1,size);Page<ProductInfo>productInfoPage=productService.findAll(request);map.put("productInfoPage",productInfoPage);map.put("currentPage",page);map.put("size",size);returnnewModelAndView("product/list",map);}6.结