Vue3+NestJS实现后台权限管理系统上线啦!(附源码及教程)

最近这段时间工作不忙,想着提升一下自己的技术,沉淀沉淀。于是做了一个开源的后台权限管理系统。因为我本身是一个前端开发,所以前端和服务端都是用的 JS 语言来开发的,前端用的框架是 vue3,后端则用的是 NestJS。经过一段时间的努力,最终于元旦节部署了第一个版本。为了让更多同学参与学习，我直接把前后端所有代码全部开源！不仅如此,开发过程中相关完整文字教程也都整理好了,感兴趣的朋友可以去看看。完整教程

本篇文章为大家介绍一下这个开源全栈后台管理系统,如果对大家有所帮助,欢迎点赞收藏!

项目演示

项目 git 地址

项目演示地址

部分页面截图:

角色管理

菜单管理
用户管理
日志
个人中心

项目技术栈

前端部分主要技术栈:

vue3
element-plus
pinia
tailwindcss
TypeScript
Vite

后端部分主要技术栈:

NestJS
TypeScript
MySQL
TypeORM
JWT
Redis
Swagger

部署部分主要技术栈:

Docker
nginx
githb actions

项目功能

项目功能主要包括:

JWT 实现用户登录
Swagger 在线接口文档
基于 RBAC 权限管理
动态路由获取
面包屑导航
自定义权限指令
菜单管理
角色管理
用户管理
日志管理
Excel 导入导出
个人中心
docker+github actions 一键自动部署阿里云

项目介绍

由于篇幅有限，这里简单介绍一些核心功能。

返回结果统一封装

项目中所有的接口返回结果都封装成统一的格式，方便前端处理。后端通过拦截器实现返回结果的统一处理。

前端拿到的结果如下

业务异常信息处理

当请求出现业务异常时，会返回统一的错误信息。后端封装代码如下：

当我们想抛出业务异常时,只需要调用一下即可,比如密码错误throw new ApiException('密码错误', ApiErrorCode.PASSWORD_ERR);

此时前端拿到的结果如下

Swagger 在线接口文档

项目集成了Swagger，只需在后端Controller中添加装饰器，即可生成在线接口文档。

直接打开http://localhost:3000/fs_admin/api#/即可查看

自定义权限指令

在前端Vue项目中，可以使用自定义指令v-hasPerm来控制用户是否有权限操作某个按钮。例如：

 <el-button
          type="primary"
          v-hasPerm="['system:menu:add']"
          plain
          icon="Plus"
          @click="handleAdd()"
          >新增</el-button
        >

后端接口通过自定义装饰器@Permissions定义所需的权限：

 //新增菜单
  @Post('createMenu')
  @Permissions('system:menu:add')
  async createMenu(
    @Request() req,
    @Body()
    createMenuDto: CreateMenuDto,
  ) {


    return await this.menuService.createMenu(req, createMenuDto);
  }