The design and implementation of the front-end and back-end separation of the java ssm springboot + VUE epidemic prevention system system

The design and implementation of the front-end and back-end separation of the java ssm springboot + VUE epidemic prevention system system

 Main technologies: Java, springmvc, VUE, node.js, mybatis, mysql, tomcat, jquery, layui, bootstarp, JavaScript, html, css, jsp, log4j and other common basic technologies.

The main design of the document:

Summary **** 2

Design and Implementation of Information System Based on Java Epidemic Prevention Platform **** 3

1. Introduction **** 3

1.1 Research background 3

1.2 Project objectives: 4

2. Introduction and analysis of related technologies **** 4

2.1 spring 5

2.2 Spring MVC 6

2.3 mybatis 6

2.4 jQuery 6

2.5 Mysql 7

3. Feasibility analysis **** 7

3.2 System operating environment 7

3.3 Overall technical design 8

3.4 Social feasibility analysis 8

3.5 Safety feasibility analysis 8

3.6 Economic feasibility analysis 9

3.7 Legal feasibility analysis 9

4. system design analysis **** 9

4.1 System Mode Architecture 9

4.2 System hierarchy 10

4.3 System function detail design 11

4.4 Analysis of the overall data flow 12

4.5 Source code architecture 13

4.6 Technical difficulties 15

** Five. ** Program design and implementation **** 15

5.1 Main categories of programs 15

5.2 Design and realization of main system functions 20

5.1. Login module: 20

5.2 Menu management: 22

5.3 User Management: 23

5.4 Distribution map of real-time epidemic status: 24

5.5 Health check-in application: 25

5.6 List of historical itineraries: 27

5.7 List of report for going out: 27

5.8 Inspection of quarantine substances: 28

5.9 List of notification announcement review: 29

5.10 Change password: 29

5.11 Global exception handling: 30

5.12 Database connection configuration 31

6. database design **** 32

6.1 Basic table design 32

6.2 Three-paradigm requirements for databases: 32

6.3 Database Table ER Figure 32

6.4 User table design 33

6.5 Role table design 34

6.6 Menu table design 34

6.7 Historical Itinerary Design 35

6.8 Design of health check-in table 36

6.9 Design of Outgoing Reporting Form 37

6.10 Design of Application Form for Resumption of Work 38

6.11 Notification and Announcement Form Design 38

7. experience and summary **** 39

8. Test instance **** 40

Test 1: 40

Test 2: 41

Test 3: 41

Test Evaluation 42

Thanks 42

IX. Reference Contributions **** 43

Main modules:

Administrator user login: user login.

User information: View, modify and delete the list of user information data, and the user binds roles to display the corresponding menu display.

Role management: view, modify and delete the list of role information data, each role can be set to display different menus, the super administrator has the highest authority.

Menu management: View, modify and delete the list of menu information data, which can be set by user roles

Menu permissions: According to user binding roles, role binding menu display, and basic menu addition, modification and deletion operations.

Real-time epidemic status: Use echarts icons to simulate data-driven identification, real-time display of epidemic distribution maps and information on infected persons, etc.

Historical itinerary management: daily registration management: going out report management: resumption application management: review information management:

Notification and announcement management: the administrator publishes some notification and announcement information and manages to view, etc.

The main functions of this system are as follows:

 

After logging in, enter the system homepage: The main functions of the current system are as follows

User management module: user add, modify, delete, query and other basic operations

Role management module, role binding through users, role control menu display, flexible control menu.

Front-end VUE code add menu

