Vue3.0全新的后端管理系统模板(ts版本)

  • 编辑时间: 2021-04-09 22:22:11
  • 浏览量: loading...
  • 作者: 段亮

相信有很多刚写后台管理系统的前端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


Vuejs3.0+Typescript网站后台管理系统模板下载:

写文章不易,如果您觉得文章对你有帮助。
打赏激励下作者吧,谢谢支持! ~(@^_^@)~!

微信打赏 微信打赏

支付宝打赏 支付宝打赏

表情
0 条评论 最热评论 最新评论
  • 亲,暂时没有评论哦!赶紧来留下你的脚印吧!

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客

最新推荐
loading... 数据加载中...

超低服务器价格,值得购买!