vue3+element-plus 、 vue3+ant-design-vue、 react + antd版本的后台管理系统模板。后端springboot代码也有提供

项目介绍

规范：后台系统模板，按照企业级别的规范搭建的。

权限控制：通过后端返回的路由表（这个路由表是由前端这边在系统配好的然后存储在后端的）来动态渲染菜单和注册路由，同时也根据页面内的接口权限对页面中的按钮做了是否可见的设置。前端这边有 菜单、角色、用户管理3个模块来控制权限，配权限找到这3个模块一步步配就行了。

功能模块封装：对axios进行了封装；封装了pinia持久化插件；封装了判断按钮权限的函数；封装了自定义hook来操作vue-i18n的国际化；封装了表格混入自定义hook；封装了基于浏览器存储的自定义存储方式；封装了常用的工具函数。

组件封装：封装了快捷标签导航；封装了查询面板表单；对el-table做了进一步封装，通过表头配置来生成繁琐的dom结构；对el-menu就行了进一步封装，通过树形数据即可渲染出对应菜单；封装了控制表头的组件；封装了文件预览组件；封装了icon组件。

细节处理：对组件库就行了主题和按需引入配置；动态计算布局内容和表格的高度，尽量不让纵向出滚动条且内容会刚好占满全屏；根据当前项目运行环境的不同做了一些不同的处理；可通过路由项的meta配置来决定此页面是否缓存、是否需要菜单、是否需要布局等等；主体和布局配置都单独列出来了，改起来很方便；菜单管理、角色管理、用户管理、字典管理、日志管理这几个模块我已经写好，很多细节可以参考这几个模块的代码；基本没有多余的代码，然后你要用的话，直接下载然后改改样式、主题、封装一些你需要的功能组件和功能函数就可以直接写页面了，基本是开箱即用。

项目教学

项目开源地址

element-plus纯前端版：https://gitee.com/gitee_lw/vue_element-plus_admin_front_only.git

ant-design-vue纯前端版：https://gitee.com/gitee_lw/vue3_antdv3_admin_front_only.git

element-plus前后端对接版： https://gitee.com/gitee_lw/vue_element-plus_admin.git

ant-design-vue前后端对接版： https://gitee.com/gitee_lw/vue_antdv3_admin.git

react+antd前后端对接版：https://gitee.com/gitee_lw/react_umi_admin.git

下面使用element-plus版来介绍项目。以上版本的逻辑业务用的都是同一套，就是组件库的差别。

项目效果图（前后端对接版vue）

相对于纯前端版，对接版比较完整。因为是后面学完java写的，考虑的比较全面。写纯前端版时，由于当时没学java和mysql，数据设计不是很正确，其实应该是要有关系表的。

项目效果图（前后端对接版react）

使用的5版本的antd组件，切换主题和暗量色模式很简单。业务和权限与vue版本一样

下载及运行

1.通过开源地址找到仓库地址，使用仓库地址把项目克隆下来。会java的同学建议拉取前后端对接版：

前端： https://gitee.com/gitee_lw/vue_element-plus_admin.git，前端环境是node17+

后端：https://gitee.com/gitee_lw/admin_template.git，后端环境是jdk17、mysql8、redis

下面是纯前端版。

git clone https://gitee.com/gitee_lw/vue_element-plus_admin_front_only.git#或者git clone https://gitee.com/gitee_lw/vue3_antdv3_admin_front_only.git

2.安装依赖

yarn   # 推荐使用yarn安装npm i  # 或者把 yarn.lock文件删除使用npm安装

3.启动项目

yarn start或者 npm run start

4.登录系统

这是初始化的一张用户表，里面有3个账号，密码同用户名，例：userName是admin，则密码也是 admin

,登录时就是像下面这样，admin这个账号是最高权限账号。

了解项目目录结构

了解项目技术选型

权限逻辑核心代码

全局路由守卫，判断是否具备访问某个页面的权限(“@/router/permission.ts”)

该模块用于管理 系统菜单和当前用户所具备权限的路由表（“@/store/modules/routes.ts”）

页面、菜单权限演示

判断是否具备某个按钮的权限(“@/common/addGlobalProperty.ts”)里的hasAuth函数，我已经将这个函数挂在全局上了

根据具备的按钮权限来控制按钮是否显示的使用示例

关于自定义存储

代码见@/commom/utils.ts中的函数creatBs

自定义存储类似于vue-ls，这是我自己封装的，相对于vue-ls更加轻量，通过函数返回的自定义存储对象灵活性高，存储的值可以设置过期时间、是否加密、存储键名的前缀。

pinia持久化的使用

找到文件@/store/install/index.ts

函数storagefyPlus传递一个配置对象，key是pinia模块的id；value是持久化的存储方式，值类型是数字的话代表使用的是我封装的自定义存储，数字的话代表过期时间(0代表不过期)，如果是'localStorage'则代表使用的是localStorage的存储方式。

国际化的使用

1.配置词汇

2.使用

3.效果演示

4.更多使用参考语言切换组件@/layouts/components/selectLang.vue

自定义表格组件的使用

1.引入基于el-table封装的表格，import MyTable from "@/components/Table/myTable.vue";

2.编写表头配置

3.使用组件生成表格

4.表格的表头配置支持自定义渲染头或者列内容、多级表头渲染

5.表格支持插槽渲染，插槽名同列配置的prop属性，头部具名作用域插槽的渲染需要额外加-header后缀。表格也支持分页配置来渲染分页器

查询面板组件的使用

1.引入组件

import searchPanel from '@/components/SearchPanel'

2.提供组件需要的状态

const searchOptions=ref([{type:'input',id:'userName',props:{label:'用户名'}},{type:'input',id:'nickName',props:{label:'昵称'}},{type:'select',id:'role',props:{label:'角色'},innerComponentProps:{filterable:true,selectOptions:[// { label: '商品类型1', value: '1',disabled:false },  ],}},])// type是表单项类型，id是表单项属性，props是el-form-item的props，innerComponentProps的el-form-item内部包裹组件的props。额外为el-select提供selectOptions属性，用于渲染el-option

3.使用组件

4.渲染效果

当查询选项大于一行时，会出现折叠展开按钮

react版本模板介绍

下面介绍一下权限控制，别的就多说了

‘@/src/app.ts’，umi.js约定的运行时配置，路由和菜单权限就在这设置了

按钮权限通过自定义组件 @/components/MyPermission 控制

服务端介绍

结尾

有什么不懂的地方，欢迎提问。