Contact at the end of the article to obtain the source code
Development language: Java
Framework: Spring Boot
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 increase of courses, students' choice is getting bigger and bigger. Most schools now use the method of selecting courses by students to report to the teacher, and the teacher is responsible for sorting out. This method is inefficient and inflexible, and the limited number of applicants for each course makes it difficult for teachers to organize statistics. At present, the development of the Internet is mature, and class management systems are emerging one after another. If there is a professional management system that provides online course selection, it can help teachers and students.
This course selection system based on SpringBoot+Vue is designed with small program technology, the language is JAVA, and the database is MySQL. Adding Vue to the technology makes the interface richer and more friendly. This system is developed for students to choose courses, and the roles used are administrators, students, and teachers. Students can browse courses in the interface to select and withdraw courses, query teaching videos, posts, etc. by logging in. Administrators can manage student information, course information, teacher information, forum exchange information, student course selection information, course withdrawal information, etc. Teachers can manage teaching videos, course information, and manage students' course selection, withdrawal, message consultation, etc. In this system, students can learn more about the content of the course, be responsible for the teacher, and have strong flexibility, which is very helpful for students to choose courses.
2. Detailed implementation of the interface of the student function
2.1 Realization interface of personal data management function
Students can modify their personal data to ensure correctness. The implementation interface of the student modification personal data management function is shown in the figure below
2.2 Realization interface of online course selection function
In this function, students can query course information, and can see information such as the responsible teacher and credits of the course. Then you can choose courses. The implementation interface of course selection management function is shown in the figure below
2.3 Implementation interface of message consultation function
Students can ask questions from teachers. The implementation interface of the message consultation function is shown in the figure below:
2.4 Realization interface of forum exchange management function
Students can post and manage their own posts. The implementation interface is shown in the figure below:
2.5 Implementation interface of teaching video management function
Students can view video information and collect, comment, and consult. The implementation interface is shown in the figure below:
2.6 Realization of the function of students withdrawing from class
You can also withdraw from the course if you find that the course you choose is not suitable for you. The implementation interface of the online withdrawal function is shown in the figure below:
3. Realization of administrator function interface
The administrator is the highest authority in the system and is responsible for the management and review of all information in the system. Including student information, course information, course selection information, etc.
3.1 Realization of user login interface
The purpose of this function design is to help the system to verify the identity and ensure the security of the system. Elements in the user login function interface include buttons, list boxes, text, pictures, etc. The user input box, password input box, and permission list box are all displayed on the left. The implementation interface of the user login interface is shown in the following figure:
3.2 Realization interface of personal center management function
In the personal center management function, administrators can modify personal information and modify the current login password. The implementation interface of the function of modifying personal information is shown in the figure below:
3.3 Realization interface of course information management function
After logging in, the administrator can publish new courses, delete unused courses, and modify wrong courses in the course information management function. The implementation interface for administrators to add course information is shown in the following figure:
3.4 Realization interface of teacher information management function
Administrators can add teacher information in this function, and can assign accounts and passwords to teachers to help teachers use the system. When teachers resign, administrators can delete teacher information in time to prevent leakage of system content. The implementation interface of the administrator's query teacher information function is shown in the figure below:
3.5 Realization interface of student information management function
Administrators can add student information and query student information. After adding student information, students can modify their own information. The implementation interface of the administrator querying student information function is shown in the following figure:
3.6 Realization interface of forum exchange management function
Admins can also edit and delete forum communications to moderate student posts. The implementation interface of the administrator's query forum exchange information function is shown in the following figure:
3.7 Realization interface of teaching video management function
The administrator can query the teaching videos set by the teacher, and can modify, add and delete them. The implementation interface of the administrator's query teaching video function is shown in the figure below:
3.8 Realization interface of student course selection management function
The administrator can also check the details of the students' course selection and modify, delete, and query. The implementation interface of the student course selection function is shown in the following figure:
3.9 Implementation interface of student withdrawal management function
This function is a part of course selection management. Administrators can query and analyze students' withdrawal information. The implementation interface of the student withdrawal management function is shown in the figure below:
4. Detailed implementation interface of teacher function
The main functions of teachers are to review students' course selection, withdraw from courses, and publish teaching videos. The implementation interface of the teacher function 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},
});
})
}
});
});