一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第1天,点击查看活动详情。
点餐小程序的设计与实现(一)
第一章 需求分析
由于互联网的飞速发展,微信这个在年轻人一代被广泛应用的软件慢慢进入了老年人的视野,而小程序是一种无需下载,安装即可用的应用,使系统能够更加方便快捷。微信小程序成了线上线下的重要枢纽。由于互联网的飞速发展,饭店的点餐也要进行时代化的创新,由以前的人工点餐到现在的系统点单,大大减少了人力资源的应用
§1.1 课程设计题目介绍
随着国人生活水平的不断提高,人们的生活方式不再仅限于普通的衣、食、住、行等物质方面的提高,而是在精神方面也追求有一个质的突变。于是在饮食方面,许多人选择线上点餐。而微信点餐小程序开发使系统能够更加方便快捷,同时也促使微信小程序变得更加系统化、有序化。系统界面较友好,易于操作。
§1.2 课程设计任务及要求
在当下这个发展快速的信息化时代,越来越多的线上点餐平台开始建立或者已经使用起点餐服务系统,利用计算机和网络对信息进行管理已是大势所趋。小程序主要是采用java语言技术和mysql数据库来完成对系统的设计。整个开发过程首先对微信点餐小程序进行需求分析,得出微信点餐小程序主要功能。接着对微信点餐小程序进行总体设计和详细设计。总体设计主要包括小程序功能设计、小程序总体结构设计、小程序数据结构设计和小程序安全设计等;详细设计主要包括微信点餐小程序数据库访问的实现,主要功能模块的具体实现,模块实现关键代码等。最后对微信点餐小程序进行了功能测试,并对测试结果进行了分析总结,得出微信点餐小程序存在的不足及需要改进的地方,为以后的微信点餐小程序维护提供了方便。
§1.4 性能需求
1.正确性需求
管理员应能够进行有关的旅游信息准确地添加到数据库中。系统用户登录后,系统应能正确地读取用户个人信息以及用户的权限信息。系统的操作结果与预期的结果应该是一致。
2.安全性需求
系统登录需要输入用户名、密码,并且需要防止 SQL 注入问题,用户登录后根据用户角色的不同可以访问的权限应该不同。为了防止用户未授权访问了不该访问的功能,系统需要在客户端和服务端设置权限拦截。
3.及时性需求
即时可见:对旅游信息的处理(包括添加、删除、修改)将立即在后台数据库中进行更新,达到“即时操作、即时生效”的功能
4.稳定性需求
系统部署后,在硬件条件和支持软件条件没有变化的情况下,能够一直保持运行状态,直到系统被升级或代替。
5.扩展性需求
系统应该支持功能扩展与支持环境的扩展。 功能扩展就是在现有的功能模块的基础上可以添加信息的功能模块。
6.故障处理能力需求
系统可能遇到的软件故障是数据库与应用程序服务器。为了满足信息处理的需求,可以采取数据恢复来解决。
§1.5 功能需求
首页登录、注册、修改密码等功能。
主页:登陆成功后自动跳转。可以实现背景音乐的播放停止。
每日推荐:轮播图、冰饮、套餐可跳转到商品详情进行商品加购等。
分类:商品列表,点击可跳转到商品详情进行商品加购等。
门店地址:该页面采用map组件提供在线地图,单击导航图片可定位门店位置。
我的:包括我的订单、待付款、待发货、待收货、已完成、购物车等功能,点击购物车可查看自己加购的菜品以及价格。
小程序代码如下:
app.js
App({
globalData: {
selectGoods: []
},
getUserInfo: function (cb) {
var that = this
if (this.globalData.userInfo) {
typeof cb == "function" && cb(this.globalData.userInfo);
} else {
//调用登录接口
wx.login({
success: function (res) { // 获取用户openid
let code = res.code;
wx.getUserInfo({
success: function (res) {
let r_data = {};
r_data.code = code;
r_data.encryptedData = res.encryptedData;
r_data.iv = res.iv;
// wx.request({
// url: 'https://xxx',
// header: { "content-type": "application/x-www-form-urlencoded" },
// method: 'post',
// data: r_data,
// success: function (res) {
// console.log(res)
// },
// fail: function (res) {
// wx.showModal({
// title: '提示',
// content: 'error:网络请求失败',
// showCancel: false
// })
// return false;
// }
// });
that.globalData.userInfo = res.userInfo;
typeof cb == "function" && cb(that.globalData.userInfo);
}
});
}
});
}
}
});
复制代码
dl.wxml
<!-- 背景图片 -->
<image class="bg" src="/images/meishi.jpg" />
<view id="total">
<!--
<image class="zhu" src="/images/1.png"></image>
-->
<form bindsubmit="create_login">
<view id="t1">
<text>账号</text><input type="text" name="username" id="use" placeholder="输入您的账号" value="{{username}}"></input>
</view>
<view id="t2">
<text>密码</text><input type="password" name="password" id="pass1" placeholder="输入您密码" value="{{password}}"></input>
</view>
<view id="t3">
<text>手机号后四位</text><input type="password" name="phone" id="pass2" placeholder="输入您的手机尾号" value="{{phone}}"></input>
</view>
<button bindtap="goto_index" id="btn1" form-type="submit"><text>登陆</text></button>
</form>
<button bindtap="goto_zhuce" id="btn2"><text>注册</text></button>
<button bindtap="goto_update" id="btn3"><text>忘记密码</text></button>
</view>
复制代码
dl.js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
username: '',
password: ''
},
onLoad: function (options) {
console.log(options)
wx.getUserInfo({
success: this.setUserInfo.bind(this)
})
this.setData({
})
},
setUserInfo: function (res) {
this.setData({ user: res.userInfo })
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
create_login: function (e) {
console.log(e.detail.value)
wx.request({
url: "http://localhost:8080/WX/login?username=" + e.detail.value["username"] + "&" + "password=" + e.detail.value["password"] + "&phone=" + e.detail.value["phone"],
//url地址为后端代码的位置需修改
data: e.detail.value,
success: this.getResult.bind(this)
})
},
getResult: function (res) {
console.log(res.data);
if(res.data == "true"){
wx.showToast({
title: "登录成功",
duration: 2000
})
wx.switchTab({
url: '/pages/index1/index1',
})
setTimeout(function () {
wx.navigateBack({
delta: 2
})
}, 1000)
}
if(res.data == "false"){
wx.showToast({
title: "账号或密码不对",
icon: 'none',
duration: 3000
})
setTimeout(function () {
wx.navigateBack({
delta: 2
})
}, 1000)
}
},
goto_index:function(res){
},
goto_zhuce: function (res) {
wx.navigateTo({
url: '/pages/zhuce/zhuce',
})
},
goto_update: function (res) {
wx.navigateTo({
url: '/pages/update/update',
})
}
})
复制代码
主页面图片展示:
尾言
这是课设的前端部分代码以及部分报告,如果觉得还不错的话,欢迎点赞收藏哦