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

  }

动态路由获取

用户登录成功后，前端会根据用户的角色动态生成路由菜单。后端处理好的路由数据结构如下:

Excel 导入导出功能使用了xlsx库，后端代码如下:

前端获取的数据结构:

Excel 导入导出

Excel 导入导出功能主要用到了xlsx库。后端部分代码展示:

分页数据查询

部分代码展示:

前端获取的数据结构:

自动部署

自动部署通过GitHub Actions实现，提交代码后会自动触发工作流，部署到阿里云服务器。

GitHub Actions配置:

当然，项目功能远不止这些，由于篇幅限制，这里就不一一介绍了。完整的教程已经整理完毕，感兴趣的朋友可以查看。如果有什么问题，欢迎留言讨论。

同未来，我还会继续完善这个项目，争取打造一个以前端开发者为中心的全栈后台权限管理系统！

Any application that can be written in JavaScript, will eventually be written in JavaScript‌