uniapp applet development | Realize the automatic arrangement system of small games based on WeChat applet

Author Homepage: Programming Compass

About the author: High-quality creator in the Java field, CSDN blog expert, CSDN content partner, invited author of Nuggets, Alibaba Cloud blog expert, 51CTO invited author, many years of architect design experience, resident lecturer of Tencent classroom

Main content: Java project, Python project, front-end project, artificial intelligence and big data, resume template, learning materials, interview question bank, technical mutual assistance

Favorites, likes, don't get lost, it's good to follow the author

Get the source code at the end of the article

Item number: BS-XCX-021

1. Environmental introduction

Locale: Java: jdk1.8

Database: Mysql: mysql5.7

Application server: Tomcat: tomcat8.5.31

Development tools: IDEA or eclipse

Front-end development technology: Uniapp generates WeChat applet + vue + nodejs

Background development technology: springboot+mybatisplus

2. Project introduction

2.1 Demand Analysis

This subject is mainly to implement a competition arrangement management system based on WeChat applets, mainly to facilitate the arrangement of various small-scale competition activities, reduce manpower investment, and improve the efficiency of the competition management system. The system is developed based on the WeChat applet, and the Java technology platform is used in the background to complete the development and processing of the service interface and business logic. It mainly realizes the display of competition information on the mini program side, the display of competition arrangement results, the display of new sports, the operation of likes, comments, collections and online registration of competitions, and the management function of personal center. Background management mainly realizes the management of basic information, including user management, event management, event arrangement management, sports news management and other related data management modules. The relevant business data of competition management is managed by MySQL5.7, and the overall design of the program adopts a three-tier architecture to complete a competition arrangement management system with front and back ends separated. The overall design of the system has complete functions, clear structure and good user experience.

When developing the automatic scheduling system for small games, the first task is to analyze the requirements of the system, including functional requirements analysis and non-functional requirements analysis. The ultimate goal of the system is to realize the informatization management of competition events, replace the original manual operation through computer informatization, simplify the workload of event management and arrangement, and improve work efficiency. After interviewing and investigating the people who have held events, it is concluded that there are two main types of users in this system, one is the small program end user, and the other is the background administrator user.

The following are the use case diagrams corresponding to each role.

The main functions of front-end users are shown in Figure 1.

Figure 1 Front-end use case diagram

The main functions of background management users are shown in Figure 2.

Figure 2 Teacher use case diagram

The main functions of the system administrator are shown in Figure 3 below.

Figure 3 Administrator use case diagram

2.2 Function Design

Based on the above requirements analysis, the business function modules of contestant users on the WeChat applet mainly include the following business modules. The specific functions are shown in the functional structure diagram shown in Figure 4 below.

Figure 4 player function module

(1) Registration and login: Player users in the automatic arrangement system for small games need to register before they can log in to the system for related business operations.

(2) News browsing: Contestants and users can browse news information online, and can like and comment on news.

(3) Announcement browsing: You can view the platform announcement information issued by the system on the WeChat applet terminal.

(4) Tournament browsing: You can view the competition information released by the system administrator.

(5) Check the event arrangement: You can check the arrangement of the events held by the platform.

(6) Online Registration: Users can register online. When users enter the event details to view, they can click Register to perform online registration operations.

(7) Online interaction: You can perform interactive operations such as likes, favorites and comments in the event details.

(8) Personal center: You can manage personal information, favorite information, personal registration information, etc. in the personal center.

The administrator user logs in to the background of the event management system to perform some basic data management operations, including user management, event management, arrangement management, news management and other modules. The specific business function modules of this user role are shown in Figure 5.

Figure 5 Administrator function module

(1) User management: For players and users in the automatic arrangement system for small games, the information after registration can be managed by the administrator in the background.

(2) Administrator management: Administrator user information can be managed in the background.

(3) News management: Mainly manage the sports news information viewed on the WeChat applet.

(4) News type management: mainly for the convenience of users to classify and view the classified information set up for news.

(5) Announcement management: The announcement management of the system includes the addition, deletion, modification and query of announcements, and the data can be viewed on the WeChat applet.

