基于SpringBoot的通用管理系统源码+数据库+项目文档，前后端分离的通用管理系统模版，可用于开发毕业设计

# 【前后端分离开发模板】基于 Vue 和 SpringBoot 的通用管理系统 ## 软件简介 本软件是**基于 Vue 和 SpringBoot 的通用管理系统**，包含了**登陆注册、用户管理、部门管理、文件管理、权限管理、日志管理、个人中心、数据字典和代码生成**这九个功能模块，另外还有两张样例数据表和五张样例数据图，是一个很好的前后端分离开发模板，开发者可以在这个模板上进行二次开发，只需要实现需求方的业务逻辑，即可快速成型甲方的业务需求。 本系统采用了**基于角色的访问控制**，角色和菜单关联，一个角色可以配置多个菜单权限；然后再将用户和角色关联，一位用户可以赋予多个角色。这样用户就可以根据角色拿到该有的菜单权限，更方便管理者进行权限管控。 本系统还**封装了文件管理功能**，在其他模块如若要实现图片/文件上传预览时，前端只需导入现成的 Vue 组件即可实现（使用 viewerjs 依赖实现），后端只需定义 String 类型的实体类变量即可，无需再去研究文件上传预览的相关功能，简化了开发者的工作量。 本系统还自带**基于 beetl 代码生成器**功能，开发者只需要输入类名（如 Student）和类备注（如学生），运行 main 函数即可自动生成后端的所有 MVC 结构代码，无需开发增删改查的 API 接口。对于前端，开发者只需输入后端实体类的完整路径，利用 Java 的反射原理，拿到后端实体类的字段，即可自动生成前端所有代码，生成的模块代码包含基础的增删改查功能，简化开发者的工作量。    ## 现有成品 使用该模板开发的管理系统名单如下。 - 基于 Vue 和 SpringBoot 的大病保险管理系统 <https://gitee.com/yyzwz/medicineSystem> - 基于 Vue 和 SpringBoot 的超市账单管理系统 <https://gitee.com/yyzwz/bill-system> - 基于 Vue 和 SpringBoot 的通讯录管理系统 <https://gitee.com/yyzwz/address-book-system> - 基于 Vue 和 SpringBoot 的假日旅社管理系统 <https://gitee.com/yyzwz/holiday-hotel> - 基于 Vue 和 SpringBoot 的 OA 系统 <https://gitee.com/yyzwz/hostel> - 基于 Vue 和 SpringBoot 的医院门诊预约挂号系统 <https://gitee.com/yyzwz/order-register> - 基于 Vue 和 SpringBoot 的资产采购管理系统 <https://gitee.com/yyzwz/asset-purchase> 未来将会开发出更多的管理系统，敬请期待！ ## 部署说明 ```javascript // 前端（VsCode） // 1. 下载安装 Node.js（18 版本）和 VsCode // 2. 卸载原 Vue 脚手架（可选） npm uninstall -g @vue/cli // 3. 安装 Vue 脚手架 npm install -g @vue/cli // 4. 安装淘宝镜像（可选） npm install -g cnpm --registry=http://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org // 5. 安装前端依赖 npm i // 6. 启动前端项目 npm run dev // 后端（Idea） // 1. 导入项目 // 2. 配置 Maven // 3. 导入数据库，建议 MySQL8，若 5.7 版本需设置编码为 UTF-8 // 4. 等待后端依赖下载，完成后启动项目，或编译后执行 mvn spring-boot:run ``` ## 更新日志 V1.1.1 2022-09-09 修复按钮级菜单权限无法添加的问题。 V1.1.0 2022-09-02 软件著作权申请通过，《基于 Vue 和 SpringBoot 的通用管理系统》正式开源。 ## 软件技术选型 ### 前端 lVue：Vue 是构建前端界面的核心框架，本系统采用 2.6.14 版本。 View UI：基于 Vue.js 2 的组件库，本系统采用 4.7.0 版本。 ### 后端 - Spring Boot：构建系统核心逻辑的后端框架，本系统采用 2.7.3 版本。 - MyBatis Plus：后端连接数据库的框架，本系统采用 3.5.2 版本。 ### 数据库 - MySQL：本项目的主数据库，本系统采用 8.0.30 版本。 - Redis：本系统采用基于 Windows 版本的 Redis，用于图形验证码和用户菜单权限的临时存储，采用了 5.0.14.1 版本。 ### 开发环境 - VsCode：项目前端的开发工具，使用版本为 1.68.0。 - IntelliJ IDEA ：项目后端的开发工具，使用版本为 2022.2.1。 - JDK：Java 的开发环境，使用版本为 17.0.4.1。 - Maven：后端项目的打包工具，使用版本为 3.6.2。 - NodeJs：前端项目的开发环境，使用版本为 16.13.0。 ### 图表(Antv)     ## 软件架构分析 基于 Vue 和 SpringBoot 的通用管理系统包括了**登陆注册、用户管理、部门管理、文件管理、权限管理、日志管理、个人中心、数据字典和代码生成**这九大功能模块，其架构如下图所示。  接下来，分别对九大模块进行详细介绍。 ## 登陆注册模块 登陆注册模块用于实现用户的登陆功能和注册功能，用户在登陆时需要输入登陆账号、密码和图形验证码，系统效验无误后即可进入系统，登陆流程图如下所示。  系统的登陆界面如下所示。  当用户没有输入验证码，系统会提示“验证码不能为空”，如下图所示。  当用户输入了错误的验证码，系统会提示“验证码不正确”，如下图所示。  当用户输入了错误的账号密码，系统会提示“账号密码不正确”，如下图所示。  图形验证码默认有效期为 2 分钟，如用户超过 2 分钟没有刷新验证码，验证码将会失效，系统会给与以下提示。  ```java // 用户登陆前端判断代码 submitLogin() { this.$refs.usernameLoginForm.validate(valid => { if (valid) { this.loading = true; login({ username: this.form.username, password: this.form.password, code: this.form.imgCode, captchaId: this.captchaId, saveLogin: this.saveLogin }).then(res => { if (res.success) { this.afterLogin(res); } else { this.loading = false; this.getCaptchaImg(); } }); } }); } ``` 用户在注册时，需要提供手机号、登陆密码和图形验证码，系统效验无误后即可完成注册，再跳转到登陆界面，注册的流程图如下所示。  系统的注册界面如下图所示，用户需要输入手机号、姓名、密码和图形验证码完成注册。  ```java // 用户注册前端判断代码 submitRegist() { this.form.captchaId = this.captchaId; this.form.mobile = this.form.username; this.$refs.usernameLoginForm.validate(valid => { if (valid) { if (!this.form.code) { this.errorCode = "验证码不能为空"; return; } else { this.errorCode = ""; } this.loading = true; regist(this.form).then(res => { this.loading = false; if (res.success) { this.$router.push({ name: "login" }); } }); } }); } ``` ## 用户管理模块 用户管理模块用于实现对系统用户的添加、修改、删除、查询功能，其功能结构图如下所示。  用户实体类的字段明细如下： - 登陆账号 - 登陆密