项目编号:A22-001,源代码在文章底部请自取,关于该项目的任何问题可在【我的社区——小郑全栈开发】中提出,我会及时解答!
软件简介
本软件是基于 Vue 和 SpringBoot 的通用管理系统,包含了登陆注册、用户管理、部门管理、文件管理、权限管理、日志管理、个人中心、数据字典和代码生成这九个功能模块,另外还有两张样例数据表和五张样例数据图,是一个很好的前后端分离开发模板,开发者可以在这个模板上进行二次开发,只需要实现需求方的业务逻辑,即可快速成型甲方的业务需求。
本系统采用了基于角色的访问控制,角色和菜单关联,一个角色可以配置多个菜单权限;然后再将用户和角色关联,一位用户可以赋予多个角色。这样用户就可以根据角色拿到该有的菜单权限,更方便管理者进行权限管控。
本系统还封装了文件管理功能,在其他模块如若要实现图片/文件上传预览时,前端只需导入现成的 Vue 组件即可实现(使用 viewerjs 依赖实现),后端只需定义 String 类型的实体类变量即可,无需再去研究文件上传预览的相关功能,简化了开发者的工作量。
本系统还自带基于 beetl 代码生成器功能,开发者只需要输入类名(如 Student)和类备注(如学生),运行 main 函数即可自动生成后端的所有 MVC 结构代码,无需开发增删改查的 API 接口。对于前端,开发者只需输入后端实体类的完整路径,利用 Java 的反射原理,拿到后端实体类的字段,即可自动生成前端所有代码,生成的模块代码包含基础的增删改查功能,简化开发者的工作量。
现有成品
使用该模板开发的管理系统名单如下,同学们可以参考项目的可用性。
- 基于 Vue 和 SpringBoot 的大病保险管理系统 https://gitcode.net/qq_41464123/medicineSystem
- 基于 Vue 和 SpringBoot 的超市账单管理系统 https://gitcode.net/qq_41464123/bill-system
- 基于 Vue 和 SpringBoot 的通讯录管理系统 https://gitcode.net/qq_41464123/address-book-system
- 基于 Vue 和 SpringBoot 的 中学生家校互联系统 https://gitcode.net/qq_41464123/home-school
- 基于 Vue 和 SpringBoot 的 邮件过滤系统 https://gitcode.net/qq_41464123/mail-filter
- 基于 Vue 和 SpringBoot 的 学生综合素质评价系统 https://gitcode.net/qq_41464123/student-rating
- 基于 Vue 和 SpringBoot 的 资产出入库系统 https://gitcode.net/qq_41464123/asset-stock
- 基于 Vue 和 SpringBoot 的 房屋出租出售信息系统 https://gitcode.net/qq_41464123/house-sell
- 基于 Vue 和 SpringBoot 的 资产采购管理系统 https://gitcode.net/qq_41464123/asset-purchase
- 基于 Vue 和 SpringBoot 的 假日旅社管理系统 https://gitcode.net/qq_41464123/holiday-hotel
- 基于 Vue 和 SpringBoot 的 医院门诊预约挂号管理系统 https://gitcode.net/qq_41464123/order-register
- …
未来将会开发出更多的管理系统,敬请期待!
软件技术选型
前端
Vue:Vue 是构建前端界面的核心框架,本系统采用 2.7.10 版本。
View UI:基于 Vue.js 2 的组件库,本系统采用 4.7.0 版本。
后端
- Spring Boot:构建系统核心逻辑的后端框架,本系统采用 2.7.5 版本。
- MyBatis Plus:后端连接数据库的框架,本系统采用 3.5.2 版本。
数据库
- MySQL:本项目的主数据库,本系统采用 8.0.31 版本。
- Redis:本系统采用基于 Windows 版本的 Redis,用于图形验证码和用户菜单权限的临时存储,采用了 5.0.14.1 版本。
开发环境
- VsCode:项目前端的开发工具,使用版本为 1.68.0。
- IntelliJ IDEA :项目后端的开发工具,使用版本为 2022.2.2。
- JDK:Java 的开发环境,使用版本为 17.0.4.1。
- Maven:后端项目的打包工具,使用版本为 3.6.2。
- NodeJs:前端项目的开发环境,使用版本为 16.13.0。
图表(Antv)
软件架构分析
基于 Vue 和 SpringBoot 的通用管理系统包括了登陆注册、用户管理、部门管理、文件管理、权限管理、日志管理、个人中心、数据字典和代码生成这九大功能模块,其架构如下图所示。
接下来,分别对九大模块进行详细介绍。
登陆注册模块
登陆注册模块用于实现用户的登陆功能和注册功能,用户在登陆时需要输入登陆账号、密码和图形验证码,系统效验无误后即可进入系统,登陆流程图如下所示。
系统的登陆界面如下所示。
当用户没有输入验证码,系统会提示“验证码不能为空”,如下图所示。
当用户输入了错误的验证码,系统会提示“验证码不正确”,如下图所示。
当用户输入了错误的账号密码,系统会提示“账号密码不正确”,如下图所示。
图形验证码默认有效期为 2 分钟,如用户超过 2 分钟没有刷新验证码,验证码将会失效,系统会给与以下提示。
// 用户登陆前端判断代码 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(); } }); } }); }
用户在注册时,需要提供手机号、登陆密码和图形验证码,系统效验无误后即可完成注册,再跳转到登陆界面,注册的流程图如下所示。
系统的注册界面如下图所示,用户需要输入手机号、姓名、密码和图形验证码完成注册。
// 用户注册前端判断代码 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" }); } }); } }); }
用户管理模块
用户管理模块用于实现对系统用户的添加、修改、删除、查询功能,其功能结构图如下所示。
用户实体类的字段明细如下:
- 登陆账号
- 登陆密码
- 手机号
- 部门
- 性别
- 家庭地址
- 用户类型
- 用户状态
- 用户管理
用户管理模块的操作界面如下所示。
用户可以点击顶部的添加按钮,进入到用户的添加界面,如下图所示。
用户可以点击编辑按钮,进入到用户的编辑界面,如下图所示。
点击删除按钮,系统弹出删除弹框,如下图所示。
其中删除功能使用了 View UI 的 Modal 组件,可以动态渲染用户的名称,其前端代码如下所示。
// 删除用户前端代码 remove(v) { this.$Modal.confirm({ title: "确认删除", content: "删除用户 " + v.username + " ?", loading: true, onOk: () => { deleteUser({ ids: v.id }).then(res => { this.$Modal.remove(); if (res.success) { this.$Message.success("删除成功"); this.getUserList(); } }); } }); },