(6) Event management: information about the events and events arranged in the main management system.

(7) Event arrangement management: The event arrangement operation is implemented by the administrator in the background.

(8) Registration management: Select the registration information on the front end, and the administrator can perform corresponding management operations on the background.

(9) Competition result management: mainly perform data processing operations on the result ranking of each competition.

(10) Carousel image management: The advertisement carousel images displayed by the front-end applet can be managed and operated by the administrator in the background.

2.3 Database table structure design

According to the data analysis of the above logical structure, the basic data structure of the system can be initially obtained. After sufficient communication and modification with the user, the database table structure used in this system is finally determined. The following shows the automatic arrangement system for small games Specific table structure information.

(1) User information table: This table is mainly used to store user information participating in management in the system, including administrator users, teacher users, and student users. Different users represent different identities through the identity information associated with foreign keys. Specifically, The table structure is shown in Table 1 below.

Table 1 User information table (users)

name	type	null	Remark
user_id	mediumint(8)	no	User ID : [0,8388607] User fetches other user-related data
state	smallint(1)	no	Account status: [0,10] (1 available \|2 abnormal \|3 frozen \|4 canceled )
user_group	varchar(32)	yes	User group: [0,32767] determines user identity and permissions
login_time	timestamp	no	Last Login Time:
phone	varchar(11)	yes	Mobile phone number: [0,11] The user's mobile phone number, which is used when retrieving the password or logging in
phone_state	smallint(1)	no	Mobile authentication: [0,1] (0 unauthenticated \|1 reviewing \|2 authenticated )
username	varchar(16)	no	Username: [0,16] The account name used by the user to log in
nickname	varchar(16)	yes	Nickname: [0,16]
password	varchar(64)	no	Password: [0,32] Password required for user login, consisting of 6-16 digits or English
email	varchar(64)	yes	E-mail: [0,64] user's e-mail, used when retrieving password or logging in
email_state	smallint(1)	no	Email authentication: [0,1] (0 unauthenticated \|1 reviewing \|2 authenticated )
avatar	varchar(255)	yes	Avatar address: [0,255]
create_time	timestamp	no	Creation time:

(2) User identity information table: This table is mainly used to store the role identity information of different users in the system. The specific table structure is shown in Table 2 below.

Table 2 User information table (users_group)

name	type	null	Remark
group_id	mediumint(8) unsigned	no	User Group ID : [0,8388607]
display	smallint(4) unsigned	no	Display order: [0,1000]
name	varchar(16)	no	name: [0,16]
description	varchar(255)	yes	Description: [0,255] Describe the characteristics or scope of authority of this user group
source_table	varchar(255)	yes	Source table:
source_field	varchar(255)	yes	Source field:
source_id	int(10) unsigned	no	Source ID :
register	smallint(1) unsigned	yes	Registration location :
create_time	timestamp	no	Creation time:
update_time	timestamp	no	Update time:

(3) Event information table: This table is mainly used to store the event information designed in the system. The specific table structure is shown in Table 3 below.

Table 3 Event information table (event)

name	type	null	Remark
event_id	int(11)	no	Event ID
event	varchar(64)	yes	Competition
project_code	varchar(64)	yes	project code
competition_format	varchar(64)	yes	competition system
event_location	varchar(64)	yes	Event location
competition_schedule	date	yes	game schedule
event_cover	varchar(255)	yes	event cover
event_details	text	yes	Event Details
hits	int(11)	no	hits
praise_len	int(11)	no	Likes
recommend	int(11)	no	Intelligent Recommendation
create_time	datetime	no	creation time
update_time	timestamp	no	update time

(4) Player registration information table: This table is mainly used to store the information of players who register for competitions in the system. The specific table structure is shown in Table 4 below.

Table 4 Competition Registration Information Form (contestant_registration)

name	type	null	Remark
contestant_registration_id	int(11)	no	Player Registration ID
event	varchar(64)	yes	Competition
project_code	varchar(64)	yes	project code
competition_format	varchar(64)	yes	competition system
event_location	varchar(64)	yes	Event location
competition_schedule	date	yes	game schedule
player_user	int(11)	是	选手用户
player_name	varchar(64)	是	选手姓名
recommend	int(11)	否	智能推荐
create_time	datetime	否	创建时间
update_time	timestamp	否	更新时间

