Main technologies: Java, SpringMVC, VUE, Node.js, Mybatis, mysql, tomcat, jquery, Layui, Bootstarp, JavaScript, HTML, CSS, JSP, log4j and other common basic technologies.

Main modules:

Administrator login: User login.

User information: View, modify, and delete the list of user information data, and bind users to roles to display corresponding menus.

Role management: View, modify, and delete the role information list. Each role can be displayed on different menus. The super administrator has the highest rights.

Menu management: menu information data list view, modify and delete, can be set by user role

Menu permission: Allows users to bind roles, display role binding menus, and add, modify, and delete basic menus.

Real-time epidemic status: Using Echarts ICONS to simulate data-driven identification, real-time display of epidemic distribution map and infected personnel information, etc.

Historical itinerary management: Daily registration management: out reporting management: resume application management: audit information management:

Notice and announcement management: the administrator issued some notice and announcement information and management view

Screenshots of the main functions of the system are as follows:

Enter the system home page after login: The main functions of the system are as follows

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

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

Front-end VUE code adds 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()" new </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 The header - the 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"> Directory </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 "> </el-table-column> <el-table-column prop="url" header-align="center" Align ="center" width="150" :show-overflow-tooltip="true" label=" menu URL"> </el-table-column> <el-table-column prop="perms" "> </el-table-column> </el-table-column> <el-table-column fixed="right" header-align="center" align="center" width="150" label=" operation "> <template slot-scope="scope"> <el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuid)"> modify </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> <! - play a window, <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: 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 }) }, AddOrUpdateHandle (id) {this.addOrUpdatevisible = true this.$nextTick(() => { This.$refs.addorUpdate.init (id)})}, // Delete deleteHandle (id) {this.$confirm(' delete from [id=${id}]? ', 'confirmButtonText ', {confirmButtonText:' confirm ', 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. 'success', duration: 1500, onClose: () => { this.getDataList() } }) } else { this.$message.error(data.msg) } }) }).catch(() => {}) } } } </script>Copy the code

Menu add modify column surface operation

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

Daily health punch list data display and add punch information

Staff out to report management applications

Employee resume application

Administrator audit

Notification module:

Database connection:

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: #validation-query: SELECT 1 FROM DUAL test-while-idle: SELECT 1 FROM DUAL test-while-idle: SELECT 1 FROM DUAL test-while-idle: SELECT 1 FROM DUAL test-while-idle: 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 mergeD-sql: false wall: config: multi-statement-allow: true ## # 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: 123456Copy the code

Front-end and back-end code structure:

Some design reports and documentation description reference

Ok, that’s it. This springboot +vue project is quite complete and complete.

Follow the blogger one key three even yo