基于微信小程序的点餐系统

申燕萍 何梦磊

摘要：在充分调查和分析当前餐饮行业的点餐模式和传统餐饮APP的运作流程的基础上，针对现代人的生活方式和传统APP的局限性进行分析。随着生活节奏的加快，有时候到餐厅点餐等待吃饭似乎不太尽人意，导致时间的浪费，工作效率的降低。而传统APP又过于臃肿，难以适应针对性。针对该问题，运用WEB开发技术和Nami后台H2数据库，设计了基于微信小程序平台和B/S模式的点餐系统。该系统结合了微信小程序本身的优点，实现了用户登录、在线点餐，生成订单、用户评论、用户投诉等功能。极大的便捷了人们的生活，也是未来信息化时代发展的大势所趋。

关键词：微信小程序；点餐系统；Nami后台；H2数据库

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）04-0062-02

1 背景

隨着全球互联网信息化的发展，基于网络技术的提升，手机大概成了我们每个人都必不可少的通讯工具，而微信这类通讯软件的产生也基本完全代替了传统发短信的方式。

2017年4月24日，腾讯旗下的企鹅智酷公布了最新的《2017微信用户&生态研究报告》。根据这份报告数据显示，截止到2016年12月微信全球共计8.89亿月活用户，而新兴的公众号平台拥有1000万个。微信这一年来直接带动了信息消费1742.5亿元，相当于2016年中国信息消费总规模的4.54%。正因为微信如此庞大的使用人口基数，也间接带动了微信小程序的发展。

2 系统支撑

系统可在任意平台通过微信开发者工具选择微信小程序开发，填入自己的APPID创建项目文件夹即可开始开发。Nami后台是为了适应微信小程序只能发送Request请求的特点，而专门为微信小程序服务端开发的一种容器，使其可以直接通过JavaScript脚本操作数据库。H2数据库是内嵌在Nami后台中的数据库，类似于一般的数据库，用来储存小程序中的数据。

3 系统整体设计

此系统将点餐与互联网相结合，避免了柜面上繁琐的点餐和付款排队环节，让用户可以直观方便地进行点餐和直接使用微信零钱进行付款，相比传统去餐厅吃饭更加人性化，也更加注重用户体验。

系统分为数据库端和微信小程序端。管理模块可以在PC端（数据库端）实现（如图1）。管理模块也可以直接在小程序端实现，就是把管理模块直接嵌入小程序端。只有系统管理员输入正确的管理员账号和密码验证通过之后才能在需要的时候从小程序端进入管理模块（如图2）。

3.1 系统整体架构

系统大致运行架构如图3所示，微信小程序的后台（后称为系统后台）不同于其他语言可以直接操作数据库，系统后台只能发送Request请求，将请求与本地服务器上的JavaScript脚本进行交互，再由JavaScript脚本来操作数据库。PC端再将数据库中的数据显示在页面中。

3.2 功能模块设计

根据分析系统需求和用户需求，系统必须具备如下几个功能模块，用户登录、用户注册、加入购物车、立即购买、生成订单、用户评论、用户投诉等七个模块。

① 用户登录与注册：当用户在系统中没有信息的时候，用户输入信息点击注册既能完成注册，再输入注册的用户名和密码既能完成登录。

② 加入购物车：当用户喜爱某个商品但还并不准备购买的时候，就可以将其加入购物车。

③ 立即购买与生成订单：用户点击购买确认信息付款之后就能生成订单，后台管理员会处理订单。

④ 用户评论：用户可以在系统发表评论模块发表正面的言语，所有用户的评论信息都会显示在一个滚动区域，也可看作是一种聊天方式。

⑤ 用户投诉：用户投诉模块需要验证用户身份是否合法和是否购买过系统商品，符合以上两项才能发表投诉，发表正面言语提交到后台，管理员将会处理用户的投诉。

3.3 数据库设计

根据需求，本系统需要建立六张表：用户信息表、商品信息表、用户购物车表、用户订单表、用户评论表、用户投诉表。在Nami后台的H2数据库中建立以上各表，Nami后台直接架设在服务器上，PC端再通过Request请求和服务器上Nami后台中的JavaScript脚本交互，再由JavaScript脚本操作H2数据库。

