54  |  电子制作    2019年12月
月活动用户达到8.06亿,同时也直接带动了信息消费1742.5亿。因此,有如此庞大的用户,也促使了
小程序的快速发展。
衣食住行是人们一生中最基本的四件事,而“民以食
为天”这句话也说明了饮食在中国人心中的地位。根据公开得到的数据,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月

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。