主要技術：Java、springmvc、VUE、node.js、mybatis、mysql、tomcat、jquery、layui、bootstarp、JavaScript、html、css、jsp、log4j等一些常見的基本技術，
主要模塊功能有：
管理員用戶登錄：用戶登錄，
用戶資訊: 用戶資訊資料的串列查看、修改和洗掉、用戶系結角色來顯示對應的選單顯示，
角色管理：角色資訊資料的串列查看、修改和洗掉、每個角色可以設定不同選單顯示、超級管理員擁有最高權限，
選單管理: 選單資訊資料的串列查看、修改和洗掉、可以通過用戶角色來設定
選單權限：根據用戶系結角色、角色系結選單顯示、以及基礎選單的添加、修改和洗掉操作，
實時疫情狀態：通過echarts圖示來模擬實作資料驅動標識、實時顯示疫情分布圖和感染人員資訊等，
歷史行程管理：每日登記管理：外出報備管理：復工申請管理：審核資訊管理：
通知公告管理：管理員發布一些通知公告資訊以及管理查看等
這個系統主要功能截圖如下：
登錄之后進入系統首頁：目前系統主要功能如下
用戶管理模塊：用戶添加、修改、洗掉、查詢等基本操作
角色管理模塊、通過用戶系結角色、角色控制選單顯示、靈活控制選單，
前端VUE代碼添加選單:
<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()">新增</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="名稱" ></el-table-column>
<el-table-column prop="parentName" header-align="center" align="center" width="120" label="上級選單">
</el-table-column>
<el-table-column header-align="center" align="center" label="圖示"><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="型別">
<template slot-scope="scope">
<el-tag v-if="scope.row.type === 0" size="small">目錄</el-tag>
<el-tag v-else-if="scope.row.type === 1" size="small" type="success">選單</el-tag>
<el-tag v-else-if="scope.row.type === 2" size="small" type="info">按鈕</el-tag>
</template>
</el-table-column>
<el-table-column prop="orderNum" header-align="center" align="center" label="排序號">
</el-table-column>
<el-table-column prop="url" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="選單URL">
</el-table-column>
<el-table-column
prop="perms"
header-align="center"
align="center"
width="150"
:show-overflow-tooltip="true"
label="授權標識">
</el-table-column>
<el-table-column
fixed="right"
header-align="center"
align="center"
width="150"
label="操作">
<template slot-scope="scope">
<el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button>
<el-button v-if="isAuth('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.menuId)">洗掉</el-button>
</template>
</el-table-column>
</el-table>
<!-- 彈窗, 新增 / 修改 -->
<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)
})
},
// 洗掉
deleteHandle (id) {
this.$confirm(`確定對[id=${id}]進行[洗掉]操作?`, '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
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: '操作成功',
type: 'success',
duration: 1500,
onClose: () => {
this.getDataList()
}
})
} else {
this.$message.error(data.msg)
}
})
}).catch(() => {})
}
}
}
</script>選單添加修改串列層操作:
歷史行程資料管理：添加修改洗掉等操作
用戶每日健康打卡串列資料展示以及添加打卡資訊:
員工出行外出報備管理申請:
員工復工申請:
管理員審核:
通知公告模塊:
資料庫連接：
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需要打開注釋
#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
##多資料源的配置
#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資料庫連接：
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需要打開注釋
#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
##多資料源的配置
#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前后端代碼結構：
一些設計報告和檔案描述參考:
好了、就介紹到這了、這個前后端分離（springboot +vue）專案功能比較齊全完善，
了解詳情可以私聊，感謝大家支持與幫助！
" data-link-title="點擊查看更多java精品專案>" contenteditable="true">點擊查看更多java精品專案>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/335170.html
標籤：其他