第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菜单下新增一个菜单(护理安排)，配置如下:

• 路由地址：arrange

• 组件路径：nursing/arrange/index

在@/views/nursing/arrange目录中新增一个index.vue组件，该网页组件即可被访问到。