How to develop a WeChat applet | Design and implementation of a medical appointment system based on a 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-013

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: WeChat applet + Vue + ElementUI

Background development technology: springboot+mybatis-plus

2. Project introduction

2.1 Basic introduction

Information technology has been widely used in China at present, involving various aspects and angles of people's livelihood, information application in education, information reform in medical care, information popularization in transportation, etc., which have shown that China is moving towards The direction of science and technology power forward.

The improvement of China's economic level has also made the life of the Chinese people richer, and the beginning of a rich life has also made people pay more and more attention to their own health. more convenient. How to use modern technical means, based on mobile Internet technology, to make it easier and faster for ordinary people to make online appointments for medical treatment, this is the problem that this system will focus on solving.

After investigation and visits, this online medical appointment management system was developed and implemented using WeChat applets, data storage is based on MySQL database, the front end is developed using WeChat applets, the back end is based on Springboot framework, and Nodejs development and implementation, the front page display Implemented with Vue+ElementUI. Front-end users of the system mainly view information, register online in the registration hall, view their own appointments, modify personal information, etc.; doctor users can view appointment patients, fill in diagnosis information, manage appointment information, etc. through the WeChat applet. The background mainly implements functions such as user management, content management, event and reservation management, and counting the number of reserved users. The launch of this system provides great convenience and saves a lot of time for people to seek medical treatment.

2.2 Demand Analysis

Based on the development and implementation of this medical appointment management system based on the WeChat applet, after research and analysis, it is concluded that two types of user roles are required, one is the front-end user of the system, and the other is the back-end administrator user. Front-end users are further divided into patient users and doctor users. After patients log in through the WeChat mini-program, their main needs are to obtain the latest information push and online appointment registration through this platform; Make an appointment information and fill in the treatment instructions, and publish the appointment time information at the same time. The background administrator user mainly implements the management functions of relevant data, one is to realize the management operation of news dynamics, the other is to realize the management of reservation information, the third is to realize the information management function of registered users, and the fourth is to perform functions such as viewing and statistics of online information .

2.3 Function Design

According to the demand analysis after the investigation and visit, the main function module diagram of each user role of the online medical appointment management system based on the WeChat applet is obtained, as shown in the figure below.

The main function modules that the background administrator can realize by logging into the background management system are: user management, announcement management, carousel map management, information classification management, information information management, registration information management, information statistical reports and other functions.

Figure 2-1 Background function structure diagram

Front-end patient users can log in to the WeChat applet after registration, mainly to view system announcements, view relevant information, view doctor information in the registration hall and register online, like and collect news articles, comment on doctors, and can View personal collection information in the personal center, maintain personal information, and maintain your own appointment registration information.

Figure 2-2 Functional Structure Diagram of Patient User on Mini Program

Front-end doctor users log in to the WeChat applet, mainly to view system announcements, view relevant information, view doctor information in the registration hall, like and save news articles, view and manage appointment information for their own time slots, and In the personal center, you can view the information in your personal collection, maintain your personal information, and publish your appointment registration information.

Figure 2-3 Functional structure diagram of the doctor user on the mini-program

2.4 Database design

The detailed design of the database table is mainly based on the analysis of the entity model, adding some necessary fields for data storage to compare the primary key information on the basis of the main business fields. The following shows the database physical table structure involved in the medical appointment system.

article_type : Information table of classification of reading articles, which mainly stores classification information of news articles.

Table 3-1 Information classification information table (article_type)

name	type	null	Defaults	other	Remark
type_id	smallint(5) unsigned	no	<auto_increment>		Category ID : [0,10000]
display	smallint(4) unsigned	no	100		Display order: [0,1000] determines the sequence of classification display
name	varchar(16)	no			Category name: [2,16]
father_id	smallint(5) unsigned	no	0		Parent category ID : [0,32767]
description	varchar(255)	yes	<empty> _ _		Description: [0,255] describes the role of the classification
icon	text	yes			Category icons:
url	varchar(255)	yes	<empty> _ _		External link address: [0,255] If the category jumps to other websites, set it on this URL
create_time	timestamp	no	<INSERT-TimeStamp>		Creation time:
update_time	timestamp	no	<INSERT-TimeStamp>		Update time:

