Vue3.0全新的后端管理系统模板（ts版本）-段亮个人博客

相信有很多刚写后台管理系统的前端er们，都有这样的一些困惑：

一、后台菜单如何渲染呢？

有人会图方便由前端来着渲染，有人却习惯用于后端渲染。到底什么方案更加适合呢？笔者认为一般还是由后端根据不同用户角色来下发菜单，这样做的好处在于可以更加安全、细微的控制。如下视频一样：

看完上述视频，相信大家也会觉得用后端来做权限控制要比前端方便很多（前端要考虑存储角色处理的逻辑，而这些本应该就由后端来处理。再者也解决了，没增加一个用户角色，就不需要单独发版来解决用户菜单访问权限的问题）

二、角色权限该如何做呢？

按照常规的做法，段亮认为用户角色权限应分为两大类来管理，已目前流行的前后端分离架构（SPA + Server）来说：

1、用户的菜单、接口（操作行为）应由后端来控制

2、页面级别元素按钮 / 图片... 可以由前端根据当前用户id来进行控制

两者间应用明确的界限，职责分明。当然哈，如果想全部由后端来控制也行，就是增加了一定的开发成本，但也方便后期直接操作可视化UI界面。利与弊当然要根据当下的情况来权衡，没有万能不变的方案，只有更合适于当下业务的方案。

如果采用由后端来管理用户权限，那么可以参考一下视频：

针对很多同学还没有什么经验，特此开发了一款用 vue3.0 + typescript + UI 库（ant-design-vue）的后台模板，专门解决用户权限、菜单访问等问题。

模板功能特点如下：

1、支持动态后端菜单渲染

2、根据用户角色设置对应的api、菜单访问权限

3、支持内嵌iframe、路由跳转

4、表格列表支持动态列筛选和搜索条件快捷显示/隐藏

5、至少快捷菜单页面刷新功能

首页截图：

用户权限菜单管理页面截图：

用户角色管理页面截图：

API管理页面截图：

用户管理页面截图：

下载本模板后，请先详细阅读项目READEME.md

# 项目描述

1. 本后台管系统模板采用的是 vue3.0 + typescript + UI 库（ant-design-vue） 开发完成

2. 项目支持后端动态渲染菜单、用户角色权限控制、内嵌路由跳转...

# 项目结构

```
├── README.md # 需要阅读的文件
├── App.vue
├── antd # ui 组件异步加载
│   ├── icon.ts
│   └── index.ts
├── assets # 静态资源
│   ├── images
│   │   ├── login-bg.svg
│   │   └── user-icon
│   │       ├── user1.png
│   │       ├── user2.png
│   │       └── user3.png
│   └── less
│       └── common.less
├── components // 公共封装组件
│   ├── base
│   │   └── render.ts
│   ├── dialog
│   │   ├── close.svg
│   │   ├── dialog.less
│   │   ├── dialog.vue
│   │   ├── index.ts
│   │   └── mask.vue
│   ├── my-img
│   │   └── index.vue
│   ├── no-data
│   │   └── index.vue
│   ├── table-operation
│   │   └── index.vue
│   └── table-search
│       └── index.vue
├── config # 项目配置文件
│   └── index.js
├── filter # 全局过滤器
│   └── index.ts

├── main.ts # 主入口文件
├── router # 路由相关操作
│   ├── async-router.ts
│   ├── config.ts
│   ├── import.ts
│   └── index.ts # 路由鉴权封装
├── services # ajax请求封装
│   ├── api
│   │   ├── api
│   │   │   └── index.ts
│   │   ├── index.ts
│   │   ├── menu
│   │   │   └── index.ts
│   │   ├── role
│   │   │   └── index.ts
│   │   └── user
│   │       └── index.ts
│   └── request.ts
├── store # 数据持久层
│   ├── index.ts
│   └── module
│       ├── menu.ts
│       └── user.ts
├── utils # 常用公用组件
│   └── index.ts
├── views # 页面
│   ├── account
│   │   ├── base
│   │   │   ├── index.less
│   │   │   └── index.vue
│   │   └── index.vue
│   ├── dashboard
│   │   ├── index.less
│   │   └── index.vue
│   ├── error
│   │   └── index.vue
│   ├── iframe
│   │   └── index.vue
│   ├── layout # 页面布局
│   │   ├── crumbs-nav
│   │   │   ├── index.less
│   │   │   └── index.vue
│   │   ├── index.less
│   │   ├── index.vue
│   │   ├── quick-nav
│   │   │   ├── index.less
│   │   │   └── index.vue
│   │   └── side
│   │       ├── index.vue
│   │       └── side-item.vue
│   ├── login
│   │   ├── index.less
│   │   └── index.vue
│   └── system-admin
│       ├── api
│       │   ├── index.vue
│       │   └── item
│       │       ├── index.less
│       │       └── index.vue
│       ├── authority
│       │   ├── index.vue
│       │   └── item
│       │       ├── index.less
│       │       └── index.vue
│       ├── index.vue
│       ├── menu
│       │   ├── index.vue
│       │   └── item
│       │       ├── index.less
│       │       └── index.vue
│       └── user
│           ├── index.less
│           ├── index.vue
│           └── item
│               ├── index.less
│               └── index.vue
├── shims-vue.d.ts
├── img.d.ts
└── vue-prototype.d.ts
```

# 项目中的 MOCK 数据

```js
// 菜单数据结构示例
let menuList = [
    {
        name: 'dashboard',
        path: 'dashboard',
        component: 'views/dashboard/index',
        parent_id: '0',
        hidden: false,
        sort: 0,
        mode: 1,
        mode_url: '',
        id: '1',
        meta: {
            icon: 'DashboardOutlined',
            title: '首页'
        },
        create_time: '2021-03-22T04:01:46.511Z',
        update_time: '2021-03-22T04:01:46.511Z'
    },
    {
        name: 'account',
        path: 'account',
        component: 'views/account/base',
        parent_id: '0',
        hidden: false,
        sort: 5,
        mode: 1,
        mode_url: '',
        id: '2',
        meta: {
            icon: 'ProfileOutlined',
            title: '个人中心'
        },
        create_time: '2021-03-22T08:20:47.698Z',
        update_time: '2021-03-31T14:19:26.156Z'
    },
    ...
]
```

```js
// API接口组mock 数据
let apiList = [
    {
        api_group: 'api',
        description: '获取所有api列表',
        method: 'GET',
        path: '/api/111',
        id: 'xxx',
        create_time: '2021-03-24T09:43:10.255Z',
        update_time: '2021-03-24T09:43:10.255Z'
    },
    ...
]
```

# 项目注意事项

1. 按照对应的数据结构返回数据来替换项目中的 mock 数据。

2. $ajax $api 已挂载在全局调用 比如： this.$ajax this.$api.xx(模块).xx

3. 路由权限封装请查看 router 文件夹下 index.ts 中的逻辑

# 项目运行

npm install

npm run dev

npm run build (打包)

npm run analyzer (查询包统计)

备注：本模板只包含了最基本的权限控制模块、动态菜单、登录页面、用户管理等基本页面和前端功能，内含有mock数据用于测试功能。如有对接真实数据的话，请参考mock数据中的数据结构来即可。

演示站点：点击查看详情

目前本blog已全面切换到这套管理系统中（包含了更多实战案例，比如对富文本编辑器的深度封装，支持代码高亮、源码编辑、颜色选择选择器...），也支持了前端菜单的动态渲染。如果有想法购买本博客源码的同学，可以联系我！

本文出自：段亮个人博客。如需转载请注明出处！

本文出处：https://www.duanliang920.com/muban/8744.html