最近這段時(shí)間工作不忙,想著提升一下自己的技術(shù),沉淀沉淀。于是做了一個(gè)開源的后臺(tái)權(quán)限管理系統(tǒng)。因?yàn)槲冶旧硎且粋€(gè)前端開發(fā),所以前端和服務(wù)端都是用的 JS 語言來開發(fā)的,前端用的框架是 vue3,后端則用的是 NestJS。經(jīng)過一段時(shí)間的努力,最終于元旦節(jié)部署了第一個(gè)版本。

本篇文章為大家介紹一下這個(gè)開源全棧后臺(tái)管理系統(tǒng)。

項(xiàng)目演示

項(xiàng)目 git 地址^[1]

項(xiàng)目演示地址^[2]

部分頁面截圖:

• 角色管理

• 菜單管理 
• 用戶管理 
• 日志 
• 個(gè)人中心

項(xiàng)目技術(shù)棧

前端部分主要技術(shù)棧:

• vue3
• element-plus
• pinia
• tailwindcss
• TypeScript
• Vite

后端部分主要技術(shù)棧:

• NestJS
• TypeScript
• MySQL
• TypeORM
• JWT
• Redis
• Swagger

部署部分主要技術(shù)棧:

• Docker
• nginx
• githb actions

項(xiàng)目功能

項(xiàng)目功能主要包括:

• JWT 實(shí)現(xiàn)用戶登錄
• Swagger 在線接口文檔
• 基于 RBAC 權(quán)限管理
• 動(dòng)態(tài)路由獲取
• 面包屑導(dǎo)航
• 自定義權(quán)限指令
• 菜單管理
• 角色管理
• 用戶管理
• 日志管理
• Excel 導(dǎo)入導(dǎo)出
• 個(gè)人中心
• docker+github actions 一鍵自動(dòng)部署阿里云

項(xiàng)目介紹

由于篇幅原因,這里給大家簡單介紹一些功能。

• 返回結(jié)果統(tǒng)一封裝

項(xiàng)目中所有的接口返回結(jié)果都需要封裝成統(tǒng)一的格式,方便前端處理。后端通過一個(gè)攔截器實(shí)現(xiàn)返回結(jié)果過濾

前端拿到的結(jié)果如下

• 業(yè)務(wù)異常信息處理

當(dāng)請(qǐng)求出現(xiàn)業(yè)務(wù)異常的時(shí)候,會(huì)返回一個(gè)統(tǒng)一的錯(cuò)誤信息。后端封裝代碼如下

當(dāng)我們想拋出業(yè)務(wù)異常時(shí),只需要調(diào)用一下即可,比如密碼錯(cuò)誤throw new ApiException('密碼錯(cuò)誤', ApiErrorCode.PASSWORD_ERR);

此時(shí)前端拿到的結(jié)果如下

• Swagger 在線接口文檔

項(xiàng)目本身引入了 Swagger,我們只需要在后端 Controller 上添加添加一些裝飾器就能看到相關(guān)接口

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

• 自定義權(quán)限指令

在前端 Vue 項(xiàng)目中,可以使用自定義指令v-hasPerm來控制當(dāng)前用戶是否有權(quán)限操作某個(gè)按鈕。比如下面這個(gè)按鈕,只有當(dāng)前用戶有system:menu:add權(quán)限時(shí),才會(huì)顯示。

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

而對(duì)應(yīng)的后端接口Controller部分則需要通過一個(gè)自定義裝飾器Permissions定義這個(gè)接口需要的權(quán)限

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


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

• 動(dòng)態(tài)路由獲取

在前端 Vue 項(xiàng)目中,當(dāng)用戶登錄成功后,會(huì)根據(jù)用戶的角色獲取到對(duì)應(yīng)的路由菜單配置,然后動(dòng)態(tài)生成路由。

部分代碼展示:

其中獲取到的路由已經(jīng)是后端處理好的, 后端部分代碼展示

前端獲取的數(shù)據(jù)結(jié)構(gòu):

• Excel 導(dǎo)入導(dǎo)出

Excel 導(dǎo)入導(dǎo)出功能主要用到了xlsx庫。后端部分代碼展示:

• 分頁數(shù)據(jù)查詢

部分代碼展示:

前端獲取的數(shù)據(jù)結(jié)構(gòu):

• 自動(dòng)部署

自動(dòng)部署我們使用了GitHub Actions,當(dāng)我們提交代碼到GitHub后,會(huì)自動(dòng)觸發(fā)GitHub Actions的工作流,然后會(huì)自動(dòng)部署到阿里云服務(wù)器上。

部分代碼配置如下:

當(dāng)然功能還不止這些, 由于篇幅原因, 這里就不一一介紹了。相關(guān)完整教程也已經(jīng)寫完了,感興趣可以去看看。如果有什么問題,歡迎留言。

同時(shí)項(xiàng)目還有很多沒有完善的地方,后續(xù)會(huì)繼續(xù)完善,爭取打造一個(gè)以前端開發(fā)者為中心的全棧后臺(tái)權(quán)限管理系統(tǒng)!

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

標(biāo)注地址

[1] https://github.com/qddidi/fs-admin

[2] http://fsadmin.xyz/#/