54 | 电子制作 2019年12月
小程序的快速发展。
衣食住行是人们一生中最基本的四件事，而“民以食
为天”这句话也说明了饮食在中国人心中的地位。根据公开得到的数据，2018年中国外卖用户规模较2017年增长17.4%，达到3.58亿人，总订单量约108亿单，我们可以得出人均一年外卖的频率约为30次。所以整个外卖平台消费市场环境极为可观。网上订餐成为了人们的一种生活方式。通过网上订餐，人们可以足不出户，便捷购买到自己想要的食物，这种点餐软件不影响使用者的生活，同时还能给使用者带来方便，简化点餐的程序，也为很多的商家提供了商机。这种基于小程序的点餐系统能够让用户随时随地搜索附近的商家，查看点餐的信息，
满足了大多数人对于点餐的需求。本软件主要用于外卖点餐，前端使用了小程序，使得视图简洁美观，后端使用了Java 的Springboot 与MySQL 的数据库保证了餐厅数据和用户点餐数据，商家信息与用户数据的保密，不
可篡改性。
1 开发平台和环境
操作系统：App
编程开发环境：开发者工具
编程语言：JavaScript 应用技术：小程序API
本小程序开发平台为Stable
软件界面设计全部使用小程序自带框架、组件、API 等。小程序是一种全新的连接用户与服务的方式，它可以在内
被便捷地获取和传播，同时具有出的使用体验。
2 点餐系统整体设计及各模块功能
■2.1 系统整体设计
系统主要实现网上用户管理、餐品信息浏览、获取商家、
选择菜品、菜品评分、选择菜品、编写订单、选择吃饭时间、订单支付、手机号绑定、意见反馈、订单查询、获取订单状态、取消订单、退出系统等模块。系统处理流程为：当客户进入美食天下点餐小程序时，在主页面中分类显示最新的餐品信息，能够快速查询特定餐品信息。当客户选择预定
某项餐品时，能够将对应餐品信息（如价格、数量等）传送
软件开发
查看订单明细并做相关处理。美食天下点餐小程序的功能结构如图1所示。
■2.2 功能模块设计
根据用户展示模块的功能需求以及特点，根据分析系统需求和用户需求，系统必须具备如下几个功能模块：我的模块、会员模块、手机绑定模块、商家详情模块、订单支付模块等模块。
(1)我的模块：此模块展示了用户的个人信息：用户头像，名称，配送地址等。
(2)会员模块：此模块支持用户会员的开通，会员模块展示了用户的个人信息，用户登录小程序后，会自动获取信息判断是否是会员。展示会员的一系列会员优惠活动。
(3)手机绑定模块：此模块支持绑定手机号，这一操作方便送餐员及时联系用户，进行送餐情况信息的转达，使得餐品可以更快更高效的送至用户手中。
(4)商家详情模块：此模块显示商家信息详情，包括商家商品的展示、每件商品价格等。
(5)订单支付模块：用户在小程序中选择商品生成订单后，则会跳转至订单支付模块。模块上方展示了订单列表用户商品下单信息和所需的金额，除此之外也可以指定送餐时间、会员红包的使用、订单备注功能，备注用户的口味偏好等。
■2.3 数据库设计
根据需求，本系统需要建立十张表：（1）用户信息表（user）：（用户编号、身份证号码、电话、地址、生日、最后登录日期）；（2）制度表（order）：（编号、用户编号、制度编号、价格、创建时间、支付时间、食物时间、降序、类型）；（3）食物制度表（order_food）：（编号、用户编号、食物编号、制度编号、统计、库存量降序）；（4）食物表（food）：（编号、购物编号、名字、降序、
图片、价格）；（5）食物库存量表（food_sku）：（编号、食物编号、库存量编号）；（6）库存量表（sku）：（编号、名称）；（7）库存量降序表（sku_desc）：（编号、库存量编号、降序）；（8）购物表（shop）：（编号、名称、降序、价格）；（9）管理表（admin）：（编号、食物编号、密码、降序）；（10）意见表（suggestion）：（编号、用户编号、降序、创建时间）。
在后台的数据库中建立以上各表，java后台直接架设在服务器上，小程序端再通过wx.Request( )请求和服务器上java后台中的servlet 交互，再由JDBC操作MySQL数据库。3 系统功能实现
■3.1 我的模块详细设计
我的模块模块中使用wx.getStorageSync()获取本地存储获取用户id，根据获取的用户id用来加载指定用户昵称手机号码等信息，具体实现：
var that=this;
app.globalData.userInfo=res;
this.setData({
nickName:res.nickName, avatarUrl:res.avatarUrl,
});
})
onLoad(){
var StorageSync(‘userId’); quest({
url:‘/user/’+userId
}).then(res =>{
var phone=res.phone;
this.setData({
phone
})
})
}
使用UserInfo( )获取到用户信息后赋值给nickName，avatarUrl渲染到页面整个渲染过程只需在wxml中实现，展示用户头像，名称等。模块提供了用户手机号码的绑定和更换功能和对小程序的意见反馈。用户的体验意见是宝贵的，小程序也会根据用户的反馈信息进行更完善的改进。显示效果如图2所示。
图2 我的模块
■3.2 会员模块详细设计
美食天下小程序支持用户会员的开通，会员模块展示了用户的个人信息，用户登录小程序后，会自动获取用户信
www�ele169�com | 55
56 | 电子制作 2019年12月
App.globleData.userInfo=res;This.setData({nickName:res.nickName,avatarUrl:res.avatarUrl,});
}else{that.setData({Membet:false
})}})
}未开通会员的用户，会员模块会展示开通会员功能，会员开通后，会免费赠送用户一定数量的优惠券。提供用户更佳的使用体验。显示效果如图3所示。
食谱美食菜谱小程序图3 会员模块
■3.3 手机绑定模块详细设计
小程序绑定手机号操作时，会先使用正则表达式/^[1]
[3,4,5,7,8][0-9]{9}$/验证手机号码格式是否正确，发送验证请求后，使用(new Date()).getTime()获取当前赋值给newSMSTime，判断六十秒之内不允许第二次发送验证的
请求，预防用户频繁发送验证请求，验证通过后，给用户手this.setData({warning:true,
warningMsg:‹你输入的手机号码错误，请重新输入›})}
这一操作方便送餐员及时联系用户，进行送餐情况信息
的转达，使得餐品可以更快更高效的送至用户手中。显示效果如图4所示。
图4 手机绑定模块
■3.4 商家详情模块详细设计
图5所展示的是商家信息详情页，点击任意商家，即
可进入商家信息详情页，进入详情以为会在onLoad（）生命周期函数中，页面加载前获取商家详情，请求成功后返回
菜单数据res，然后赋值给shopName，shopDesc 等变量进行页面渲染。一般的 H5 页面基本都是通过大量的 DOM 操作来实现。小程序其实跟 vue.js 的用法非常像，在视图层内部分装了很多框架，整个渲染过程只需在 wxml 中实现。 其内容包含商家商品的展示、每件商品价格等。用
户可在心仪的商品右侧点击加号，即可添加到购物车中。也可点击左下角购物车图标，点击后会展示用户选择的所有商品信息，满意后即可点击右下角生成订单，模块不仅为用户提供商品信息，下单功能，还提供商品评价信息，可以浏览
软件开发
评价信息，货比三家，在进行下单付款。在小程序开发平台 提供了很多小程序的 API，我们可以利用网络发送请求来 连接后台外卖数据 API 接口。具体操作如下：onLoad:function(options){
var{id:shopId}= options;
url:‹/shop/›+shopId
}).then(res=>{
var{foods:shopFoodsList,name:shopName,desc: shopDesc}=res
this.setData({ shopName,
shopDesc, shopFoodsList
})
})
},
显示效果如图5所示。
图5 商家详情模块
■3.5 订单支付模块详细设计
用户在商户小程序中选择商品，生成订单后，使用wx.navigateTo()API跳转至订单支付模块，跳转地址为 url: «/pages/orderPay/orderPay»,。模块如图6所示，模块上方展示了订单列表用户商品下单信息和所需的金额，除此之外也可以指定送餐时间、会员红包的使用、订单备注功能，备注用户的口味偏好等。点击模块右下角提交订单时，会查询用户是否绑定过手机号，如果有则会跳转至App进行订单支付操作，下单时，向服务器获取prepay_id，调用小程序API发送wx.request( )请求，由于携带数据较多，使用POST方法发送请求。下单成功与否会返回res数据，下单失败时，调用ssage提示用户失败信息。用户可在页面中对口味喜好进行备注，或是选择会员红包抵扣支付金额，具体实现：
utils.checkPhoneLogin(function(isLogin){
console.log(orderToSubmit);
if(isLogin){
}).then((res)=>{
if(res&&de===200){
var{appid:appId,nonce_str:nonceStr,prepay_id, sign,timeStamp}=der;
wx.switchTab({
url:‹/pages/order/order›,
success(e){
var page=getCurrentPages().pop();
if(page==undefined||page==null)return; Load();
}
});
getApp().derToSubmit=null; },
})
}else{
wx.showModal({
title:‹提示›,
ssage,
})
}
})
}
else {
derToSubmit= orderToSubmit; wx.navigateTo({
url:‹/pages/phoneBinding/phoneBinding?title=手机号码绑定›
})
}
})
}
显示效果如图6所示。
■3.6 本软件相关配置文件
本软件相关配置文件如图7所示，在配置文件中配
www�ele169�com | 57
navigatorBarTextStyle、BackgroundTextStyle
图6 订单支付模块“window”:{“backgroundTextStyle”:“light”,“navigationBarBackgroundColor”:“#ff3854
”,“navigationBarTitleText”:“美食天下”,“navigationBarTextStyle”:“white”
},
“tabBar”:{
“color”:“#8a8a8a”,“selectedColor”:“#ff3854”,“borderStyle”:“white”,“backgroundColor”:“#fff”,“list”:[
{“selectedIconPath”:“assets/icons/index_active. png”,
“iconPath”:“assets/icons/index_normal.png”,“pagePath”:“pages/shop/shop”,“text”:“首页”
},
{“selectedIconPath”:“assets/icons/order_active. png”,
“iconPath”:“assets/icons/order_normal.png”,“pagePath”:“pages/order/order”,“text”:“订单”4 结束语
本系统设计了一个基于小程序的点餐系统，使用wx.request()方法发请求获取用户信息数据，使用小程序API实现各项功能的操作，比如用户返回顶部，加载更多商家商品等，将用户搜索商家、商品历史记录通过wx.setStorageSync()保存到本地，使用JavaScript编程语言实现页面上的动态效果，使页
面内容更加生动。此点餐系统可实现一键买单，个人信息修改等操作；通过商家认证的用户还可进行菜品管理以及账单管理等操作。
参考文献
＊ [1]徐玲利，李唯.在线点餐系统的设计与实现[J].电脑知识与技术, 2018(31)
＊ [2]何梦磊，申燕萍.基于小程序的点餐系统[J].电脑知识与技术, 2018(14)
＊ [3]李俊，边思.小程序：开发入门及案例详解[M].北京：机械工业出版社, 2017.
＊ [4]陈琦.基于Webpy+Apache HTTP Server的小程序架构搭建研究[J].无线互联科技, 2017(18) : 50-51
＊ [5]林晓艳.小程序的用户体验研究[C].工业设计研究（第五辑）.2017 : 6.
＊ [6]刘玉佳.“小程序”开发的系统实现及前景分析[J].信息通信, 2017(1) : 260-261.
＊ [7]张勇.基于Android的智能点餐系统设计[J].电子测试, 2017(22) : 71-72.
58 | 电子制作 2019年12月
发布评论