Vue3+NestJS实现后台权限管理系统上线啦!(附源码及教程)
最近这段时间工作不忙,想着提升一下自己的技术,沉淀沉淀。于是做了一个开源的后台权限管理系统。因为我本身是一个前端开发,所以前端和服务端都是用的 JS 语言来开发的,前端用的框架是 vue3,后端则用的是 NestJS。经过一段时间的努力,最终于元旦节部署了第一个版本。为了让更多同学参与学习，我直接把前后端所有代码 全部开源 ！不仅如此,开发过程中相关完整文字教程也都整理好了,感兴趣的朋友可以去看看。完整教程本篇文章为大家介绍一下这个开源全栈后台管理系统,如果对大家有所帮助,欢迎点赞收藏!
项目演示
项目 git 地址
项目演示地址
部分页面截图:
[*]角色管理
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/829477e6afe744308d45d042ad01c48b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=vtq1klQXMsyPOM6A25iV7DbDk68%3D
[*]菜单管理
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/35c60613326c4746a65137e4fb39ab0a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=4hoR0jvO6qm2FsaELLlnHf2S37s%3D
[*]用户管理
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/4c996d8d02a745ad9bf18cf6905e7b0d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=bAYRmORaPjZ8xtKXo8Pid4gorK0%3D
[*]日志
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/e0400b4b01404eef9148b41100032add~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=YFFNhc3OqepUQf%2F9l0qdJSFpKws%3D
[*]个人中心
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/b9b39b13ed334d1ba5772924e1accd69~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=2YNPjWDtTvQIg%2Bq7clUFniqivNA%3D
项目技术栈
前端部分主要技术栈:
[*]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 一键自动部署阿里云
项目介绍
由于篇幅有限，这里简单介绍一些核心功能。
[*]返回结果统一封装
项目中所有的接口返回结果都封装成统一的格式，方便前端处理。后端通过拦截器实现返回结果的统一处理。
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/ca324ebe01b4426aa1c6962c642d656f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=emCZbKbY%2BKZ28h24oD221TLdT0U%3D
前端拿到的结果如下
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/5ee7f85709c5463e9706360e1b3787c1~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=Giu1gerbyDeoHE8UxYmQIj%2Fswus%3D
[*]业务异常信息处理
当请求出现业务异常时，会返回统一的错误信息。后端封装代码如下：
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/b89fcb42219240fbbc10b109f4ec02da~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=kynvr4HB6CjnGRoiHvNWnFAYbls%3D
当我们想抛出业务异常时,只需要调用一下即可,比如密码错误throw new ApiException('密码错误', ApiErrorCode.PASSWORD_ERR);
此时前端拿到的结果如下
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/d34b31eb2bf7408aa968a9766e4c2df7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=u%2Fp8Q6qAaFcKzBBSyXzSx7ocKIc%3D
[*]Swagger 在线接口文档
项目集成了Swagger，只需在后端Controller中添加装饰器，即可生成在线接口文档。
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/62aaa69bcbda4358a92a584926c6d7ea~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=npQ4zNa36lPJTwhXvJqj2ya4du4%3D
直接打开http://localhost:3000/fs_admin/api#/即可查看
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/725a58958ab3453ba36fa814a8c19444~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=jMDmTy9Du8jJfX715fpvVRKC%2Fq4%3D
[*]自定义权限指令
在前端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);}
[*]动态路由获取
用户登录成功后，前端会根据用户的角色动态生成路由菜单。后端处理好的路由数据结构如下:
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/62cab619def341bd82da4a55343e273c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=VxISnXDb2YM8aptT9TJPqgTtrZI%3D
Excel 导入导出功能使用了xlsx库，后端代码如下:
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/ab10c6fb7cd84e31afca5dea8617f52f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=JVTtMhhL3fm9H%2BHGCk08NfYpAeA%3D
前端获取的数据结构:
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/2b97fee512294bba8c9ed80649897656~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=vWQD06gxHVIG6bys7%2FXv%2FLxikKY%3D
[*]Excel 导入导出
Excel 导入导出功能主要用到了xlsx库。后端部分代码展示:
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/67b0e99732524337a7d907bd70ae35a9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=ZDnErXM3IvUkECkwA%2BILHMjcp3s%3D
[*]分页数据查询
部分代码展示:
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/9e56edd45e1f46e4aaa428ddf4027bac~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=VZq%2FsmrEEiHyXhKVRig9H8hpqI4%3D
前端获取的数据结构:
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/a1c74af139b649589b197b7e3239e972~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=xIfR8h0SDnhDSrXewyq2714X0Xs%3D
[*]自动部署
自动部署通过GitHub Actions实现，提交代码后会自动触发工作流，部署到阿里云服务器。
GitHub Actions配置:
https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/e26dba0f885045caaaac3e7e3c0c554f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5Lic5pa55bCP5pyI:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzE5MzQyMjAwMTQ3NDE5OSJ9&rk3s=f64ab15b&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1740109782&x-orig-sign=A0ouYLZZ2I4ZA90iSZ%2F5stD%2BqQE%3D
当然，项目功能远不止这些，由于篇幅限制，这里就不一一介绍了。完整的教程已经整理完毕，感兴趣的朋友可以查看。如果有什么问题，欢迎留言讨论。
同未来，我还会继续完善这个项目，争取打造一个以前端开发者为中心的全栈后台权限管理系统！
Any application that can be written in JavaScript, will eventually be written in JavaScript
页:
[1]