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

默存

发布于 2022-06-24 15:24:25

1.6K0

文章被收录于专栏：默存默存

简介

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));
    }