项目一系列-第3章 若依框架入门
第3章 若依框架入门
3.1 若依框架概述
为什么要基于若依框架开发？
- 快速开发：能快速搭建一个应用框架，减少工作量。
- 可定制化：提供丰富插件和拓展点，满足不同项目的特定需求。
- 简化开发流程：框架提供常用的功能模块，如权限管理、数字字典、定时任务等。
- 易于维护和管理：模块化设计，代码结构清晰。
- 活跃开发社区：能够得到及时的技术支持和更新迭代。
总而言之，简化企业级应用开发。
什么是若依框架？
一款基于Spring等开源框架搭建的企业级开发平台。
若依框架的主要作用：
- 模块化设计：每个模块都可以独立部署和升级。
- 前后端分离：前端负责页面展示和用户交互，后端负责数据处理。
- 权限管理：完善的用户权限管理，包含角色管理、菜单授权、部门管理等。
- 代码生成器：快速生成前后端代码。
- 定时任务：通过界面对定时任务进行管理与调度。
- 易于集成：开发者可以根据项目需求灵活地选择合适的技术组件。
若依官网地址：https://ruoyi.vip/
若依框架分为四个版本：
- 前后端不分离版本RuoYi（单体）
- 前后端分离版RuoYi-Vue（单体）本项目使用版本
- 微服务版本RuoYi-Cloud
- 移动端版RuoYi-App
本次入门主要讲解RuoYi-Vue前后端分离版本。
3.2 RuoYi-Vue前后端分离版本
RuoYi-Vue的文档地址：https://doc.ruoyi.vip/ruoyi-vue/
RuoYi-Vue 是一个 JavaEE 企业级快速开发平台，基于经典技术组合（SpringBoot、SpringSecurity、MyBatis、Jwt、Vue），内置模块有：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置；支持集群，支持多数据源，支持分布式事务。
RuoYi-Vue的演示地址：http://vue.ruoyi.vip
3.2.2 RuoYi-Vue的技术选型
1、系统环境
- Java EE 8（建议更改为 jdk 11）
- Servlet 3.0
- Apache Maven 3
2、主框架
- Spring Boot 2.5.x
- Spring Framework 5.2.x
- Spring Security 5.2.x 安全框架
3、持久层
- Apache MyBatis 3.5.x （建议更改为 MyBatis Plus）
- Hibernate Validation 6.0.x 校验框架
- Alibaba Druid 1.2.x
4、视图层
- Vue 2.6.x（建议更改为 Vue3）
- Axios 0.21.x
- Element 2.15.x（建议更改为Element Plus）
3.2.3 环境搭建
基础软件准备
| 官方推荐 | 优化升级 |
|---|---|
| JDK >= 1.8 (推荐1.8版本) | 升级为JDK 11 资料中提供了安装包 |
| Maven >= 3.0 | 不需要安装，直接使用IDEA中自带的Maven即可 |
| Node >= 12 | 前端代码由vue2升级为vue3，需要Node 18及以上的版本 |
| Mysql >= 5.7.0 (推荐5.7版本) | 升级为MySQL 8 |
| Redis >= 3.0 | 本地启动 |
在企业中，基础环境都部署在服务器，如MySQL、Redis等这些服务都是部署在linux服务器中。
假设基础服务信息如下：
| 软件名称 | 说明 |
|---|---|
| MySQL | 默认用户名：root，默认密码：heima123，端口：3306 |
| Redis | 默认密码：123456，端口：6379 |
3.2.4 运行后端项目
RuoYi-Vue的代码下载地址：https://gitee.com/y_project/RuoYi-Vue
若依框架修改器下载地址：https://gitee.com/lpf_project/RuoYi-MT/releases
运行后端项目分几步：
1、在开源网站下载RuoYi-Vue的源码
2、借助若依框架修改器来一键替换包名
3、在pom中，修改JDK的版本为11
4、在idea中，修改SDK、Java-Compiler、Maven、项目编码为utf-8
5、运行sql代码到自己指定的数据库中，如zzyl
6、在yml中，更改数据库配置信息和Redis配置信息
7、用Git进行版本控制
3.2.5 运行前端项目
前端项目的运行前提：
如果是vue3，运行环境只能是 NodeJS 18及以上。
RuoYi-Vue3的代码下载地址：https://github.com/yangzongzhuan/RuoYi-Vue3 或者https://gitee.com/alexisyang/ruo-yi-vue3-master.git
运行前端项目分几步：
1、用Vscode打开项目，进行依赖安装
2、在vite.config.js下，把目标地址baseUrl改为后端正确的服务地址
3、在vite.config.js下，前端监听端口改为88(由于Win10上的80端口会被系统进程占用)
4、若依赖已经安装完成，配置也已修改，则可以直接启动项目
5、用Git进行版本控制
3.2.6 定制化UI界面
为了做出自己的产品，我们需要解决如下问题：
1、浏览器标签页logo标识、标题
2、系统页面中的logo标识、标题
3、登录名称及背景图
4、去除源码地址 & 文档地址 &若依官网标识
浏览器标签页logo标识、标题
- 标签页 logo 替换
替换前端项目中的public文件夹中原有的favicon.ico即可。
- 标题更换(只是登录页的换了。。。)
找到根目录下的index.html文件，把title更换为自己想要的内容即可
- 标题替换(连登录页的系统全称也换了)
若依的系统页面标题引用的是开发环境的配置，我们只需要修改开发的环境的VITE_APP_TITLE属性即可
如下图：
扩展阅读：
关于环境的文件一般有三个
- .env.development 开发环境的配置，默认的环境
- .env.production 生产环境
- .env.staging 测试环境
在打包或启动项目的时候，可以加参数来使用不同的环境，需要参考package.json中的配置
- 窗口内logo替换
找到当天资料中的logo文件，替换 src/assets/logo/logo.png文件
最终效果：
登录名称及背景图
登录名称和背景图，我们可以直接找到登录的组件进行修改即可
组件位置：src/views/login.vue
- 登录名称
- 背景图
背景图可以自行命名更换，并将背景图路径写好。
最终效果图：
去除源码地址 & 文档地址 & 若依官网标识
- 利用菜单功能，去除若依官网菜单项目
- 使用VS Code全局搜索功能（alt + Num3），去除右上角的源码地址和文档地址
- 最终效果：
主题UI风格调整
在目前的前端项目中，已经提供了非常便利的操作方式，可以切换主题的风格
操作：点击右上角的头像，可以找到**布局设置，**如下操作
在前端代码中也有对应的操作，文件位置：src/setting.js
export default {/*** 网页标题*/title: import.meta.env.VITE_APP_TITLE,/*** 侧边栏主题 深色主题theme-dark，浅色主题theme-light*/sideTheme: 'theme-dark',/*** 是否系统布局配置*/showSettings: true,/*** 是否显示顶部导航*/topNav: false,/*** 是否显示 tagsView*/tagsView: true,/*** 是否固定头部*/fixedHeader: false,/*** 是否显示logo*/sidebarLogo: true,/*** 是否显示动态标题*/dynamicTitle: false,/*** @type {string | array} 'production' | ['production', 'development']* @description Need show err logs component.* The default is only used in the production env* If you want to also use it in dev, you can pass ['production', 'development']*/errorLog: 'production'
}
更换主题颜色：
文件位置：src/store/modules/settings.js
theme: storageSetting.theme || '#00b8a0',
更换后的效果：
3.3 前后端项目结构
3.3.2 后端项目结构
后端项目结构：
com.ruoyi
├── ruoyi-admin // 后台服务 存放 controller
├── common // 工具类
│ └── annotation // 自定义注解
│ └── config // 全局配置
│ └── constant // 通用常量
│ └── core // 核心控制
│ └── enums // 通用枚举
│ └── exception // 通用异常
│ └── filter // 过滤器处理
│ └── utils // 通用类处理
├── framework // 框架核心
│ └── aspectj // 注解实现
│ └── config // 系统配置
│ └── datasource // 数据权限
│ └── interceptor // 拦截器
│ └── manager // 异步处理
│ └── security // 权限控制
│ └── web // 前端控制
├── ruoyi-generator // 代码生成（可移除）
├── ruoyi-quartz // 定时任务（可移除）
├── ruoyi-system // 系统代码 存放 domain，mapper，service
├── ruoyi-xxxxxx // 其他模块
通常会将自动生成的源代码放到各种自定义的模块中的java和resources目录下，便于维护和管理。
模块间的依赖关系：
在ruoyi-admin模块下的配置文件：
- i18n：国际化处理
- META-INF：存储了项目的元信息（描述数据的数据），无需修改
- mybatis：mybatis相关的配置信息
- application.yml：项目中的核心配置
- redis配置
- application-druid.yml：数据库连接配置
- 数据库配置（mysql）
- banner.txt：默认的banner图标信息，项目启动，控制台打印显示
- logback.xml：日志配置
表结构说明及关系：
要到sql文件下导入该数据库表。
| 表名 | 说明 | 关系 |
|---|---|---|
| gen_table | 代码生成业务表 | 代码生成 |
| gen_table_column | 代码生成业务表字段 | |
| sys_config | 参数配置表 | 数据字典 |
| sys_dict_data | 字典数据表 | |
| sys_dict_type | 字典类型表 | |
| sys_job | 定时任务调度表 | 定时任务 |
| sys_job_log | 定时任务调度日志表 | |
| sys_logininfor | 系统访问记录 | 日志 |
| sys_oper_log | 操作日志记录 | |
| sys_notice | 通知公告表 | |
| sys_menu | 菜单表 | 权限 |
| sys_dept | 部门表 | |
| sys_post | 岗位信息表 | |
| sys_role | 角色信息表 | |
| sys_role_dept | 角色和部门关联表 | |
| sys_role_menu | 角色和菜单关联表 | |
| sys_user | 用户信息表 | |
| sys_user_post | 用户与岗位关联表 | |
| sys_user_role | 用户和角色关联表 |
3.2.3 前端项目结构
前端项目结构：
├── bin // 执行脚本
├── public // 公共文件
│ ├── favicon.ico // favicon图标
├── src // 源代码
│ ├── api // 所有请求,后台的api接口，开发时经常操作的目录
│ ├── assets // 主题 字体等静态资源
│ ├── components // 全局公用组件
│ ├── directive // 全局指令
│ ├── layout // 布局
│ ├── plugins // 通用方法
│ ├── router // 路由
│ ├── store // 全局 store管理
│ ├── utils // 全局公用方法
│ ├── views // view，存储vue组件，开发时经常操作的目录
│ ├── App.vue // 根组件
│ ├── main.js // 入口 加载组件 初始化等
│ ├── permission.js // 权限管理
│ └── settings.js // 系统配置
├── vite // 前端构建工具
├── .env.development // 开发环境配置
├── .env.production // 生产环境配置
├── .env.staging // 测试环境配置
├── .gitignore // git 忽略项
├── LICENSE // 许可证
├── package-lock.json // 锁定项目依赖的具体版本号
├── package.json // 配置项目的信息、名称、版本号、描述信息等
├── pnpm-lock.yaml // 锁定项目依赖的具体版本号
└── vite.config.js // 用于配置 Vue.js 项目的全局选项，可修改后台访问接口的路径
src目录下的api和views目录是经常操作的，存放自动生成的前端代码
在vite.config.js文件：
-
别名
~代表./@代表src目录
-
前端服务端口—>
port: 80，咱们已经修改为88了 -
后端服务地址—>
target: baseUrl-
const baseUrl = '``http://localhost:8080``' // 后端接口
-
-
路径重写—>
rewrite: (p) => p.replace(/^\/dev-api/, '')
3.4 代码生成功能分几步？
通常是分下面几步：
1、在若依管理系统的菜单管理中，添加该模块的上级菜单
2、开发该模块的建表语句，在数据库中建表
3、在若依管理系统的代码生成中，导入要生成代码的表结构
4、在若依管理系统的代码生成中，修改生成配置
-
在基本信息中，一般修改作者信息
-
在字段信息中，跟据页面原型修改字段信息
-
下图是字段信息，详细描述如下图：
字段信息 描述 字段列名 表中的字段列名称 字段描述 字段的描述，自动读取建表语句中的comment信息，可根据实际情况更改 物理类型 数据库所对应的字段类型 Java类型 Java实体类中属性的类型，可改，例如，状态字段：Long类型可以修改为Integer Java属性 Java实体类中所对应的属性名称 插入 新增的时候，需要插入的字段 编辑 修改的时候，需要插入的字段 列表 列表查询需要展示的字段 查询 列表查询，需要的条件字段 查询方式 与上面查询条件配合，选择对应的查询方式 必填 在插入和新增的时候，这个字段是否是必填项，可生成校验 显示类型 前端代码使用的组件类型，可根据实际情况选择 字典类型 字典管理是用来维护可枚举的数据的，如下拉框、单选按钮等，支持自定义 -
一般只要注意tingint和int物理类型的Java类型是否是Integer即可。
-
插入和编辑看原型的新增和编辑界面。
-
列表和查询看原型的列表信息展示和搜索栏信息。
-
必填看编辑界面的*号。
-
-
在生成信息中(注意)
- 生成包路径仔细填写
- 生成模块名仔细填写
- 记得填写上级菜单
5、部署数据库新增数据和前后端代码（压缩包的）
- 运行insert语句
- 部署后端代码（将业务代码都部署到独立的模块中）
- 通常会将自动生成的源代码放到各种自定义的模块中的java和resources目录下，便于维护和管理。
- 在父模块的pom中，管理该模块的版本
- 在该模块中引入zzyl-common模块
- 在zzyl-admin模块中引入新创建的该模块
- 把相同模块的相关代码，都移动到新模块中的相同包下
- 部署前端代码
- src目录下的api和views目录是经常操作的，存放自动生成的前端代码
3.5 代码解析（AI辅助）
Prompt：你是一个资深的后端/前端开发工程师，请在代码的核心编写代码注释帮助理解。
3.5.1 后端代码解析
自动生成的代码，不需要做任何修改，就可以做到基本的增删改查。
自动生成的代码符合Restful。
返回值有两种：
- TableDataInfo：返回分页相关数据
- AjaxResult：返回成功或失败的相应信息。
注解有：
@PreAuthorize：在方法上使用，判断当前登录人是否有权限访问该方法@Log：在方法上使用，标记该方法要做日志记录
3.5.2 前端代码解析
例如：在服务管理nursing菜单下新增一个菜单(护理安排)，配置如下:
在@/views/nursing/arrange目录中新增一个index.vue组件，该网页组件即可被访问到。