前言：

从开始参加工作到开始准备的系统之前，我一直想自己独立完成一个系统的开发，检验一下自己的工作学习成果。2020年工作中全面的使用到SpringCloud全套相关技术，萌生了使用SpringCloud技术栈作为这个系统后端的实现。2021年工作中又学习了React相关的前端框架，我就放弃打算前端使用Vue技术栈的想法。这个系统从2020年9月份开始到2021年4月份封板（中间也停过小4个月），花费了不少的私下时间，算是对自己工作学习的一个总结吧。

一、系统介绍：

• hanxiaozhang 后台管理系统是前后端分离的开源项目。前端使用React+Ant Design Pro进行开发，后端使用Springcloud微服务框架进行开发。
• hanxiaozhang 后台管理系统主要包括登录管理、基础管理、系统管理、工具管理、图形编辑器、用户中心等功能，避免开发人员重复造轮子，减少开发量（部分功能为开发完成）。
• hanxiaozhang 后台管理系统相关功能由作者独自完成，一是为了提高开发技能，二是希望可以帮助其他人，并能结交志同道合的朋友。

二、系统功能：

• 登录管理：

登录：使用账户密码+验证码的方式进行登录。安全方面使用Oauth2.0 + Spring Security保障系统的安全。

登出：登出操作可以清除浏览器端Localstorage缓存和后端数据Token信息。

• 首页：

介绍该系统相关功能。

• 基础管理：

字典管理：实现字典数据的增删查改、批量删除。

日志管理：实现日志数据的增删查，支持切面注解方式为相关方法保存日志到数据库（@LogAnnotation），执行切面方式打印日志到控制台。

文件管理：实现文件数据的增删查改，并且支持预览（只读文件预览有些问题，待解决），逻辑可以参考《基于Springboot+Bootstrap的文件管理全套解决方案（文件列表、上传、预览、下载、删除、打包下载等）》。

• 系统管理:

部门管理：实现部门数据的增删查改、批量删除，支持树结构展示数据。

岗位管理：实现岗位数据的增删查改、批量删除。

菜单管理：实现菜单数据的增删查改、批量删除，支持树结构展示数据和按钮级别权限标识的管理。

角色管理：实现角色数据的增删查改、批量删除，支持角色选择需要的菜单；支持角色选择需要的数据权限（待开发）。

用户管理：实现用户数据的增删查改、批量删除、重置密码，支持用户选择相应的部门、岗位和角色。

• 工具管理：

代码生成器：根据表结构自动生成前后端代码，减少开发量。

定时任务：使用quartz框架管理系统需要维护的定时任务，实现定时任务的增删查改、批量删除、暂定与开启，该部分参考了《SpringBoot2.x集成Quartz实现定时任务管理（持久化到数据库）》。

• 图形编辑器：

流程编辑器：支持在线编辑流程图。

脑图编辑器：支持在线脑图流程图。

拓扑编辑器：支持在线拓扑流程图。

• 用户中心：

用户设置：支持用户修改自己个人信息。

用户重置密码：支持用户重置密码。

三、技术栈：

• 后端（Java）：

微服务框架：SpringCloud，主要组件包括：服务中心：Eureka、配置中心：Config、网关路由：Zuul、负载均衡器：Ribbon、断路器：Hystrix、RestFul远程调用：Fegin等，相关内容可以参考《hanxiaozhang带你学SpringCloud》。

微服务监控平台：SpringCloud Admin。

微服务链路链路追踪工具：Zipkin。

分布式事务框架：Seata（待集成），相关内容可以参考《SpringCloud的异常处理体系--分布式事务Seata（三）》。

容器化部署：Docker，相关内容可以参考《hanxiaozhang带你学Docker》。

视图层框架：SpringMVC。

持久层框架：MyBatis。

安全框架：Oauth2.0 + Spring Security。

缓存框架：Redis。

数据库连接池：Alibaba Druid。

工具类：Lombok、Hutool等。

• 前端（TypsScript、ES6）：

前端框架：React。

前端模板：Ant Design、Ant Design Pro。

细化框架：Umi、Umi-Request、Dva、Mock、React Hooks、Webpack、Less等。

前端容器：Nginx。

• 数据库：

MySQL、Redis。

• 项目管理：

版本管理：Git。

项目构建：Maven。

四、开发工具：

Idea、WebStorm、Navicat、RedisDesktopManager。

五、项目地址：

• 后端：

hanxiaozhang: hanxiaozhang 后台管理系统

• 前端：

hanxiaozhang-react-admin: hanxiaozhang 后台管理系统前端开源项目