簡介
TANSCI 基於 SpringBoot + Vue3.2 + Element Plus 的后台管理系統。
包含基礎模塊：菜單管理、角色管理、組織管理、用戶管理、字典管理、日志管理（操作日志、異常日志）
Gitee: https://gitee.com/typ1805/tansci
GitHub: https://github.com/typ1805/tansci
架構
技術棧
1、環境要求
| 名稱 | 版本號 | 描述 |
|---|---|---|
| JDK | 1.8+ | 強制要求 |
| mysql | 5.7+ | 數據庫 |
| node | 14.16+ | 前端環境要求 |
| npm | 6.14+ | 前端框架包管理 |
| Nginx | 1.16+ | 請求轉發、反向代理 |
| Maven | 3.8+ | 項目構建，管理 |
| Git | 2.14+ | 項目版本管理 |
2、后端技術
| 名稱 | 版本號 | 描述 |
|---|---|---|
| SpringBoot | 2.6.1 | 整體架構基礎 |
| Mybatis Plus | 3.4.3.1 | 數據層 |
| Druid | 1.2.6 | 連接池 |
| Spring Security | -- | 權限認證 |
| Fastjson | 1.2.75 | -- |
| JJWT | 0.9.0 | 安全認證 |
| Lombok | -- | -- |
3、前端技術
| 名稱 | 版本號 | 描述 |
|---|---|---|
| vue | 3.2.16 | 整體架構基礎 |
| element-plus | 1.2.0-beta.6 | UI |
| vue-router | 4.0.12 | 路由 |
| vuex | 4.0.2 | 狀態管理模式 |
| vue3-echarts | 1.0.3 | echarts圖表 |
| axios | 0.24.0 | 基於promise的HTTP庫 |
| nprogress | 0.2.0 | -- |
| less | 4.1.2 | -- |
示例組件
1、el-table 封裝
1.1、示例
import Table from '../../components/Table.vue'
1.2、可參考 tansci-view/src/views/system/User.vue
<Table :data="tableData" :column="tableTitle" :operation="true" :tableHeight="tableHeight" :page="page" :loading="loading"
@onSizeChange="onSizeChange" @onCurrentChange="onCurrentChange" @setCellColor="setCellColor">
<template #search>
</template>
<template #column="scope">
</template>
</Table>
1.3、Props及事件說明
| 參數 | 說明 | 默認值 |
|---|---|---|
| loading | 加載動畫 | false |
| page | 分頁參數 | |
| column | 字段集合 | Array |
| operation | 操作列 | 自定義插槽 |
| tableHeight | table高度 | 520px |
| headerCellStyle | 表頭單元格的 style 的回調方法 | 原 header-cell-style |
| data | 數據集合 | Array |
| tree-props | 樹形數據 | |
| onSizeChange | pageSize 改變時觸發 | 原 size-change |
| onCurrentChange | current-change 改變時觸發 | 原 current-change |
| onSelectionChange | 當選擇項發生變化時會觸發該事件 | 原 selection-change |
| setCellColor | 單元格的 style 的回調方法 | 原 cell-style |
| onButtonClick | 當column的type="button"時的click事件 | -- |
| onSwitchChange | 當column的type="switch"時的change事件 | -- |
1.4、column 配置說明
| 參數 | 說明 | 默認值 |
|---|---|---|
| prop | 字段名稱 | String |
| label | 展示值 | String |
| alias | 列字典值名稱展示 | String |
| type | 展示類型：button、tag、switch、progress | 屬性配置和element屬性一致 |
| option | 對type進行屬性配置 | element屬性一致 |
| tooltip | 當內容過長被隱藏時顯示 | false |
| width | 對應列的寬度 | string / number |
| align | 對齊方式： left、center、left | |
| fixed | 列是否固定在左側或者右側：true 、'left'、'right' | -- |
1.5、插槽
| 參數 | 說明 | 默認值 |
|---|---|---|
| search | 篩選條件插槽 | <template #search> |
| column | table操作列插槽，operation為true時生效 | <template #column="scope"> |
2、接口日志記錄
2.1、使用 @Log
- modul: 操作模塊
- type: 操作類型
- desc: 操作說明
2.2、示例
@Log(modul = "數據字典-列表", type = Constants.SELECT, desc = "列表")
@GetMapping("/dicList")
public Wrapper<List<SysDic>> dicList(SysDicDto dto) {
return WrapMapper.wrap(Wrapper.SUCCESS_CODE, Wrapper.SUCCESS_MESSAGE, sysDicService.dicList(dto));
}
項目預覽
