基于 SpringBoot + Vue3.2 + Element Plus 的后台管理系统

全栈客 2021-12-28

472

简介

TANSCI 基于 SpringBoot + Vue3.2 + Element Plus 的后台管理系统。

包含基础模块：菜单管理、角色管理、组织管理、用户管理、字典管理、日志管理（操作日志、异常日志）

Gitee: https://gitee.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	分页参数	{ current: 1, size: 10, total: 0}
column	字段集合	Array
operation	操作列	自定义插槽
tableHeight	table高度	520px
headerCellStyle	表头单元格的 style 的回调方法	原 header-cell-style
data	数据集合	Array
tree-props	树形数据	{children: 'children', hasChildren: 'hasChildren'}
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));
    }

复制