article: News article information table, which mainly stores and publishes some news information, which can be classified and displayed on the front end.

Table 3-2 Information table (article)

name	type	null	Defaults	other	Remark
article_id	mediumint(8) unsigned	no	<auto_increment>		Article id : [0,8388607]
title	varchar(125)	no			Title: [0,125] used in title tags of articles and html
type	varchar(64)	no	0		Article classification: [0,1000] used to search for articles of the specified type
hits	int(10) unsigned	no	0		Number of hits: [0,1000000000] The number of people who visited this article
praise_len	int(11)	no	0		Likes
create_time	timestamp	no	<INSERT-TimeStamp>		Creation time:
update_time	timestamp	no	<INSERT-TimeStamp>		Update time:
source	varchar(255)	yes	<empty> _ _		Sources: [0,255] source of the article
url	varchar(255)	yes	<empty> _ _		Source address: [0,255] is used to jump to the website that published the article
tag	varchar(255)	yes	<empty> _ _		Tags: [0,255] are used to mark the relevant content of the article, and multiple tags are separated by spaces
content	longtext	yes			Body: the main content of the article
img	varchar(255)	yes	<empty> _ _		cover picture
description	text	yes			article description

registration_hall: registration hall information table, which mainly stores the published doctor registration information.

Table 3-3 Registration hall information table (registration_hall)

name	type	null	Defaults	other	Remark
registration_hall_id	int(11)	no	<auto_increment>		Registration Hall ID
department_number	varchar(64)	no			Department number
department_name	varchar(64)	yes	<empty> _ _		Department name
visiting_physician	int(11)	yes	0		visiting doctor
visit_time	varchar(64)	yes	<empty> _ _		Visiting time
number_of_source	int(11)	yes	0		number of sources
roster_status	varchar(64)	yes	<empty> _ _		Scheduling status
doctor_photos	varchar(255)	yes	<empty> _ _		doctor photo
doctor_profile	longtext	yes			Doctor profile
hits	int(11)	no	0		hits
praise_len	int(11)	no	0		Likes
recommend	int(11)	no	0		Intelligent Recommendation
create_time	datetime	no	<INSERT-TimeStamp>		creation time
update_time	timestamp	no	<INSERT-TimeStamp>		update time

registration_information: Front-end user reservation information table, which mainly stores the reservation information of front-end users.

Table 3-4 Reservation Information Form (registration_information)

name	type	null	Defaults	other	Remark
registration_information_id	int(11)	no	<auto_increment>		Registration Information ID
reservation_user	int(11)	yes	0		Subscriber
time_of_appointment	varchar(64)	yes	<empty> _ _		Appointment
contact_number	varchar(64)	yes	<empty> _ _		contact number
department_number	varchar(64)	yes	<empty> _ _		Department number
department_name	varchar(64)	yes	<empty> _ _		Department name
visiting_physician	int(11)	yes	0		visiting doctor
visit_time	varchar(64)	yes	<empty> _ _		Visiting time
number_of_appointments	varchar(64)	yes	<empty> _ _		Number of reservations
visit_status	varchar(64)	yes	<empty> _ _		Medical status
user_comments	text	yes			User comments
doctor_advice	text	是			医生建议
recommend	int(11)	否	0		智能推荐
create_time	datetime	否	<INSERT-TimeStamp>		创建时间
update_time	timestamp	否	<INSERT-TimeStamp>		更新时间

ordinary_users：前端注册用户信息表，主要存储前端注册的用户信息。

表3-5 前端注册用户信息表（ordinary_users）

名称	类型	空	默认值	其他	备注
ordinary_users_id	int(11)	否	<auto_increment>		普通用户ID
user_name	varchar(64)	否			用户姓名
user_gender	varchar(64)	是	<空>		用户性别
user_age	varchar(64)	是	<空>		用户年龄
id	varchar(255)	是	<空>		身份证
date_of_birth	varchar(64)	是	<空>		出生年月
examine_state	varchar(16)	否	已通过		审核状态
recommend	int(11)	否	0		智能推荐
user_id	int(11)	否	0		用户ID
create_time	datetime	否	<INSERT-TimeStamp>		创建时间
update_time	timestamp	否	<INSERT-TimeStamp>		更新时间