4 系统功能实现

4.1 登录界面详细设计

用户登录的流程：用户点击图片登录按钮，出现用户登录界面，用户输入用户名和密码，若用户没有登录，则只能浏览商品不能加入购物车或购买，点击注册的时候，会保存其输入的用户名并使用db.find从USER_DEMO数据表中查找是否存在相同的用户名，存在则会发出提示，提示用户已存在相同用户名的用户，并提示用户输入与之前不同的用户名，密码和用户地址不能为空，当用户名通过db.find查找不到相同用户名即detail返回值为null的时候，点击注册即通过db.exec（INSERT INTO）语句，将用户输入的用户名和密码及地址添加到数据库。注册成功即返回登录界面，再输入其注册的用户名和密码，系统将会保存输入的用户名和密码并通过db.find从数据库中查找与输入的用户名相同的记录，并与数据库中的密码相比较，相同则登录成功，不同则提示密码错误。

4.2 购买界面详细设计

当用户在主界面中看中心仪的商品时，可点击立即购买，提示框显示商品已加入购物车并提示是否立即购买，点击否则只是将商品通过db.exec（inset into）语句操作加入购物车，点击是则会跳转到确认信息界面，确认收货地址收货人，若收货地址有误则能直接对其修改并保存为当前登录用户的详细地址，若收货地址和收货人都没有问题的话就会跳转到付款界面，付款则是直接调用微信自带的付款API调用微信零钱即可付款，付款成功则会加入用户订单。

关键代码示意：

wx.request（{

url： config.Readcommodityurl，

data： {}，

header： { 'Accept'： 'application/json' }，

method： "GET"，

success： function （res） {wx.request（{

url： config.Joinshoopcaturl，

data： {

username： app.globalData.nowloginusername，

userid： app.globalData.nowloginusername，

address： app.globalData.nowloginuserAddress，

commodityid： that.data.commodity.COMMODITYID，

commodityname： that.data.commodity.COMMODITYNAME，

commodityintroduces： that.data.commodity.COMMODITYINTRODUCE，

commodityprice： that.data.commodity.COMMODITYPRICE，}，

header： { 'Accept'： 'application/json' }，

method： "GET"，

success： function （res） {wx.showToast（{

title： '已加入购物车！'，image： '../../images/allimages/smiley.png'，duration： 1500，mask： false，}）}，}）}，}）}}，}）}}，

4.3 購物车详细设计

当用户在主界面将商品加入购物车中之后，点击购物车的tabbar页面，系统则会通过用户名在数据表中查找是否有商品加入了购物车，返回值为null则说明购物车中没有商品，即显示“当前登录用户购物车中没有商品！”，当返回值不为null时，通过db.query将购物车表中的数据全部通过wx：for=””循环显示在购物车界面中，用户可以点击删除商品或直接购买商品，点击删除商品则会通过db.exec（delete）语句将其数据从表中删除，点击立即购买按钮则会直接跳转到与在主界面点击立即购买相同的界面与逻辑。

5 结束语

本系统是通过微信公众开发者工具在windows端完成开发，微信小程序相对于传统APP脱离了平台的限制，即只要完成开发即可在Android端和IOS端都可以访问。

系统将传统点餐模式改进成了基于互联网的线上销售模式，在当今快节奏的生活方式下，不仅节省了人们的时间也加快了互联网时代发展的进程。

参考文献：

[1] 腾讯. 微信小程序开发文档[EB/OL]. https：//mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html.

[2] 杨启， 张丽萍. 从互联网生态看微信小程序的发展[J]. 新闻论坛， 2017（2）：22-24.

[3] 张荣齐， 田文丽. 餐饮连锁企业O2O商业模式研究[J]. 中国市场， 2014（32）：81-88.

[4] 陈琦. 基于Webpy+Apache HTTP Server的微信小程序架构搭建研究[J]. 无线互联科技， 2017（18）：50-51

[5] 林晓艳. 微信小程序的用户体验研究[C]//工业设计研究（第五辑）. 2017： 6.

[6] 刘玉佳. 微信“小程序”开发的系统实现及前景分析[J]. 信息通信， 2017（1）：260-261.