WeChat Mini Program for Math Tutoring Based on WeChat Mini Program

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 

The wide application of the network has brought great convenience to life. Therefore, the math tutoring management is combined with the current network, and the Java technology is used to build a WeChat applet for math tutoring to realize the informatization of math tutoring. It can play a lot of role in further improving the development of mathematics tutoring management and enriching the experience of mathematics tutoring management.

The WeChat Mini Program for Math Tutoring can be widely and comprehensively publicized through the Internet, so that as many users as possible can understand and be familiar with the convenience and efficiency of the WeChat Mini Program for Math Tutoring , which not only provides services for the masses, but also promotes itself, allowing more The masses know themselves. For mathematics tutoring , if you have your own system , you can get better management through the system and improve your image at the same time.

The status quo and trend of this system design, from the design of requirements, structure, database, etc. to the realization of the system, are the realization of administrators and users respectively . The content of the thesis shows the development process from the aspects of system design, description, implementation, analysis and testing . This system chooses a feasible development plan according to the actual situation , realizes all the functions of the system with the help of java programming language and MySQL database , and then tests the system to see if there are loopholes in the system and test user permissions to improve the system, and the final system Complete to the relevant standard.

2. Functional analysis

Considering the needs of mathematics tutoring management in real life and the careful analysis of the system, the system authority is divided into two types of users involved, administrators and users.

(1) Administrator functional requirements

After the administrator logs in, it mainly includes home page, personal center, user management, learning center management, knowledge classification management, study weekly report management, oral arithmetic practice management, test question management, system management, test management and other functions. The administrator use case diagram is shown in the figure 

(2) User functional requirements

After logging in, the user enters the homepage of the mini program, and can realize the homepage, learning center, exam, mine, etc. On the my page, you can perform detailed operations on functions such as personal center, study weekly report, my collection management, exam records, and wrong question books. The user use case diagram is shown in the figure

2.1 Functional structure

In order to better clarify the overall thinking of the system, the system is expressed in the form of a structure diagram. The function structure diagram of the design and implementation of the mathematics tutoring WeChat applet is as follows:

3. Small program terminal

3.1 Login

The user enters the account and password, selects the role and clicks to log in to enter the system for operation, as shown in the figure

3.2 User registration

On the registration page, user registration is performed by filling in account number, password, confirmation password, name, gender, age, mobile phone and other information; as shown in the figure 

3.3 Learning Center

On the learning center page, you can view the knowledge name, knowledge type, cover, grade, upload date, number of clicks, knowledge introduction and other information, and make comments or collection operations as needed; as shown in the figure 

3.4 Users

On my page, you can operate detailed information such as personal center, study weekly report, my collection management, exam records, and wrong question books, as shown in the figure 

3.5 User Information

On the user information page, save or log out by filling in detailed information such as account number, password, name, gender, age, mobile phone, and avatar, as shown in the figure 

4. Administrator function module

Administrator login, the administrator enters the account number, password, selects the role and clicks Login to perform the system login operation, as shown in the figure 

4.1 Homepage

After the administrator logs in to the system, he can perform corresponding operations on the home page, personal center, user management, learning center management, knowledge classification management, learning weekly report management, oral calculation practice management, test question management, system management, and test management, as shown in the figure 

4.2 User Management

On the user management page, you can perform operations such as details, modification or deletion of index, account number, name, gender, age, mobile phone, avatar, etc., as shown in the figure 

4.3 Learning Center Management

On the management page of the learning center, you can perform details, modify, view comments or delete operations on the index, knowledge name, knowledge type, grade, analysis video, upload date, knowledge picture, etc., as shown in the figure 

4.4 Knowledge classification management

On the knowledge classification management page, you can modify and delete the index, type and other content, as shown in the figure 

4.5 Learning Weekly Report Management

On the learning weekly report management page, you can perform details or delete operations on the index, weekly report title, weekly report date, weekly report picture, account number, name, etc., as shown in the figure 

4.6 Management of oral arithmetic exercises

On the oral arithmetic practice management page, you can perform detailed operations such as index, oral arithmetic exercise name, test duration (minutes), oral arithmetic exercise status, etc., modify or delete, as shown in the figure 

4.6 Question Management

On the test question management page, you can modify and delete oral calculation exercises, test question names, scores, answers, types, etc., as shown in the figure 

4.7 System Management

On the announcement information page, you can perform details, modify or delete the index, title, picture and other content; you can also perform detailed operations on the carousel map management; as shown in the figure 

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},
					});
				})
			}
		});

  });

Guess you like

Origin blog.csdn.net/qq_61827376/article/details/129290032