Contact at the end of the article to obtain the source code
Development language: Java
Framework: ssm
JDK version: JDK1.8
Server: tomcat7
Database: mysql 5.7/8.0
Database tool: Navicat11
Development software: eclipse/myeclipse/idea
Maven package: Maven3.3.9
Browser: Google Chrome
Small program framework: uniapp
Small program development software: HBuilder X
Small program running software: WeChat developer
1. Introduction
With the deepening and extensive application of information technology in management, the implementation of management information system has gradually matured in technology. This article introduces the whole development process of the design and implementation of the WeChat mini-program takeaway ordering. By analyzing the shortcomings of the design and implementation management of the WeChat mini-program takeaway order, a computer management scheme for the design and implementation of the WeChat mini-program takeaway order was created. The article introduces the system analysis part of the design and implementation of the WeChat mini-program takeaway ordering, including feasibility analysis, etc. The system design part mainly introduces the system function design and database design.
The design and implementation of this WeChat mini-program takeaway ordering has four roles: administrator, deliveryman, restaurant, and user. Administrator functions include personal center, delivery staff management, restaurant management, user management, dish classification management, dish information management, takeaway order management, order delivery management, order evaluation management, online message management, system management, etc. Delivery staff, restaurants, and users can all register and log in on the WeChat Mini Program. The restaurant role can add, modify, delete, and query dishes on the WeChat applet, review the user's order, check the delivery status and evaluation of the order, and check the complaint feedback and online message. The delivery person role can perform order grabbing operations on the WeChat applet, view order delivery and evaluation information, etc.
User roles can view and query dishes on the WeChat applet, perform payment operations for orders placed by themselves, view order delivery and order evaluation, and collect dishes and other operations. Therefore, it has certain practicality.
The background of this site uses the Java SSM framework for background management and development. You can log in on the browser to manage background data. MySQL is used as a local database. The WeChat applet uses WeChat developer tools to fully ensure the stability of the system. The system has the characteristics of clear interface, simple operation, and complete functions, which makes the design and implementation management of WeChat mini-program takeaway ordering work systematized and standardized.
2. System structure
The designed administrator is mainly to serve some information provided by users. The designed administrator function structure diagram is shown in the following figure:
3. Realization of Mini Program User Module
3.1 System home page
Mini Program users need to register to log in. After logging in, you can search for the name of the dish and view the dish on the homepage, and you can click on other functional modules in the navigation below. The interface is shown in the figure below:
3.2 My menu
Click My in the applet, and the About Me interface will appear, where you can modify personal information and click other function modules. The interface is shown in the figure below:
3.3 Collection and Order
In the product details interface, you can collect and place an order for the product. Click the five-pointed star in the lower right corner of the dish picture to save it, double-click it to cancel it, and click the order button in the lower right corner of the page to place an order. The interface is shown in the figure below:
Fourth, the implementation of the administrator module
4.1 Dishes information management
The administrator can manage the dish information, and can add, modify and delete the dish information. The display of the specific interface is shown in the figure
4.2 Order delivery management
The administrator can query, modify and delete the order delivery. The specific interface is shown in the figure
4.3 Delivery staff management
The system administrator can add, modify, delete and query the information of the delivery staff. The interface is shown in the figure below:
4.4 Restaurant Management
System administrators can add, modify, delete, and query restaurant information. The interface is shown in the figure below:
4.5 User Management
System administrators can add, modify, and delete users. The interface is shown in the figure below:
5. Part of the core code
5.1 Main code of login system
form.on('submit(login)', function(data) {
data = data.field;
if (vue.roles.length!=1) {
if (!data.role) {
layer.msg('请选择登录用户类型', {
time: 2000,
icon: 5
});
return false;
}
} else {
data.role = vue.roles[0].tableName;
}
http.request(data.role + '/login', 'get', data, function(res) {
layer.msg('登录成功', {
time: 2000,
icon: 6
});
// 登录凭证
localStorage.setItem('Token', res.token);
var roleName = "";
if(typeof(jquery('#role:checked').attr('title')) == "undefined") {
roleName = vue.roles[0].roleName;
} else {
roleName = jquery('#role:checked').attr('title');
}
localStorage.setItem('role', roleName);
// 当前登录用户角色
localStorage.setItem('userTable', data.role);
localStorage.setItem('sessionTable', data.role);
// 用户名称
localStorage.setItem('adminName', data.username);
http.request(data.role + '/session', 'get', {}, function(res) {
// 用户id
localStorage.setItem('userid', res.data.id);
if(res.data.vip) {
localStorage.setItem('vip', res.data.vip);
}
// 路径访问设置
window.location.href = '../../index.html';
})
});
return false
});
});
/**
* 跳转登录
* @param {Object} tablename
*/
function registerClick(tablename) {
window.location.href = '../' + tablename + '/register.html?tablename=' + tablename;
}
5.2 User registration main code
*/
@IgnoreAuth
@RequestMapping("/register")
public R register(@RequestBody YonghuEntity yonghu){
//ValidatorUtils.validateEntity(yonghu);
YonghuEntity user = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("yonghuming", yonghu.getYonghuming()));
if(user!=null) {
return R.error("注册用户已存在");
}
Long uId = new Date().getTime();
yonghu.setId(uId);
yonghuService.insert(yonghu);
return R.ok();
}
5.3 The main code of the home page of the Mini Program
methods: {
jump(url) {
if (this.queryIndex == 0) {
localStorage.setItem('indexQueryCondition', document.getElementById("dianyingxinxidianyingmingcheng").value);
}
jump(url)
},
queryChange(event) {
this.queryIndex = event.target.value;
if (this.queryIndex == 0) {
this.dianyingxinxidianyingmingcheng = this.queryList[event.target.value].queryName;
}
}
}
});
layui.use(['layer', 'form', 'element', 'carousel', 'http', 'jquery'], function() {
var layer = layui.layer;
var element = layui.element;
var form = layui.form;
var carousel = layui.carousel;
var http = layui.http;
var jquery = layui.jquery;
vue.baseurl=http.baseurl;
// 获取轮播图 数据
http.request('config/list', 'get', {
page: 1,
limit: 5
}, function(res) {
if (res.data.list.length > 0) {
let swiperList = [];
res.data.list.forEach(element => {
if (element.value != null) {
swiperList.push({
img: http.baseurl + element.value
});
}
});
vue.swiperList = swiperList;
vue.$nextTick(() => {
carousel.render({
elem: '#test1',
width: '89.6%',
height: '500px',
arrow: 'hover',
anim: 'default',
autoplay: 'true',
interval: '3000',
indicator: 'inside'
});
})
// vue.$nextTick(()=>{
// window.xznSlide();
// });
}
});
http.request('news/list', 'get', {
page: 1,
order: 'desc'
}, function(res) {
var newsList = res.data.list;
for(var i = 0; i<newsList.length; i++) {
let d = newsList[i].addtime.split(' ')
d = d[0].split('-')
newsList[i].year = d[0]
newsList[i].month = d[1] + '-' + d[2]
}
vue.newsList = newsList;
if (newsList.length > 0 && newsList.length <= 2) {
vue.leftNewsList = res.data.list
} else {
var leftNewsList = []
for (let i = 0; i <= 2; i++) {
leftNewsList.push(newsList[i]);
}
vue.leftNewsList = leftNewsList
}
if (newsList.length > 2 && newsList.length <= 8) {
var rightNewsList = []
for (let i = 3; i <= newsList.length; i++) {
rightNewsList.push(newsList[i]);
}
vue.rightNewsList = rightNewsList
}
let flag = 10;
let options = {"navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},"slidesPerView":5,"loop":true,"spaceBetween":20,"autoplay":{"delay":3000,"disableOnInteraction":false}}
options.pagination = {el:'null'}
if(flag == 3) {
vue.$nextTick(() => {
new Swiper('#newsnews', options)
})
}
if(flag == 6) {
let sixSwiper = {
loop: true,
speed: 2500,
slidesPerView: 3,
spaceBetween: 10,
centeredSlides: true,
watchSlidesProgress: true,
autoplay: {
delay: 0,
stopOnLastSlide: false,
disableOnInteraction: false
}
}
vue.$nextTick(() => {
new Swiper('#new-list-6', sixSwiper)
})
}
});
// 获取推荐信息
var autoSortUrl = "dianyingxinxi/autoSort";
if(localStorage.getItem('userid')!=null) {
autoSortUrl = "dianyingxinxi/autoSort2";
}
http.request(autoSortUrl, 'get', {
page: 1,
limit: 3 * 1
}, function(res) {
vue.dianyingxinxiRecommend = res.data.list
let flag = 1;
let options = {"navigation":{"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},"slidesPerView":5,"loop":true,"spaceBetween":20,"autoplay":{"delay":3000,"disableOnInteraction":false}}
options.pagination = {el:'null'}
if(flag == 3) {
vue.$nextTick(() => {
new Swiper('#recommenddianyingxinxi', options)
})
}
if(flag == 5) {
vue.$nextTick(() => {
var swiper = new Swiper('#recommend-five-swiperdianyingxinxi', {
loop: true,
speed: 500,
slidesPerView: 5,
spaceBetween: 10,
autoplay: {"delay":3000,"disableOnInteraction":false},
centeredSlides: true,
watchSlidesProgress: true,
on: {
setTranslate: function() {
slides = this.slides
for (i = 0; i < slides.length; i++) {
slide = slides.eq(i)
progress = slides[i].progress
// slide.html(progress.toFixed(2)); //看清楚progress是怎么变化的
slide.css({
'opacity': '',
'background': ''
});
slide.transform(''); //清除样式
slide.transform('scale(' + (1.5 - Math.abs(progress) / 4) + ')');
}
},
setTransition: function(transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition);
}
},
},
navigation: {"nextEl":".swiper-button-next","prevEl":".swiper-button-prev"},
pagination: {"el":".swiper-pagination","clickable":true},
});
})
}
});
});