前言
嗨,大家好,我是希留,一个被迫致力于全栈开发的老菜鸟。
今天给小伙伴们分享一个基于 SpringBoot + Vue 实现的前后端分离后台管理系统项目;
简介
这个是一个完全开源的项目,使用MIT协议,无需授权,可以直接进行商用。
基于 Spring Boot 多模块架构,采用B2B2C架构设计,支持多租户saas,是一套快速开发框架、脚手架、后台管理系统、RBAC权限系统,上手简单,拿来即用,可用来快速开发项目搭建业务。
功能概述
基于 RBAC 的权限模块设计
系统权限控制采用 RBAC 基于角色的权限访问控制(Role-Based Access Control) 思想(一种最常见的权限管理思想,在一些对于全权限控制要求比较严格的系统会使用到)。
什么是 RBAC 呢?
简单地说:一个用户可以拥有若干角色,每一个角色有可以被分配若干权限这样,就构造成“用户-角色-权限” 的授权模型。在这种模型中,用户与角色、角色与权限之间构成了多对多的关系,如下图
在 RBAC 中,权限与角色相关联,用户通过成为适当角色的成员而得到这些角色的权限。这就极大地简化了权限的管理。
采用 B2B2C 架构设计
数据库设计采用当下最流行的 B2B2C 设计,支持多租户SAAS业务。多租户的数据库设计方案主要有三种:
- 1、独立数据库
- 2、共享数据库,独立Schema
- 3、共享数据库,共享数据表
本项目使用的是第3种,所有租户共用一个数据库、一套数据库表,在表中增加租户ID来标识该记录属于哪一个租户。这种方案的主要优点有成本低廉、每个数据库下支持的租户数量最多。但也有着隔离级别低、安全性低、数据备份和恢复难度高等缺点。
数据库设计图
巧用 AOP 简化代码
AOP(Aspect-Oriented Programming:面向切面编程) 能够将那些与业务无关,却为业务模块所共同调用的逻辑或责任(例如事务处理、日志管理、权限控制等)封装起来,便于减少系统的重复代码,降低模块间的耦合度,提高系统可拓展性和可维护性。
这个项目中就大量使用了 AOP 思想。简单举个例子吧!
日志记录
利用 AOP 方式记录日志,只需要在 controller
的方法上使用 @Log("")
注解,就可以将用户操作记录到数据库,源码可查看 xiliu-server
这个 Module。
@ApiOperation(value = "用户头像上传")
@Log(title = "用户头像上传", businessType = BusinessType.UPDATE)
@PostMapping("/profile/avatar")
public R uploadAvatar(@RequestParam("avatarfile") MultipartFile file) throws Exception {
if (!file.isEmpty()) {
String avatar = CosClientUtils.upload(file, "avatar");
if (userService.updateUserAvatar(SecurityUtils.getUserId(), avatar)) {
// 更新缓存用户头像
LoginUser loginUser = SecurityUtils.getLoginUser();
loginUser.getUser().setAvatar(avatar);
tokenService.refreshToken(loginUser);
return R.ok(avatar);
}
}
return R.error("上传头像异常,请联系管理员");
}
内置功能
序号 | 模快 | 说明 |
---|---|---|
1 | 租户管理 | 配置系统租户,支持 SaaS 场景下的多租户功能。 |
2 | 配置租户套餐 | 自定每个租户的菜单、操作、按钮的权限。 |
3 | 用户管理 | 用户是系统操作者,该功能主要完成系统用户配置。 |
4 | 部门管理 | 配置系统组织机构(公司、部门、小组),树结构展现支持数据权限。 |
5 | 菜单管理 | 配置系统菜单,操作权限,按钮权限标识等。 |
6 | 角色管理 | 角色菜单权限分配、设置角色按机构进行数据范围权限划分。 |
7 | 字典管理 | 对系统中经常使用的一些较为固定的数据进行维护。 |
8 | 操作日志 | 系统正常操作日志记录和查询;系统异常信息日志记录和查询。 |
9 | 登录日志 | 系统登录日志记录查询包含登录异常。 |
10 | 在线用户 | 当前系统中活跃用户状态监控。 |
11 | 代码生成 | 前后端代码的生成(java、html、xml、sql)支持CRUD下载 。 |
12 | 系统接口 | 根据业务代码自动生成相关的api接口文档。 |
13 | 服务监控 | 监视当前系统CPU、内存、磁盘、堆栈等相关信息。 |
13 | 缓存监控 | 监视当前缓存的相关信息。 |
核心技术
依赖
- [Mysql] 5.7+
- [Jdk] 1.8+
- [Maven] 3.0+
- [Redis] 3.0+
后端
- Spring Boot2.5.4.RELEASE: Spring Boot是一款开箱即用框架,让我们的Spring应用变的更轻量化、更快的入门。在主程序执行main函数就可以运行。你也可以打包你的应用为jar并通过使用java -jar来运行你的Web应用;
- Mybatis-plus3.5.1: MyBatis-plus(简称 MP)是一个 MyBatis (opens new window) 的增强工具。
- Spring Security: 认证和授权框架
- JWT: 登录支持
- Redis: 分布式缓存
- Easyexcel: 简化导入导出工具
前端
- npm:node.js的包管理工具,用于统一管理我们前端项目中需要用到的包、插件、工具、命令等,便于开发和维护。
- webpack:用于现代 JavaScript 应用程序的_静态模块打包工具
- ES6:Javascript的新版本,ECMAScript6的简称。利用ES6我们可以简化我们的JS代码,同时利用其提供的强大功能来快速实现JS逻辑。
- vue-cli:Vue的脚手架工具,用于自动生成Vue项目的目录及文件。
- vue-router:Vue提供的前端路由工具,利用其我们实现页面的路由控制,局部刷新及按需加载,构建单页应用,实现前后端分离。
- element-ui:基于MVVM框架Vue开源出来的一套前端ui组件。
- avue: 用该组件包裹后可以变成拖拽组件,采用相对于父类绝对定位;用键盘的上下左右也可以控制移动
- vue-echarts: vue-echarts是封装后的vue插件,基于 ECharts v4.0.1+ 开发
系统截图
开源地址:
总结
以上就是本文的全部内容了,感谢大家的阅读。
如果觉得文章对你有帮助,还不忘帮忙点赞、收藏、关注、评论哟,您的支持就是我创作最大的动力!