最近这段时间工作不忙,想着提升一下自己的技术,沉淀沉淀。于是做了一个开源的后台权限管理系统。因为我本身是一个前端开发,所以前端和服务端都是用的 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‌

Vue3+NestJS实现后台权限管理系统上线啦!(附源码及教程)的更多相关文章

  1. MVC + EF + Bootstrap 2 权限管理系统入门级(附源码)

    MVC .EF 学习有大半年了,用的还不是很熟练,正好以做这样一个简单的权限管理系统作为学习的切入点,还是非常合适的. 开发环境: VS 2013 + Git + MVC 5 + EF 6 Code ...

  2. asp.net MVC通用权限管理系统-响应式布局-源码

    一.Angel工作室简单通用权限系统简介 AngelRM(Asp.net MVC Web api)是基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术 ...

  3. 一个开源的C#和cefsharp项目:逐浪字体大师pc版上线(附源码开源)

    z01逐浪字体大师,是一款基于C#和web引擎开发的字体设计软件,可以打开直接写字,也可以链接官方资源 ,附Github开源库,欢迎大家下载.客户端技术是基于wpf设计的,整个界面精美,与逐浪CMS技 ...

  4. 用GO写一个后台权限管理系统

    最近用GO写了一个后台权限管理系统,在WIN10和ubuntu下部署,在win系统下编译ububtu的部署文件要先做如下配置 set GOARCH=amd64 set GOOS=linux go bu ...

  5. node实现后台权限管理系统

    本文面向的是node初学者,目标是搭建一个基础的后台权限系统.使用的node框架是上手最简单的express,模板是ejs,这些在node入门的书籍中都有介绍说明,所以应该是难度较低的. 对于node ...

  6. web全栈后台权限管理系统(VUE+ElementUi+nodeJs+koa2)

    web全栈后台权限管理系统(VUE+ElementUi+nodeJs+koa2) 主要技术 前端 vue 全家桶 ElementUI 后端 Node.js Koa2 Mongoess 数据库 mong ...

  7. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(32)-swfupload多文件上传[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(32)-swfupload多文件上传[附源码] 文件上传这东西说到底有时候很痛,原来的asp.net服务器 ...

  8. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(6)-Unity 2.x依赖注入by运行时注入[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(6)-Unity 2.x依赖注入by运行时注入[附源码] Unity 2.x依赖注入(控制反转)IOC,对 ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...

  10. Ext.NET 4.1 系统框架的搭建(后台) 附源码

    Ext.NET 4.1 系统框架的搭建(后台) 附源码 代码运行环境:.net 4.5  VS2013 (代码可直接编译运行) 预览图: 分析图: 上面系统的构建包括三块区域:North.West和C ...

随机推荐

  1. JPEG格式研究——(3)霍夫曼解码

    因为霍夫曼编码以bit为单位,长度又不确定,读取时无法区分,JPEG采用了范式霍夫曼编码. 读取并生成霍夫曼表 JPEG中DC系数和AC系数是分别进行编码将霍夫曼表保存在DQT中. 直接上代码解释可能 ...

  2. ContosoRetailDW数据库恢复问题

    https://www.microsoft.com/en-us/download/details.aspx?id=18279 下载 ContosoBIdemoBAK.exe和ContosoBIdemo ...

  3. 2024web漏洞扫描神器xray安装及使用_2024-11-28

    一.功能 开源的Web漏洞扫描工具,支持以下漏洞 XSS漏洞检测 (key: xss) SQL 注入检测 (key: sqldet) 命令/代码注入检测 (key: cmd-injection) 目录 ...

  4. 如何在原生鸿蒙中进行RN的断点调试

    方式一  chrome devtools的方式 第一步:metro的方式加载bundle 先设置好原生这边的代码,然后记得打开RN服务器. 注意这个enableDebugger的值一定要设置为true ...

  5. vue表格轮播插件

    1.前言 需求:制作大屏看板时,经常要展示表格数据,通常一页时放不下的,表格需要自动滚动,并维持表头固定 为何自己封装:网上的滚动组件有2类,一种传入json数据进行滚动(DataV),优点是可以做到 ...

  6. canvas(三)绘制矩形

    1.绘制矩形轨迹 相关语法:ctx.rect(x,y,width,height),根据传入的参数(起始坐标和宽高)用来绘制一个矩形轨迹 注意:ctx.rect()和ctx.lineTo()绘制的都是轨 ...

  7. uni app 封装接api接口

    创建文件  base.js let baseURL = ''; // 是否在控制台显示接口请求日志,本地环境启用,打包环境禁用 let showHttpLog = false; // 测试环境 bas ...

  8. vue使用高德地图Amap未定义问题

    // 引入高德地图 import VueAMap from 'vue-amap'; Vue.use(VueAMap); // 初始化vue-amap VueAMap.initAMapApiLoader ...

  9. windows和Linux上安装nvm及相关配置

    Windows安装: 1.详情参考:https://blog.csdn.net/goods_yao/article/details/137854626本文详细介绍了在Windows系统中使用nvm(N ...

  10. windows安装tomcat10

    ​下载安装jdk17 :jdk-17_windows-x64_bin.exe 配置JAVA环境变量 JAVA_HOME:C:\Program Files\Java\jdk-17 PATH:%Java_ ...