（5）赛事编排结果信息表：此表主要用来存储系统中对比赛赛事的编排信息，具体的表结构如下表5所示。

表5 比赛赛事编排信息表(arrange_results)

名称	类型	空	默认值	其他	备注
arrange_results_id	int(11)	否	<auto_increment>		编排结果ID
event	varchar(64)	是	<空>		比赛项目
project_code	varchar(64)	是	<空>		项目代号
competition_format	varchar(64)	是	<空>		比赛赛制
player_user	int(11)	是	0		选手用户
player_name	varchar(64)	是	<空>		选手姓名
arrange_results	text	是			编排结果
recommend	int(11)	否	0		智能推荐
create_time	datetime	否	<INSERT-TimeStamp>		创建时间
update_time	timestamp	否	<INSERT-TimeStamp>		更新时间

（6）比赛结果信息表：此表主要用来存储系统中各个场次的比赛结果信息，具体的表结构如下表6所示。

表6 比赛信息表(competition_results)

名称	类型	空	备注
competition_results_id	int(11)	否	比赛结果ID
event	varchar(64)	是	比赛项目
project_code	varchar(64)	是	项目代号
competition_format	varchar(64)	是	比赛赛制
player_user	int(11)	是	选手用户
player_name	varchar(64)	是	选手姓名
ranking_of_contestants	varchar(64)	是	选手名次
number_of_victories	int(11)	是	胜利场数
number_of_failed_events	int(11)	是	失败场数
recommend	int(11)	否	智能推荐
create_time	datetime	否	创建时间
update_time	timestamp	否	更新时间

（7）新闻类型信息表：此表主要用来存储系统中存储的新闻类型信息，具体的表结构如下表7所示。

表7 新闻类型信息表(article_type)

名称	类型	空	备注
type_id	smallint(5) unsigned	否	分类ID：[0,10000]
display	smallint(4) unsigned	否	显示顺序：[0,1000]决定分类显示的先后顺序
name	varchar(16)	否	分类名称：[2,16]
father_id	smallint(5) unsigned	否	上级分类ID：[0,32767]
description	varchar(255)	是	描述：[0,255]描述该分类的作用
icon	text	是	分类图标：
url	varchar(255)	是	外链地址：[0,255]如果该分类是跳转到其他网站的情况下，就在该URL上设置
create_time	timestamp	否	创建时间：
update_time	timestamp	否	更新时间：

（8）新闻信息表：此表主要用来存储系统中添加的体育新闻相关信息，具体的表结构如下表8所示。

表8 新闻信息表(article)

名称	类型	空	备注
article_id	mediumint(8)	否	文章id：[0,8388607]
title	varchar(125)	否	标题：[0,125]用于文章和html的title标签中
type	varchar(64)	否	文章分类：[0,1000]用来搜索指定类型的文章
hits	int(10)	否	点击数：[0,1000000000]访问这篇文章的人次
praise_len	int(11)	否	点赞数
create_time	timestamp	否	创建时间：
update_time	timestamp	否	更新时间：
source	varchar(255)	是	来源：[0,255]文章的出处
url	varchar(255)	是	来源地址：[0,255]用于跳转到发布该文章的网站
tag	varchar(255)	是	标签：[0,255]用于标注文章所属相关内容，多个标签用空格隔开
content	longtext	是	正文：文章的主体内容
img	varchar(255)	是	封面图
description	text	是	文章描述

（9）评论信息表：此表主要用来存储系统中用户对赛事的评论基本信息，具体的表结构如下表9所示。

表9 评论信息表(comment)

名称	类型	空	备注
comment_id	int(11)	否	评论ID：
user_id	int(11)	否	评论人ID：
reply_to_id	int(11)	否	回复评论ID：空为0
content	longtext	是	内容：
nickname	varchar(255)	是	昵称：
avatar	varchar(255)	是	头像地址：[0,255]
create_time	timestamp	否	创建时间：
update_time	timestamp	否	更新时间：
source_table	varchar(255)	是	来源表：
source_field	varchar(255)	是	来源字段：
source_id	int(10) unsigned	否	来源ID：

