“掌上食堂”系统的研究与开发

文/朱芃璇 刘子夕 贺陈玉 何沁玮

2016年 9月 21日，微信小程序正式开启内测。小程序是一种无需下载即可使用的应用，它依托于微信，实现了跨安卓和IOS 平台进行使用，同时开发成本较低，用户也不需要下载注册，简化了操作流程。除此之外，小程序还具有非常良好的灵活性，基于微信平台客户可以在微信里聊天进入小程序，也可以在小程序随时切换回聊天，灵活快捷。小程序也可以在微信、在APP 各种环境下打开使用。基于小程序在多平台的灵活操作，小程序线上线下推广都十分便捷，它拥有多种分享方式，能够有效的打通传统线下使用场景与线上的完美结合，比如它可以在微信公众号，附近小程序，线下等都可以进行推广。在小程序所具有的这一系列优势的基础上，我们把小程序与食堂信息二者的特性结合起来进行开发，极大的提高了学生对食堂各类信息的了解程度以及提供了一条便捷的途经给食堂管理人员来收集对学生对菜品种类的偏好信息。最终，该项目获批省级大学生创新创业项目。

1 系统设计

掌上食堂系统主要包括系统的管理员后台功能设计，前端用户功能设计（完整系统功能见图1），系统的数据库设计。

1.1 管理员后台系统功能模块设计

图1：系统功能设计图

管理员后台功能设计包括添加、删除管理员账号，添加菜品，管理会员这四个功能。添加管理员账号后，每个食堂的管理员可以根据食堂的分类直接上传各个食堂对应的菜品信息。针对会员管理，如果用户在使用过程中对菜品进行恶意评论，管理员可以直接禁掉该用户的账号。后台管理员操作用户流程图如图2所示。

1.2 前端用户功能设计

小程序的下栏包括了“首页”，“购物车”，“我的”三个栏目。在首页用户可以直接查看每个食堂每天对应的菜品，在搜索栏中根据关键字搜索对应的菜品，点击菜品图标进入菜品详情页面可以看到该菜品对应的评论。菜品的详情页面包括了加入购物车和立即购买这两个服务，用户可以将当日的菜品提前加入购物车，到食堂开放时间时即可直接下单进行购买或是不添加购物车直接购买。点击“购物车”栏目即可直接看到已经放在购物车中的菜品，上面有对应的金额，订单号和对应的下单时间。“我的”一栏点击后可以看到“我的订单”，“我的收货地址”，“我的评价”三个功能，在“我的订单”中可以看到订单信息，包括待付款，待发货，待收货，待评价，已完成，已关闭留个栏目。如果用户提交订单后在五分钟内不进行付款则订单自动关闭。交易完成后用户可以对所选够的菜品进行评论，评论将实时反馈到前端展示给所有用户。在“我的收货地址”这个功能中可以添加学生对应的宿舍地址信息。“我的评价”一栏可以直接看到针对不同菜品的评论和评分。

图2：管理员删除用户操作流程图

1.3 系统数据库设计

数据库包括管理员表，管理员操作记录表，管理员操作报错信息表，会员表，会员信息认证表，食品表，食品分类表，食品库存对应表，会员地址表，会员记录表等，数据库之间通过关键字段进行链接，成功地完成了数据的存储和读取。

2 系统实现

2.1 后台系统实现

后台系统使用Python Flask 代码编程和MySQL 数据库进行实现，通过代码完成对后台界面的部署以及后台信息记录的创建和提交。管理员可以在后台进行用户的管理，选择对应的菜品进行展示，并且查看每个菜品对应的变更信息。后台架构如图3所示，后台页面总览如图4所示。

表1

图3：后端架构

2.2 前端功能的实现

前端界面显示如图5(a)和图5(b)所示所示。

2.2.1 菜品查看功能

前端实现了菜品查看，菜品订单每个菜品包含了菜品名称，价格，库存，分类，图片等信息已经存在数据库中的food 表中，后端构建查询语句查到数据库中存储的信息将结果发送回前端，前端js 对时间进行处理后将返回的结果在wxml 中进行展示，wxss 对wxml 中的标签信息进行渲染。

2.2.2 菜品支付功能

我们在菜品详情界面设计了一个提交事件，点击后返回对应的数据字段，在js 列表里进行处理之后将数据返回给后端，再由后端把支付状态存储数据库中。

2.2.3 菜品评论功能

菜品完成支付之后即可通过“去评论”按钮进入到菜品评论界面对菜品进行评论并提交，评价表单如图6所示。

2.2.4 收货地址功能

在“我的”栏目中可以看到“我的收货地址”，点击进入之后可以看到对应的编辑页面，使用微信的数据字段获取方法，可以将填入表格中的信息传入到后端，存储到数据库中后再调出到前端进行渲染即可展示，如图7所示。

2.2.5 查看“我的评价”功能

用户对菜品进行评论后可以查看自己的所有评论，前端获取用户的id 字段返回后端，由id 查询出对应的评论（包括对应的评论对应的菜品，评论日期等）信息。

2.3 测试

通过对“掌上食堂”各个功能进行测试，我们得到了如表1所示的测试结果。

3 结论

随着微信小程序的发展，它的市场占有率不断提高，发展前景较好。小程序所具有的优秀特点可以帮助开发者以较小的开发成本在最短的时间内开发出符合需求的程序。

本次微信小程序完成了从后端管理员控制台到前端菜品信息的展示与菜品支付一套完整的api 开发，在今后的学习中会根据用户需求的变更以及小程序代码的更新来不断完善小程序，给用户提供更多更实用的功能。

图4：管理员后台页面总览图

图5：前端页面显示图

图6：菜品评论单

图7：收货地址编辑显示图