notice：系统公告信息表，主要存储系统发布的公告信息。

表3-6 系统公告信息表（notice）

名称	类型	空	默认值	其他	备注
notice_id	mediumint(8) unsigned	否	<auto_increment>		公告id：
title	varchar(125)	否			标题：
content	longtext	是			正文：
create_time	timestamp	否	<INSERT-TimeStamp>		创建时间：
update_time	timestamp	否	<INSERT-TimeStamp>		更新时间：

doctor_user：医生信息表，主要存储系统中涉及到的医生信息。

表3-7 医生信息表（doctor_user）

名称	类型	空	默认值	其他	备注
doctor_user_id	int(11)	否	<auto_increment>		医生用户ID
doctor_job_number	varchar(64)	否			医生工号
name_of_doctor	varchar(64)	是	<空>		医生姓名
doctor_gender	varchar(64)	是	<空>		医生性别
doctor_age	varchar(64)	是	<空>		医生年龄
id	varchar(64)	是	<空>		身份证
date_of_birth	varchar(64)	是	<空>		出生年月
doctor_certificate	varchar(255)	是	<空>		医生证件
examine_state	varchar(16)	否	已通过		审核状态
recommend	int(11)	否	0		智能推荐
user_id	int(11)	否	0		用户ID
create_time	datetime	否	<INSERT-TimeStamp>		创建时间
update_time	timestamp	否	<INSERT-TimeStamp>		更新时间

comment：评论信息表，主要存储用户对医生的评论信息。

表3-8 评论信息表（comment）

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

User：后台管理用户信息表，主要存储后台登陆用户信息。

表3-9 后台用户信息表（user）

名称	类型	空	默认值	其他	备注
user_id	mediumint(8) unsigned	否	<auto_increment>		用户ID：[0,8388607]用户获取其他与用户相关的数据
state	smallint(1) unsigned	否	1		账户状态：[0,10](1可用|2异常|3已冻结|4已注销)
user_group	varchar(32)	是	<空>		所在用户组：[0,32767]决定用户身份和权限
login_time	timestamp	否	<INSERT-TimeStamp>		上次登录时间：
phone	varchar(11)	是	<空>		手机号码：[0,11]用户的手机号码，用于找回密码时或登录时
phone_state	smallint(1) unsigned	否	0		手机认证：[0,1](0未认证|1审核中|2已认证)
username	varchar(16)	否			用户名：[0,16]用户登录时所用的账户名称
nickname	varchar(16)	是			昵称：[0,16]
password	varchar(64)	否			密码：[0,32]用户登录所需的密码，由6-16位数字或英文组成
email	varchar(64)	是			邮箱：[0,64]用户的邮箱，用于找回密码时或登录时
email_state	smallint(1) unsigned	否	0		邮箱认证：[0,1](0未认证|1审核中|2已认证)
avatar	varchar(255)	是	<空>		头像地址：[0,255]
create_time	timestamp	否	<INSERT-TimeStamp>		创建时间：

三，系统展示

User login

 System Home

 Online Reservations

 

 Background login

 User Management

Carousel management

 

Registration information management

 Registration statistics

content management

Fourth, the core code display

package com.project.demo.controller.base;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.project.demo.service.base.BaseService;
import lombok.Setter;
import lombok.extern.slf4j.Slf4j;
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
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.persistence.Query;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
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) {
        Query select = service.select(service.readQuery(request), service.readConfig(request));
        List resultList = select.getResultList();
        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));
        return success(map);
    }

    @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) {
        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("file") MultipartFile file) {
        log.info("进入方法");
        if (file.isEmpty()) {
            return error(30000, "没有选择文件");
        }
        try {
            //判断有没路径，没有则创建
            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();
            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;
    }
}

5. Display of related works

Practical projects based on Java development, Python development, PHP development, C# development and other related language development

Front-end practical projects developed based on Nodejs, Vue and other front-end technologies

Related works based on WeChat applet and Android APP application development

Development and application of embedded IoT based on 51 single-chip microcomputer

AI intelligent application based on various algorithms

Various data management and recommendation systems based on big data