（10）收藏信息表：此表主要用来存储系统中用户对赛事的收藏基本信息，具体的表结构如下表10所示。

表10 收藏信息表(collect)

名称	类型	空	备注
collect_id	int(10) unsigned	否	收藏ID：
user_id	int(10) unsigned	否	收藏人ID：
source_table	varchar(255)	是	来源表：
source_field	varchar(255)	是	来源字段：
source_id	int(10) unsigned	否	来源ID：
title	varchar(255)	是	标题：
img	varchar(255)	是	封面：
create_time	timestamp	否	创建时间：
update_time	timestamp	否	更新时间：

三，系统展示

用户注册登录

比赛赛事浏览

赛事编排

比赛结果

赛事资讯

后台管理功能模块

赛事管理

用户管理

比赛编排管理

选手报名管理

四，核心代码展示

package com.project.demo.controller.base;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.project.demo.service.base.BaseService;
import com.project.demo.utils.IdWorker;
import lombok.Setter;
import lombok.extern.slf4j.Slf4j;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 */
@Slf4j
public class BaseController<E, S extends BaseService<E>> {

    @Setter
    protected S service;

    @PostMapping("/add")
    @Transactional
    public Map<String, Object> add(HttpServletRequest request) throws IOException {
        service.insert(service.readBody(request.getReader()));
        return success(1);
    }

    @Transactional
    public Map<String, Object> addMap(Map<String,Object> map){
        service.insert(map);
        return success(1);
    }

    @PostMapping("/set")
	@Transactional
    public Map<String, Object> set(HttpServletRequest request) throws IOException {
        service.update(service.readQuery(request), service.readConfig(request), service.readBody(request.getReader()));
        return success(1);
    }


    @RequestMapping(value = "/del")
    @Transactional
    public Map<String, Object> del(HttpServletRequest request) {
        service.delete(service.readQuery(request), service.readConfig(request));
        return success(1);
    }

    @RequestMapping("/get_obj")
    public Map<String, Object> obj(HttpServletRequest request) {
        List resultList = service.selectBaseList(service.select(service.readQuery(request), service.readConfig(request)));
        if (resultList.size() > 0) {
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("obj",resultList.get(0));
            return success(jsonObject);
        } else {
            return success(null);
        }
    }


    @RequestMapping("/get_list")
    public Map<String, Object> getList(HttpServletRequest request) {
        Map<String, Object> map = service.selectToPage(service.readQuery(request), service.readConfig(request));
        return success(map);
    }

    @RequestMapping("/list_group")
    public Map<String, Object> listGroup(HttpServletRequest request) {
        Map<String,Object> map = service.selectToList(service.readQuery(request), service.readConfig(request));
        Map<String,Object> result = new HashMap<>();
        result.put("result",map);
        return result;
    }

    @RequestMapping("/bar_group")
    public Map<String, Object> barGroup(HttpServletRequest request) {
        Map<String, Object> map = service.selectBarGroup(service.readQuery(request), service.readConfig(request));
        return success(map);
    }

    @RequestMapping(value = {"/count_group", "/count"})
    public Map<String, Object> count(HttpServletRequest request) {
        Integer value= service.selectSqlToInteger(service.groupCount(service.readQuery(request), service.readConfig(request)));
        return success(value);
    }

    @RequestMapping(value = {"/sum_group", "/sum"})
    public Map<String, Object> sum(HttpServletRequest request) {
        Integer value = service.selectSqlToInteger(service.sum(service.readQuery(request), service.readConfig(request)));
        return success(value);
    }

