## 技术选型 **1、系统环境** - Java EE 8 - Servlet 3.0 - Apache Maven 3 **2、主框架** - Spring Boot 2.2.x - Spring Framework 5.2.x - Spring Security 5.2.x **3、持久层** - Apache MyBatis 3.5.x - Hibernate Validation 6.0.x - Alibaba Druid 1.2.x **4、视图层** - Vue 2.6.x - Axios 0.21.x - Element 2.15.x ## 基础功能 - 用户管理:用户是系统操作者,该功能主要完成系统用户配置。 - 菜单管理:配置系统菜单,操作权限,按钮权限标识等。 - 角色管理:角色菜单权限分配、设置角色按机构进行数据范围权限划分。 - 字典管理:对系统中经常使用的一些较为固定的数据进行维护。 - 参数管理:对系统动态配置常用参数。 - 通知公告:系统通知公告信息发布维护。 - 操作日志:系统正常操作日志记录和查询;系统异常信息日志记录和查询。 - 登录日志:系统登录日志记录查询包含登录异常。 - 在线用户:当前系统中活跃用户状态监控。 - 定时任务:在线(添加、修改、删除)任务调度包含执行结果日志。 - 服务监控:监视当前系统CPU、内存、磁盘、堆栈等相关信息。 - 缓存监控:对系统的缓存信息查询,命令统计等。 - 连接池监视:监视当期系统数据库连接池状态,可进行分析SQL找出系统性能瓶颈。 # 环境部署 ## 准备工作 ```text JDK = 1.8 Mysql = 5.7.0 Redis = 3.0 Maven = 3.0 Node = 12 ``` # 项目介绍 ## 文件结构 ### 后端结构 ```text com.fidms ├── common // 工具类 │ └── annotation // 自定义注解 │ └── config // 全局配置 │ └── constant // 通用常量 │ └── core // 核心控制 │ └── enums // 通用枚举 │ └── exception // 通用异常 │ └── filter // 过滤器处理 │ └── utils // 通用类处理 ├── framework // 框架核心 │ └── aspectj // 注解实现 │ └── config // 系统配置 │ └── datasource // 数据权限 │ └── interceptor // 拦截器 │ └── manager // 异步处理 │ └── security // 权限控制 │ └── web // 前端控制 ├── fidms-quartz // 定时任务(可移除) ├── fidms-system // 系统代码 ├── fidms-admin // 后台服务 ├── fidms-xxxxxx // 其他模块 ``` ### 前端结构 ```text ├── build // 构建相关 ├── bin // 执行脚本 ├── public // 公共文件 │ ├── favicon.ico // favicon图标 │ └── index.html // html模板 │ └── robots.txt // 反爬虫 ├── src // 源代码 │ ├── api // 所有请求 │ ├── assets // 主题 字体等静态资源 │ ├── components // 全局公用组件 │ ├── directive // 全局指令 │ ├── layout // 布局 │ ├── plugins // 通用方法 │ ├── router // 路由 │ ├── store // 全局 store管理 │ ├── utils // 全局公用方法 │ ├── views // view │ ├── App.vue // 入口页面 │ ├── main.js // 入口 加载组件 初始化等 │ ├── permission.js // 权限管理 │ └── settings.js // 系统配置 ├── .editorconfig // 编码格式 ├── .env.development // 开发环境配置 ├── .env.production // 生产环境配置 ├── .env.staging // 测试环境配置 ├── .eslintignore // 忽略语法检查 ├── .eslintrc.js // eslint 配置项 ├── .gitignore // git 忽略项 ├── babel.config.js // babel.config.js ├── package.json // package.json └── vue.config.js // vue.config.js ``` ## 核心技术 TIP - 前端技术栈 ES6、vue、vuex、vue-router、vue-cli、axios、element-ui - 后端技术栈 SpringBoot、MyBatis、Spring Security、Jwt ### 后端技术 #### SpringBoot框架 1. 介绍 `Spring Boot`是一款开箱即用框架,提供各种默认配置来简化项目配置。让我们的`Spring`应用变的更轻量化、更快的入门。 在主程序执行`main`函数就可以运行。你也可以打包你的应用为`jar`并通过使用`java -jar`来运行你的Web应用。它遵循"约定优先于配置"的原则, 使用`SpringBoot`只需很少的配置,大部分的时候直接使用默认的配置即可。同时可以与`Spring Cloud`的微服务无缝结合。 2. Spring Boot的主要特点和优势如下: 1. 简化配置:Spring Boot通过自动配置机制,根据应用程序的依赖关系自动配置各种Spring组件。它减少了传统Spring开发中繁琐的XML配置,大部分配置都可以通过约定和默认值自动完成。 2. 内嵌服务器:Spring Boot集成了常见的Web服务器(如Tomcat、Jetty),可以将应用程序打包成可执行的JAR文件,并直接运行在内嵌的服务器上,无需部署到外部服务器。 3. 自动化依赖管理:Spring Boot引入了依赖管理的概念,通过Starter POM来简化依赖的配置。Starter POM是一组预定义的依赖集合,可以按需引入,简化了对第三方库的版本管理和冲突解决。 4. 健康检查与监控:Spring Boot提供了丰富的健康检查和监控功能,可以通过HTTP端点获取应用程序的运行状况、性能指标和状态信息,方便监控和运维人员进行应用程序的管理和故障排查。 5. 高度可扩展:Spring Boot建立在Spring框架之上,继承了Spring的优秀特性,具有高度可扩展性。开发人员可以方便地集成各种Spring生态系统的组件,如Spring Data、Spring Security、Spring Cloud等,实现更复杂的业务需求。 3. Spring Boot的工作原理如下: 1. 自动配置:Spring Boot通过条件化配置和自动配置的机制,根据项目的依赖和配置,自动装配Spring框架所需的组件。它通过扫描classpath、注解和属性文件来实现自动配置。 2. Starter依赖:Spring Boot提供了一系列称为Starter的依赖,用于简化对常用库和技术的集成。Starter依赖将相关的依赖项整合在一起,开发人员只需引入适当的Starter依赖,即可获得所需的功能和配置。 3. 内嵌服务器:Spring Boot集成了内嵌的Web服务器,如Tomcat、Jetty等。开发人员可以将应用程序打包成可执行的JAR文件,直接运行在内嵌的服务器上,无需外部部署。 4. 外部化配置:Spring Boot支持使用属性文件、YAML文件、环境变量等来配置应用程序。 5. 健康监测和管理:Spring Boot提供了健康检查和监测功能,可以通过HTTP端点查看应用程序的健康状态。开发人员可以轻松地监测应用程序的运行状况、性能指标和状态信息,并根据需要进行管理和调整。 6. 智能开发工具:Spring Boot与各种开发工具(如IDE)紧密集成,提供了丰富的开发辅助功能。例如,自动重新加载、快速启动、自动完成和错误提示等功能,使开发人员能够更高效地进行开发和调试。 7. 外部服务集成:Spring Boot提供了简化外部服务集成的功能。通过集成各种Spring Boot Starter和Spring生态系统中的库,开发人员可以轻松地与数据库、缓存、消息队列、认证授权服务等进行集成。 8. 强大的生态系统:Spring Boot作为Spring Framework的一部分,可以享受到Spring生态系统的丰富资源和工具支持。Spring Boot与Spring Cloud等项目结合使用,提供了构建和管理微服务的能力。 9. 高度可配置:Spring Boot提供了丰富的配置选项,开发人员可以通过属性文件、注解和外部配置等方式来配置应用程序的行为和特性。这种可配置性使得开发人员能够根据具体需求进行灵活的定制和调整。 10. 简化部署和运维:Spring Boot的特性使得应用程序的部署和运维变得更加简单。通过打包成可执行的JAR文件,开发人员可以方便地将应用程序部署到各种环境中,并使用一致的方式进行管理和运维。 综上所述,Spring Boot通过简化配置、自动化依赖管理、内嵌服务器、健康监测等功能,提供了一种快速、便捷的方式来开发和部署Spring应用程序。它拥有强大的生态系统和活跃的社区支持,使得开发人员能够更加高效地构建现代化的Java应用程序。 #### MyBatis MyBatis是一个开源的持久层框架,它提供了对关系型数据库的访问和操作的简化方式。MyBatis将数据库操作与Java对象之间的映射关系配置化,使得开发人员可以使用简单的XML或注解来描述数据库操作,而无需编写繁琐的SQL语句。 下面是MyBatis的一些关键特点和功能: 1. 灵活的SQL映射:MyBatis使用XML或注解配置文件来映射Java对象与SQL语句之间的关系。开发人员可以编写灵活、可维护的SQL映射文件,通过配置文件将数据库操作与Java方法关联起来。 2. 参数映射:MyBatis支持将Java方法的参数与SQL语句中的参数进行映射,开发人员可以通过配置文件或注解来指定参数的映射方式,使得参数传递更加方便和灵活。 3. 缓存支持:MyBatis提供了一级缓存和二级缓存的支持,可以有效地提高数据库操作的性能。一级缓存是会话级别的缓存,二级缓存是应用级别的缓存,可以跨会话共享缓存数据。 4. 动态SQL:MyBatis支持动态SQL,即根据不同的条件生成不同的SQL语句。开发人员可以使用if、choose、foreach等标签来动态构建SQL语句,使得SQL语句更加灵活和可扩展。 5. 自动生成代码:MyBatis提供了可以根据数据库表结构自动生成Java代码的功能。开发人员只需编写简单的模板配置,就可以自动生成与数据库表对应的实体类、映射文件和DAO接口,提高开发效率。 6. 插件支持:MyBatis提供了插件机制,可以通过插件对MyBatis进行扩展和定制。开发人员可以编写自定义插件来拦截和修改MyBatis的行为,实现自定义的功能和扩展。 7. 多数据源支持:MyBatis可以配置和管理多个数据源,使得应用程序能够同时访问多个数据库。开发人员可以通过配置文件来定义多个数据源,并在不同的DAO接口中指定使用的数据源。 8. 易于集成:MyBatis与Spring等常见的Java框架和容器集成良好。开发人员可以将MyBatis与Spring框架相结合,实现更好的依赖注入、事务管理和统一的异常处理。 总的来说,MyBatis是一个简单、灵活且功能强大的持久层框架。它通过将数据库操作与Java对象的映射配置化,提供了一种简化和高效的数据库访问 #### Spring Security安全控制 1、介绍 `Spring Security`是一个能够为基于`Spring`的企业应用系统提供声明式的安全访问控制解决方案的安全框架。 2、功能 `Authentication` 认证,就是用户登录 `Authorization` 授权,判断用户拥有什么权限,可以访问什么资源 安全防护,跨站脚本攻击,`session`攻击等 非常容易结合`Spring`进行使用 3、`Spring Security`与`Shiro`的区别 > 相同点 1、认证功能 2、授权功能 3、加密功能 4、会话管理 5、缓存支持 6、rememberMe功能 .... > 不同点 优点: 1、Spring Security基于Spring开发,项目如果使用Spring作为基础,配合Spring Security做权限更加方便。而Shiro需要和Spring进行整合开发 2、Spring Security功能比Shiro更加丰富,例如安全防护方面 3、Spring Security社区资源相对比Shiro更加丰富 缺点: 1)Shiro的配置和使用比较简单,Spring Security上手复杂些 2)Shiro依赖性低,不需要依赖任何框架和容器,可以独立运行。Spring Security依赖Spring容器 Spring Security的核心功能: 1. 身份认证(Authentication):Spring Security提供了多种身份认证机制,包括基于表单、HTTP基本认证、LDAP、OpenID、OAuth等。开发人员可以根据应用程序需求选择适合的认证方式。Spring Security通过验证用户提供的凭证(如用户名和密码)来验证用户的身份。 2. 授权(Authorization):Spring Security支持细粒度的访问控制,允许开发人员根据角色和权限控制用户对资源的访问。开发人员可以在配置文件或注解中定义访问控制规则,确保只有具有相应角色和权限的用户才能访问受保护的资源。 3. 密码加密与验证:Spring Security提供了密码加密和验证的功能,确保用户密码的安全性。开发人员可以使用强大的加密算法(如BCrypt、SHA等)对用户密码进行加密,并提供验证机制来验证用户输入的密码是否正确。 4. 会话管理(Session Management):Spring Security支持会话管理,可跟踪和管理用户的会话状态。开发人员可以配置会话超时时间、并发控制等策略,还可以自定义会话管理器来处理会话相关的操作和事件。 5. CSRF(Cross-Site Request Forgery)防护:Spring Security内置了对CSRF攻击的防护机制,可以防止跨站请求伪造攻击。它通过生成和验证CSRF令牌来确保请求的合法性。 6. Remember Me功能:Spring Security提供了Remember Me功能,使用户在下次访问应用程序时免于再次输入用户名和密码。该功能通过在用户浏览器中设置一个持久的令牌来实现。 7. 集成与扩展:Spring Security与Spring框架紧密集成,可以无缝地与其他Spring组件和框架配合使用。它提供了丰富的扩展点和插件机制,允许开发人员编写自定义的过滤器、认证提供者、访问决策器等,以满足特定的安全需求。 8. 审计日志(Audit Logging):Spring Security支持审计日志功能,可以记录关键的安全事件和操作日志。开发人员可以配置审计日志记录器,记录用户的登录、访问受保护资源、权限变更等重要安全事件。审计日志可以提供安全审计、故障排除、合规性要求等方面的支持。 9. 多因素认证(Multi-Factor Authentication):Spring Security支持多因素认证,可以通过结合多个认证因素(如密码、短信验证码、指纹等)提供更强的身份验证。开发人员可以配置多因素认证方式,以增加应用程序的安全性。 10. 单点登录(Single Sign-On,SSO):Spring Security可以集成各种单点登录解决方案,如OAuth、OpenID Connect等,实现用户在多个应用程序之间的无缝登录体验。 11. 异常处理与安全事件处理:Spring Security提供了对安全相关的异常的处理机制。开发人员可以自定义异常处理器来处理身份认证失败、访问拒绝等情况,并进行相应的安全事件处理。 12. 防止会话固定攻击(Session Fixation Attack Prevention):Spring Security提供了会话固定攻击的防护机制。它会在用户认证成功后重新生成会话ID,防止攻击者利用会话固定攻击获取用户的权限。 13. 集成第三方安全解决方案:Spring Security可以与其他安全框架和工具集成,如Spring Cloud Security、Apache Shiro等。这使得开发人员可以选择适合项目需求的安全解决方案,并与Spring Security无缝集成。 14. 测试支持:Spring Security提供了专门的测试支持,使开发人员可以轻松编写和执行安全相关的单元测试和集成测试。这有助于确保应用程序的安全功能的正确性和稳定性。 15. 文档和社区支持:Spring Security拥有丰富的官方文档和社区资源。开发人员可以查阅官方文档、参与社区讨论、获取支持和解决问题。 #### JWT(JSON Web Token) JSON Web Token(JWT)是一种用于在网络应用间安全传递信息的开放标准(RFC 7519)。它通过使用数字签名或加密方式来验证信息的完整性和真实性,从而实现无状态的身份验证和授权机制。 JWT由三部分组成:头部(Header)、载荷(Payload)和签名(Signature)。每部分都是经过Base64编码的字符串,它们之间以点号(.)分隔。 1. 头部(Header): 头部通常由两部分组成:令牌的类型(typ)和所使用的签名算法(alg)。常见的签名算法包括HMAC SHA256、RSA和ECDSA等。 2. 载荷(Payload): 载荷是JWT的主要内容,它包含了一些声明(Claims)和自定义的声明信息。声明分为三种类型:注册声明(Registered Claims)、公共声明(Public Claims)和私有声明(Private Claims)。 - 注册声明是一组预定义的声明,包括iss(发行者)、sub(主题)、aud(受众)、exp(过期时间)等。 - 公共声明是自定义的声明,可以根据应用程序的需求添加,但要注意避免冲突。 - 私有声明是自定义的声明,用于在双方之间传输相关信息。 3. 签名(Signature): 签名部分使用头部和载荷,以及一个密钥(或公钥)来生成签名。签名用于验证令牌是否被篡改。签名算法可以是HMAC、RSA或ECDSA等。 使用JWT进行身份验证和授权的流程如下: 1. 身份验证: - 用户提供其身份凭证(例如用户名和密码)进行身份验证。 - 服务器验证凭证的正确性,并生成一个包含用户身份信息的JWT。 - 服务器将JWT发送回客户端,并将其存储在客户端(通常是在本地存储或Cookie中)。 2. 资源访问: - 客户端在每次请求中将JWT添加到请求的头部或作为参数发送到服务器。 - 服务器验证JWT的完整性和真实性,并根据其中的声明信息决定是否授权访问请求的资源。 JWT的优点包括: - 无状态:JWT本身包含了所有必要的信息,服务器不需要在后端存储任何会话数据。这样可以轻松实现可伸缩性和分布式架构。 - 可扩展性:JWT的载荷部分可以包含任意自定义的声明信息,可以根据应用程序的需求进行扩展。 - 安全性:JWT使用数字签名或加密方式验证令牌的真实性和完整性,确保令牌在传输过程中不被篡改。 ### 前端技术 - npm:node.js的包管理工具,用于统一管理我们前端项目中需要用到的包、插件、工具、命令等,便于开发和维护。 - ES6:Javascript的新版本,ECMAScript6的简称。利用ES6我们可以简化我们的JS代码,同时利用其提供的强大功能来快速实现JS逻辑。 - vue-cli:Vue的脚手架工具,用于自动生成Vue项目的目录及文件。 - vue-router: Vue提供的前端路由工具,利用其我们实现页面的路由控制,局部刷新及按需加载,构建单页应用,实现前后端分离。 - vuex:Vue提供的状态管理工具,用于统一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象。 - element-ui:基于MVVM框架Vue开源出来的一套前端ui组件。 前端核心功能: Vue.js是一种流行的JavaScript框架,用于构建现代化的Web应用程序。它具有轻量级、响应式和可组件化的特点,使得开发者可以更快速、高效地构建用户界面。 Element UI是一个基于Vue.js的UI组件库,提供了丰富的可重用组件,包括按钮、表格、表单、对话框等。Element UI的设计风格简洁美观,易于使用,并且提供了丰富的主题定制选项,可以根据项目需求进行个性化的样式调整。 下面是Vue.js和Element UI的详细介绍: 1. Vue.js特点: - 响应式:Vue.js采用了基于数据驱动的响应式设计,能够根据数据的变化自动更新视图。这种响应式机制使得开发者可以方便地构建交互丰富的用户界面。 - 组件化:Vue.js支持组件化开发,将应用程序拆分为多个可重用的组件,每个组件负责特定的功能。组件化开发使得代码更加模块化、可维护性更高,并且可以提高开发效率。 - 轻量级:Vue.js的核心库非常小巧,压缩后只有几十KB,加载速度快。它也不依赖其他库或工具,可以与各种现有项目无缝集成。 2. Element UI特点: - 丰富的组件:Element UI提供了大量的UI组件,覆盖了常见的Web应用开发需求,如表单、表格、按钮、导航菜单、弹窗等。这些组件具有一致的设计风格,易于使用和定制。 - 主题定制:Element UI支持主题定制,开发者可以根据项目需求自定义组件的样式。通过提供一套样式变量和预设样式,可以轻松修改组件的颜色、字体、边框等样式属性。 - 响应式布局:Element UI的布局组件能够自适应不同的屏幕尺寸和设备类型,实现响应式的页面布局。这使得开发者可以开发出适应不同终端的移动友好的Web应用。 - 国际化支持:Element UI提供了国际化支持,可以轻松地将应用程序翻译成多种语言。开发者可以根据需要切换不同的语言版本,以满足不同地区用户的需求。 Vue.js和Element UI的结合使用可以极大地简化前端开发过程,提高开发效率。开发者可以利用Vue.js的响应式特性和组件化开发,结合Element UI丰富的组件库,快速构建出现代化的用户界面。 以下是Vue.js与Element UI的配合方式和常用特性: 1. 组件化开发: Vue.js提供了组件化开发的能力,而Element UI则提供了一套完整的UI组件库。开发者可以使用Element UI的组件作为Vue.js的子组件,以快速搭建复杂的用户界面。通过使用组件,可以将界面划分为独立的模块,提高代码的可重用性和可维护性。 2. 响应式数据绑定: Vue.js的核心特性之一是响应式数据绑定。开发者可以将数据与界面进行绑定,当数据发生变化时,界面会自动更新。在与Element UI结合使用时,可以轻松将表单、表格等组件与数据进行绑定,实现数据的双向绑定,简化表单验证和数据操作的过程。 3. 表单验证: Element UI提供了丰富的表单组件,并支持表单验证。通过与Vue.js结合,可以轻松实现表单验证的逻辑。Element UI提供了验证规则、错误提示等功能,可以根据表单输入的内容进行实时验证,并提供友好的错误提示信息。 4. 路由管理: Vue.js内置了Vue Router,用于管理应用程序的路由。结合Element UI的导航菜单组件,可以实现前端的路由导航功能。通过定义路由规则,开发者可以根据URL路径加载不同的组件,实现单页应用程序的页面切换效果。 5. 主题定制: Element UI提供了丰富的主题定制选项,开发者可以根据项目需求进行个性化的样式调整。通过覆盖预设的样式变量,可以修改组件的颜色、字体、边框等样式属性,以适应不同的设计风格和品牌要求。 6. 国际化支持: Element UI支持国际化,开发者可以轻松地将应用程序翻译成多种语言。通过配置语言文件,可以在不同语言版本之间进行切换,以满足不同地区用户的语言需求。 综上所述,Vue.js与Element UI的结合使用可以提供快速、高效的前端开发体验。Vue.js的响应式数据绑定和组件化开发与Element UI丰富的UI组件库的配合,使开发者能够更轻松地构建出现代化的用户界面。 以下是Vue.js与Element UI的进一步特性和配合方式: 1. 弹窗和消息提示: Element UI提供了弹窗和消息提示的组件,可以方便地在应用程序中显示对话框、通知、警告等信息。与Vue.js结合使用时,可以通过事件绑定和数据传递来触发弹窗的显示和隐藏,实现用户交互和反馈的功能。 2. 数据表格: Element UI的数据表格组件提供了丰富的功能,如分页、排序、筛选、行编辑等。与Vue.js结合使用时,可以通过绑定数据和事件监听,实现数据表格与后端数据的交互,并提供友好的用户体验。 3. 图表和数据可视化: Vue.js与Element UI可以结合使用各种图表和数据可视化库,如ECharts、Chart.js等。通过将图表组件与Vue.js和Element UI的数据绑定相结合,可以实现动态的、可交互的数据可视化效果。 4. 模块化开发: Vue.js的模块化开发方式与Element UI的组件化开发相互补充。开发者可以将Vue.js和Element UI的组件进一步封装为可复用的模块,以提高代码的可维护性和可重用性。这样的模块化开发方式使得团队协作更加便利,也方便进行单元测试和代码重构。 总结来说,Vue.js与Element UI的结合可以帮助开发者快速搭建现代化的Web应用程序。通过Vue.js的响应式数据绑定和组件化开发,以及Element UI的丰富组件库和可定制的样式,开发者可以高效地构建出美观、功能丰富的用户界面。同时,Vue.js和Element UI的生态系统也提供了大量的扩展和插件,满足不同项目需求的定制化开发。 #### 表设计 用户表: ![1684057111125](C:\soft\Program Files (x86)\Tencent\WeDoc\WeChat Files\Allen_AL\FileStorage\Temp\1684057111125.jpg) 角色表: ![image-20230514174056896](C:\Users\allen\AppData\Roaming\Typora\typora-user-images\image-20230514174056896.png) 菜单表: ![image-20230514174134405](C:\Users\allen\AppData\Roaming\Typora\typora-user-images\image-20230514174134405.png) 3d模型表 ![image-20230514174357506](C:\Users\allen\AppData\Roaming\Typora\typora-user-images\image-20230514174357506.png) 流场输入表 ![image-20230514174441694](C:\Users\allen\AppData\Roaming\Typora\typora-user-images\image-20230514174441694.png) 流场输出表 ![image-20230514174537277](C:\Users\allen\AppData\Roaming\Typora\typora-user-images\image-20230514174537277.png) 流场输入表 ![image-20230514174705499](C:\Users\allen\AppData\Roaming\Typora\typora-user-images\image-20230514174705499.png) 流场输出表 ![image-20230514174726035](C:\Users\allen\AppData\Roaming\Typora\typora-user-images\image-20230514174726035.png)