Contact at the end of the article to obtain the source code
Development language: Java
Framework: springboot
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
There are still relatively few WeChat mini-programs on tourism information management in the market today, so this topic wants to collect and classify so many tourist attractions today. In this way, we can better recommend and share places suitable for travel to friends who like to travel.
The front end adopts the Vue architecture, which greatly reduces the page number and has a clear structure. The background presentation layer adopts the SpringBoot framework. SpringBoot is a module used in Web development in the Spring family. SpringBoot is used as a model and data interaction controller, which is highly configurable, flexible and scalable. In addition, the background also The MyBatis framework is used as an excellent persistence layer framework. In addition, the database uses MySQL. MySQL and Java integration are relatively good, suitable for background databases of Windows applications, and MySQL has high security performance, and has outstanding performance in database encryption and enhanced passwords.
The WeChat applet travel sharing platform management system mainly has the following major functions: user management function, travel information sharing function, food management function, hotel management function, scenic spot management function, and ticket purchase management function, which will be introduced in the following chapters. The role and realization of each function.
2. Demand analysis
By understanding the needs of users, we can know that a system with simple operation is more likely to be favored by users, and at the same time, it can manage information accurately and completely. After analyzing the demand, the small program travel sharing platform concluded that the system mainly has functions such as user management, travel sharing information, food management, hotel management, scenic spot management, and ticket purchase management.
2.1 General overview of the system
The project management system mainly
Based on the B/S design mode, the system design functions include: user management function, scenic spot management function, scenic spot type management function, hotel management function, ticket purchase management function, travel agency management function. Its system structure is shown in the figure:
2.2 Functional requirements
This system uses modern computer network technology to integrate traditional information propaganda methods, and is designed and completed according to the practical process. At the same time, the service is improved, and a small program travel sharing platform is initially designed to facilitate related business operations. In order to make the system play a greater role in various managements and realize efficient management of computerized information, the functional requirements of the development target are introduced as follows:
(1) Administrator login module
The administrator has the right to manage the mini-program travel sharing platform system, but all registration and use of permissions must be authorized by the super administrator. After entering the homepage, the administrator can authorize employees with related functions, such as: user management function , Travel information sharing function, food management function, hotel management function, scenic spot management function, ticket purchase management function.
(2) Gourmet management module
Administrators with certain management rights can view the food list, as well as add, delete, modify, and query corresponding food.
(3) Hotel management module
Administrators with certain management rights can view the data of the hotel list, as well as add, delete, modify, and query the corresponding hotels.
(4) Tourism sharing management module
Administrators with certain management rights can view and query the data of the travel sharing list.
(5) Attraction management module
Administrators with certain management rights can view the data of the attractions list, as well as add, delete, modify, and query the corresponding attractions.
(6) Ticketing management module
Administrators with certain management rights can view the data of the ticket purchase list, as well as add, delete, modify, and query corresponding purchase tickets.
2.3 System Architecture Design
The overall architecture of the system is as follows:
3. Realization of WeChat mini-program functions
3.1 User login system
After the user logs in to the WeChat mini-program of the travel agency, the user can view the scenic spot information on the WeChat mini-program of the travel agency, observe and compare, and select the scenic spot that he thinks he wants to visit. The user's login request will reach the control layer, The asynchronous request is sent by Ajax, and then the business logic layer will receive the request sent by the control layer. On this basis, the system will let the business logic layer access the system database of the WeChat applet of the travel agency through the call of the DAO layer, and Insert from it, and finally return the result.
The effect achieved is as follows:
3.2 Homepage
After the WeChat applet enters the correct account password, it will enter the homepage display interface by default. The homepage mainly has a carousel image, a search box, and the navigation below as the main components.
3.3 Attraction Information
3.4 mine
Fourth, the administrator background function realization
4.1 Login
4.2 Travel agency management
4.3 Managers add scenic spots
Managers add operations to scenic spots. When managers perform operations, the operation requirements will reach the control layer. The sending of asynchronous requests is completed by Ajax, and then the business logic layer will receive the scenic spot information related requests sent by the control layer. Here Basically, the system will let the business logic layer access the system database of the travel agency WeChat applet through the call of the DAO layer, perform insertion from it, and finally return the result.
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},
});
})
}
});
});