Vue3+NestJS实现后台权限管理系统上线啦!(附源码及教程)
最近这段时间工作不忙,想着提升一下自己的技术,沉淀沉淀。于是做了一个开源的后台权限管理系统。因为我本身是一个前端开发,所以前端和服务端都是用的 JS 语言来开发的,前端用的框架是 vue3,后端则用的是 NestJS。经过一段时间的努力,最终于元旦节部署了第一个版本。为了让更多同学参与学习,我直接把前后端所有代码 全部开源 !不仅如此,开发过程中相关完整文字教程也都整理好了,感兴趣的朋友可以去看看。完整教程
本篇文章为大家介绍一下这个开源全栈后台管理系统,如果对大家有所帮助,欢迎点赞收藏!
项目演示
部分页面截图:
- 角色管理
菜单管理
用户管理
日志
个人中心
项目技术栈
前端部分主要技术栈:
- 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实现后台权限管理系统上线啦!(附源码及教程)的更多相关文章
- MVC + EF + Bootstrap 2 权限管理系统入门级(附源码)
MVC .EF 学习有大半年了,用的还不是很熟练,正好以做这样一个简单的权限管理系统作为学习的切入点,还是非常合适的. 开发环境: VS 2013 + Git + MVC 5 + EF 6 Code ...
- asp.net MVC通用权限管理系统-响应式布局-源码
一.Angel工作室简单通用权限系统简介 AngelRM(Asp.net MVC Web api)是基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术 ...
- 一个开源的C#和cefsharp项目:逐浪字体大师pc版上线(附源码开源)
z01逐浪字体大师,是一款基于C#和web引擎开发的字体设计软件,可以打开直接写字,也可以链接官方资源 ,附Github开源库,欢迎大家下载.客户端技术是基于wpf设计的,整个界面精美,与逐浪CMS技 ...
- 用GO写一个后台权限管理系统
最近用GO写了一个后台权限管理系统,在WIN10和ubuntu下部署,在win系统下编译ububtu的部署文件要先做如下配置 set GOARCH=amd64 set GOOS=linux go bu ...
- node实现后台权限管理系统
本文面向的是node初学者,目标是搭建一个基础的后台权限系统.使用的node框架是上手最简单的express,模板是ejs,这些在node入门的书籍中都有介绍说明,所以应该是难度较低的. 对于node ...
- web全栈后台权限管理系统(VUE+ElementUi+nodeJs+koa2)
web全栈后台权限管理系统(VUE+ElementUi+nodeJs+koa2) 主要技术 前端 vue 全家桶 ElementUI 后端 Node.js Koa2 Mongoess 数据库 mong ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(32)-swfupload多文件上传[附源码]
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(32)-swfupload多文件上传[附源码] 文件上传这东西说到底有时候很痛,原来的asp.net服务器 ...
- 构建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,对 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码]
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...
- Ext.NET 4.1 系统框架的搭建(后台) 附源码
Ext.NET 4.1 系统框架的搭建(后台) 附源码 代码运行环境:.net 4.5 VS2013 (代码可直接编译运行) 预览图: 分析图: 上面系统的构建包括三块区域:North.West和C ...
随机推荐
- redis教程(Mac)
1.首先,检查是否已经安装Homebrew,如果没有安装Homebrew,请先安装 2.使用Homebrew安装命令,在终端输入以下命令 brew install redis 当前默认安装5.0.8版 ...
- Jx.Cms开发笔记(三)-Views主题动态切换
效果展示 我们可以在后台动态切换主题 目前Jx.Cms有两个主题,其中一个是默认主题,另一个是仿的Blogs主题. 我们可以通过点击启用按钮来动态切换两个主题. 实现方法 首先写一个实现IViewLo ...
- 小白PDF阅读器开发-页面元素分割
以前用手机看PDF格式的电子书时,总感觉非常别扭,PDF格式的电子书在手机上缩放严重,字体太小,想看清楚得来回放大拖动,看书的兴致就在来回缩放拖动间被消耗没了!每次用手机看PDF电子书时就想着得做款能 ...
- scikit-learn中的Pipeline:构建高效、可维护的机器学习流程
我们使用scikit-learn进行机器学习的模型训练时,用到的数据和算法参数会根据具体的情况相应调整变化, 但是,整个模型训练的流程其实大同小异,一般都是加载数据,数据预处理,特征选择,模型训练等几 ...
- 鸿蒙UI开发快速入门 —— part09: 应用级状态管理LocalStorage & AppStorage
1.说在前面的话 前面几个章节中介绍的装饰器(@State.@Props.@Link.@Provide.@Consume.@Observed.@ObjectLink)仅能在页面内,即一个组件树上共享状 ...
- 【Amadeus原创】SQL Server查询某数据库所有表名行数和空间占用率
` select object_name(id) tablename, 8reserved/1024 reserved, rtrim(8dpages)+'kb' used, 8(reserved-dp ...
- vue3笔记
如何创建vue3项目 基于 vue 脚手架 npm i @vue/cli -g vue create <project-name> cd <project-name> npm ...
- Tableau 数值 以万显示
# Tableau 数字以万显示 0"."0,万
- fatal: repository 'http:/xxxx/root/x.git/' not found
我遇到的问题其实就是gitlab旧服务器迁移到新服务器之后用户的没权限了没有权限操作了 所以抛出该异常 解决办法是赋予新的权限
- Could not install packages due to an OSError: ("Connection broken: ConnectionResetError(10054, '远程主机强迫关闭 了一个现有的连接。', None, 10054, None)",
今天安装微软AI量化投资平台Qlib遇到报错 ERROR: Could not install packages due to an OSError: ("Connection broken ...