    @RequestMapping(value = {"/avg_group", "/avg"})
    public Map<String, Object> avg(HttpServletRequest request) {
        Integer value = service.selectSqlToInteger(service.avg(service.readQuery(request), service.readConfig(request)));
        return success(value);
    }

//    @RequestMapping(value = {"/count_group", "/count"})
//    public Map<String, Object> count(HttpServletRequest request) {
//        Query count = service.count(service.readQuery(request), service.readConfig(request));
//        return success(count.getResultList());
//    }
//
//    @RequestMapping(value = {"/sum_group", "/sum"})
//    public Map<String, Object> sum(HttpServletRequest request) {
//        Query count = service.sum(service.readQuery(request), service.readConfig(request));
//        return success(count.getResultList());
//    }
//
//    @RequestMapping(value = {"/avg_group", "/avg"})
//	public Map<String, Object> avg(HttpServletRequest request) {
//        Query count = service.avg(service.readQuery(request), service.readConfig(request));
//        return success(count.getResultList());
//    }


    @PostMapping("/upload")
    public Map<String, Object> upload(@RequestParam(value = "file",required=false) MultipartFile file,HttpServletRequest request) {
        log.info("进入方法");
        if (file.isEmpty()) {
            return error(30000, "没有选择文件");
        }
        try {
            //判断有没路径，没有则创建
            String filePath = request.getSession().getServletContext().getRealPath("\\") +"\\upload\\";
//            String filePath = System.getProperty("user.dir") + "\\target\\classes\\static\\upload\\";
            File targetDir = new File(filePath);
            if (!targetDir.exists() && !targetDir.isDirectory()) {
                if (targetDir.mkdirs()) {
                    log.info("创建目录成功");
                } else {
                    log.error("创建目录失败");
                }
            }
//            String path = ResourceUtils.getURL("classpath:").getPath() + "static/upload/";
//            String filePath = path.replace('/', '\\').substring(1, path.length());
            String fileName = file.getOriginalFilename();
            int lastIndexOf = fileName.lastIndexOf(".");
            //获取文件的后缀名 .jpg
            String suffix = fileName.substring(lastIndexOf);
            fileName = IdWorker.getId()+suffix;
            File dest = new File(filePath + fileName);
            log.info("文件路径:{}", dest.getPath());
            log.info("文件名:{}", dest.getName());
            file.transferTo(dest);
            JSONObject jsonObject = new JSONObject();
            jsonObject.put("url", "/api/upload/" + fileName);
            return success(jsonObject);
        } catch (IOException e) {
            log.info("上传失败：{}", e.getMessage());
        }
        return error(30000, "上传失败");
    }

//    @PostMapping("/import_db")
//    public Map<String, Object> importDb(@RequestParam("file") MultipartFile file) throws IOException {
//        service.importDb(file);
//        return success(1);
//    }
//
//    @RequestMapping("/export_db")
//    public void exportDb(HttpServletRequest request, HttpServletResponse response) throws IOException {
//        HSSFWorkbook sheets = service.exportDb(service.readQuery(request), service.readConfig(request));
//        response.setContentType("application/octet-stream");
//        response.setHeader("Content-disposition", "attachment;filename=employee.xls");
//        response.flushBuffer();
//        sheets.write(response.getOutputStream());
//        sheets.close();
//    }

    public Map<String, Object> success(Object o) {
        Map<String, Object> map = new HashMap<>();
        if (o == null) {
            map.put("result", null);
            return map;
        }
        if (o instanceof List) {
            if (((List) o).size() == 1) {
               o =  ((List) o).get(0);
                map.put("result", o);
            }else {
                String jsonString = JSONObject.toJSONString(o);
                JSONArray objects = service.covertArray(JSONObject.parseArray(jsonString));
                map.put("result", objects);
            }
        } else if (o instanceof Integer || o instanceof String) {
            map.put("result", o);
        } else {
            String jsonString = JSONObject.toJSONString(o);
            JSONObject jsonObject = JSONObject.parseObject(jsonString);
            JSONObject j = service.covertObject(jsonObject);
            map.put("result", j);
        }
        return map;
    }

    public Map<String, Object> error(Integer code, String message) {
        Map<String, Object> map = new HashMap<>();
        map.put("error", new HashMap<String, Object>(4) {
   
   {
            put("code", code);
            put("message", message);
        }});
        return map;
    }
}