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

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

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

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

Gitee: https://gitee.com/typ1805/tansci

GitHub: https://github.com/typ1805/tansci

架构 技术栈 1、环境要求 名称版本号描述JDK1.8+强制要求mysql5.7+数据库node14.16+前端环境要求npm6.14+前端框架包管理Nginx1.16+请求转发、反向代理Maven3.8+项目构建，管理Git2.14+项目版本管理 2、后端技术 名称版本号描述SpringBoot2.6.1整体架构基础Mybatis Plus3.4.3.1数据层Druid1.2.6连接池Spring Security–权限认证Fastjson1.2.75–JJWT0.9.0安全认证Lombok–– 3、前端技术 名称版本号描述vue3.2.16整体架构基础element-plus1.2.0-beta.6UIvue-router4.0.12路由vuex4.0.2状态管理模式vue3-echarts1.0.3echarts图表axios0.24.0基于promise的HTTP库nprogress0.2.0–less4.1.2– 示例组件 1、el-table 封装

1.1、示例

    import Table from '../../components/Table.vue'

1.2、可参考 tansci-view/src/views/system/User.vue

1.3、Props及事件说明

参数说明默认值loading加载动画falsepage分页参数{ current: 1, size: 10, total: 0}column字段集合Arrayoperation *** 作列自定义插槽tableHeighttable高度520pxheaderCellStyle表头单元格的 style 的回调方法原 header-cell-styledata数据集合Arraytree-props树形数据{children: ‘children’, hasChildren: ‘hasChildren’}onSizeChangepageSize 改变时触发原 size-changeonCurrentChangecurrent-change 改变时触发原 current-changeonSelectionChange当选择项发生变化时会触发该事件原 selection-changesetCellColor单元格的 style 的回调方法原 cell-styleonButtonClick当column的type="button"时的click事件–onSwitchChange当column的type="switch"时的change事件–

1.4、column 配置说明

参数说明默认值prop字段名称Stringlabel展示值Stringalias列字典值名称展示Stringtype展示类型：button、tag、switch、progress属性配置和element属性一致option对type进行属性配置element属性一致tooltip当内容过长被隐藏时显示falsewidth对应列的宽度string / numberalign对齐方式： left、center、leftfixed列是否固定在左侧或者右侧：true 、‘left’、‘right’–

1.5、插槽

参数说明默认值search筛选条件插槽