<template> <div class="mod-menu"> <el-form :inline="true" :model="dataForm"> <el-form-item> <el-button v-if="isAuth('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">Add</el-button> </el-form-item> </el-form> <el-table :data="dataList" row-key="menuId" border style="width: 100%; "> <el-table-column prop="name" header-align="center" min-width="150" label="name" ></el-table-column> <el-table-column prop="parentName" header-align="center" align="center" width="120" label="upper menu"> </el-table-column> <el-table-column header-align="center" align="center" label="icon"><template slot-scope="scope"> <icon-svg :name="scope.row.icon ||''"></icon-svg></template> </el-table-column> <el-table-column prop="type" header-align="center" align="center" label="type"> <template slot-scope="scope"> <el-tag v-if="scope.row.type === 0" size="small">Catalog</el-tag> <el-tag v-else-if="scope.row.type === 1" size="small" type="success">Menu</el-tag> <el-tag v-else-if="scope.row.type === 2" size="small" type="info">button</el-tag> </template> </el-table-column> <el-table-column prop="orderNum" header-align="center" align="center" label="sort number"> </el-table-column> <el-table-column prop="url" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="menuURL"> </el-table-column> <el-table-column prop="perms" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="Authorization Logo"> </el-table-column> <el-table-column fixed="right" header-align="center" align="center" width="150" label="action"> <template slot-scope="scope"> <el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">Edit</el-button > <el-button v-if="isAuth('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.menuId)">Delete</el-button > </template> </el-table-column> </el-table> <!-- Pop-up window, add/modify--> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> </div> </template> <script> import AddOrUpdate from'./menu-add-or-update' import {treeDataTranslate} from'@/utils' export default { data () { return { dataForm: {}, dataList: [], dataListLoading: false, addOrUpdateVisible: false } }, components: { AddOrUpdate }, activated () { this.getDataList() }, methods: { //Get data list getDataList () { this.dataListLoading = true this.$http({ url: this.$http.adornUrl('/sys/menu/list'), method:'get', params: this.$http.adornParams() }).then(({data}) => { this.dataList = treeDataTranslate(data,'menuId') this.dataListLoading = false }) }, //add/modify addOrUpdateHandle (id) { this.addOrUpdateVisible = true this.$nextTick(() => { this.$refs.addOrUpdate.init(id) }) }, //delete deleteHandle (id) { this.$confirm(`Are you sure to [delete] operation on [id=${id}]?`,'Prompt', { confirmButtonText:'OK', cancelButtonText:'Cancel', type:'warning' }).then(() => { this.$http({ url: this.$http.adornUrl(`/sys/menu/delete/${id}`), method:'post', data: this.$http.adornData() }).then(({data}) => { if (data && data.code === 0) { this.$message({ message:'Operation successful', type:'success', duration: 1500, onClose: () => { this.getDataList() } }) } else { this.$message.error(data.msg) } }) }).catch(() => {}) } } } </script> Copy code

Menu add and modify list layer operation

Historical itinerary data management: add, modify, delete and other operations

User daily health check-in list data display and add check-in information

Employee travel report management application

Employee return to work application

Admin review

Notification announcement module:

Database Connectivity:

spring: datasource: type: com.alibaba.druid.pool.DruidDataSource druid: driver-class-name: com.mysql.jdbc.Driver url: jdbc:mysql://localhost:3306/renren_fast?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai username: root password: 123456 initial-size: 10 max-active: 100 min-idle: 10 max-wait: 60000 pool-prepared-statements: true max-pool-prepared-statement-per-connection-size: 20 time-between-eviction-runs-millis: 60000 min-evictable-idle-time-millis: 300000 #Oracle need to open comments #validation-query: SELECT 1 FROM DUAL test-while-idle: true test-on-borrow: false test-on-return: false stat-view-servlet: enabled: true url-pattern:/druid/* #login-username: admin #login-password: admin filter: stat: log-slow-sql: true slow-sql-millis: 1000 merge-sql: false wall: config: multi-statement-allow: true ##Multiple data source configuration #dynamic: # datasource: # slave1: # driver-class-name: com.microsoft.sqlserver.jdbc.SQLServerDriver # url: jdbc:sqlserver://localhost:1433;DatabaseName=renren_security # username: sa # password: 123456 # slave2: # driver-class-name: org.postgresql.Driver # url: jdbc:postgresql://localhost:5432/renren_security # username: renren # password: 123456 Copy code

Front and back code structure:

Main table design:

user table:

CREATE TABLE `NewTable` ( `user_id` bigint(20) NOT NULL AUTO_INCREMENT, `username` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT'username', `password` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT'password', `salt` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT'salt', `email` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT'mailbox', `mobile` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT'mobile phone number', `status` tinyint(4) NULL DEFAULT NULL COMMENT'Status 0: Disabled 1: Normal', `create_user_id` bigint(20) NULL DEFAULT NULL COMMENT'creator ID', `create_time` datetime NULL DEFAULT NULL COMMENT'create time', PRIMARY KEY (`user_id`), UNIQUE INDEX `username` (`username`) USING BTREE ) ENGINE=InnoDB DEFAULT CHARACTER SET=utf8mb4 COLLATE=utf8mb4_general_ci COMMENT='System User' Copy code

Outgoing report form:

CREATE TABLE `NewTable` ( `id` int(11) NOT NULL AUTO_INCREMENT, `wc_time` datetime NULL DEFAULT NULL COMMENT'out time', `wc_yy` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT'Reason for going out', `wc_dd` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT'Place of going out', `username` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT'user name', `phone` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT'Contact phone number', `bz` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT'Remark description', `stu` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARACTER SET=utf8 COLLATE=utf8_general_ci AUTO_INCREMENT=17 ROW_FORMAT=COMPACT ; Copy code

Health registration form:

CREATE TABLE `NewTable` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT'name', `phone` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT'phone number', `szd` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT'location', `stzk` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT'physical condition', `grjc` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT'Are you in contact with an infected person', `bz` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, `create_time` datetime NULL DEFAULT NULL COMMENT'date', `tw` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARACTER SET=utf8 COLLATE=utf8_general_ci AUTO_INCREMENT=10 ROW_FORMAT=COMPACT ; Copy code

User schedule:

CREATE TABLE `NewTable` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, `cx_time` datetime NULL DEFAULT NULL, `place` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, `bz` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, `mobile` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARACTER SET=utf8 COLLATE=utf8_general_ci AUTO_INCREMENT=8 ROW_FORMAT=COMPACT ; Copy code

Some design reports and document description references

Related system design and implementation recommendations:

Based on java springboot+mybatis movie ticketing website management system front-end + back-end design and implementation

Design and implementation of internal management system of winery based on java ssm springboot+mybatis

Design and implementation of smart life sharing platform based on JAVA springboot+mybatis

Design and implementation of a furniture store platform system based on Java springboot+vue+redis for separating front and back ends

Design and implementation of anti-epidemic substance information management system based on JAVA SSM springboot

View more bloggers homepage and more actual combat projects >>>

Okay, let s stop here today, friends like, favorite, comment, one-click three in a row, see you next time~~