这么优秀的开源脚手架项目,我不允许还有人不知道

6,501 阅读5分钟

前言

嗨,大家好,我是希留,一个被迫致力于全栈开发的老菜鸟。

今天给小伙伴们分享一个基于 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来标识该记录属于哪一个租户。这种方案的主要优点有成本低廉、每个数据库下支持的租户数量最多。但也有着隔离级别低、安全性低、数据备份和恢复难度高等缺点。

数据库设计图

sql.PNG

巧用 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+ 开发

系统截图

1.jpg

2.jpg

image.png

4.jpg

5.jpg

6.jpg

开源地址:

前端:gitee.com/huoqstudy/x…

后端:gitee.com/huoqstudy/x…

总结

以上就是本文的全部内容了,感谢大家的阅读。

如果觉得文章对你有帮助,还不忘帮忙点赞、收藏、关注、评论哟,您的支持就是我创作最大的动力!