ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-12-28 11:02:39  阅读:277  来源: 互联网

标签:style vue SpringBoot -- column Element Vue3.2 type change


简介

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

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

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

GitHup:

架构

技术栈

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

项目预览

标签:style,vue,SpringBoot,--,column,Element,Vue3.2,type,change
来源: https://www.cnblogs.com/typ1805/p/15739786.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有