当前位置：首页 > article >正文

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

article 2025/2/25 5:53:09

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

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

项目演示

项目 git 地址 FSADMIN

项目演示地址演示地址

部分页面截图:

角色管理

image.png

菜单管理

用户管理

日志

个人中心

image.png

项目技术栈

前端部分主要技术栈:

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 一键自动部署阿里云

项目介绍

由于篇幅原因,这里给大家简单介绍一些功能。

返回结果统一封装

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

image.png

前端拿到的结果如下

image.png

业务异常信息处理

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

image.png

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

此时前端拿到的结果如下

image.png

Swagger 在线接口文档

项目本身引入了 Swagger,我们只需要在后端 Controller 上添加添加一些装饰器就能看到相关接口

image.png

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

image.png

自定义权限指令

在前端 Vue 项目中,可以使用自定义指令v-hasPerm来控制当前用户是否有权限操作某个按钮。比如下面这个按钮,只有当前用户有system:menu:add权限时,才会显示。

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

而对应的后端接口Controller部分则需要通过一个自定义装饰器Permissions定义这个接口需要的权限

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


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