RuoYi-Vue-Plus/RuoYi-Vue-Plus二次开发最佳实践.md

942 lines
59 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# RuoYi-Vue-Plus 二次开发最佳实践
本文档旨在为基于 RuoYi-Vue-Plus (Soybean Admin Pro 版本前端) 进行二次开发的开发者提供一套实践指南,帮助大家更高效、规范地进行项目开发。
## 1. 引言
### 1.1 文档目的与核心读者
本文档的核心目标是为基于 RuoYi-Vue-Plus (特别是采用 Soybean Admin Pro 前端技术栈的版本) 进行二次开发的开发者提供一套清晰、实用的指南,**专注于如何高效、规范地设计、开发和集成全新的业务模块**。本文档尤其强调如何结合 Cursor 这一现代化 AI 辅助开发工具,进一步提升开发效率和代码质量。
Cursor是一款基于AI的智能编辑器它能够理解您的代码库和开发意图提供高质量的代码补全、重构建议和智能问答能力。使用Cursor进行RuoYi-Vue-Plus项目的二次开发能够显著减少重复性工作提高代码生成效率并保持项目代码风格的一致性。
无论您是需要为现有系统添加新的业务功能,还是希望基于 RuoYi-Vue-Plus 快速构建包含自定义模块的企业级应用,本文档都将力求为您提供从概念到实践的全方位指导,同时充分利用 Cursor 提供的智能代码辅助功能。
### 1.2 RuoYi-Vue-Plus 模块化特性简介
RuoYi-Vue-Plus 在设计上充分考虑了系统的可扩展性和模块化。后端采用多模块 Maven 项目结构,前端也支持模块化的视图和路由管理。这种设计使得开发者可以相对独立地开发和维护各个业务模块,降低了模块间的耦合度,提高了开发效率和系统的可维护性。
"模块"通常指一组相关联的业务功能单元,例如"订单管理模块"、"产品管理模块"或"客户关系模块",它们在后端有独立的 Maven 模块(通常在 `ruoyi-modules`在前端有对应的视图组件、API 服务和路由配置。
通过使用 Cursor 进行开发您可以借助其强大的代码智能补全和上下文理解能力使模块化开发更加高效。Cursor能够
- 分析现有代码结构,快速理解项目架构和组件关系
- 根据上下文提供符合项目规范的代码片段
- 协助生成前后端一致的API接口和数据模型
- 智能重构和改进现有代码,保持风格一致性
- 减少常见错误和提高代码质量
### 1.3 二次开发新模块的核心原则
在进行新模块开发时,我们遵循以下核心原则:
* **高内聚、低耦合**:新模块内部功能紧密相关,模块之间尽可能减少直接依赖。
* **遵循框架规范**:充分利用并遵循 RuoYi-Vue-Plus 已有的架构设计、代码规范和工具。
* **可复用性**:考虑模块内部组件和服务的可复用性,避免代码冗余。
* **可维护性**:编写清晰、易懂、易于测试的代码,确保长期维护成本最小化。
* **安全性**:从设计之初就考虑新模块的权限控制和数据安全,防范常见的安全风险。
* **AI辅助开发**:合理利用 Cursor 提供的 AI 能力进行代码生成、重构和优化,同时保持对生成代码的质量审核。
### 1.4 使用Cursor提升开发体验
作为一款智能开发工具Cursor在RuoYi-Vue-Plus二次开发中可以提供以下关键优势
- **快速上手项目**:使用聊天功能直接询问项目结构、核心组件和开发规范
- **智能代码生成**:基于项目上下文自动生成符合规范的代码片段和完整模块
- **跨语言开发支持**同时支持后端Java和前端Vue/TypeScript的智能补全和建议
- **代码解释和重构**:为复杂代码提供解释,并建议更优的实现方案
- **标准化编码**:帮助团队保持一致的代码风格和最佳实践
- **学习辅助**:通过提问了解框架各组件的用法,减少学习曲线
要充分利用Cursor的能力建议
1. 将整个项目代码库导入Cursor工作区
2. 在使用AI功能前确保已浏览关键部分的代码以建立上下文
3. 使用具体、明确的提示来获取最佳结果
4. 先让Cursor解释代码后再请求修改或生成新代码
## 2. 环境准备与项目结构
在开始新模块开发之前,请确保您的开发环境已正确配置,并熟悉项目的基本结构。
### 2.1 开发环境要求
* **后端**:
* JDK 17+ (请根据项目 `pom.xml` 中指定的 Java 版本为准)
* Maven 3.6+
* Redis 6.0+
* MySQL 8.0+ (或其他兼容数据库如PostgreSQL, Oracle)
* IDE: IntelliJ IDEA (推荐,对 Maven 和 Spring Boot 支持良好)
* **前端** (`ruoyi-plus-soybean`):
* Node.js 16.x 或 18.x+
* 包管理器: pnpm 8.x+ (强烈推荐,项目默认配置)
* IDE: VSCode 配合 Cursor 插件 (推荐) 或 Cursor 独立应用
* **AI辅助开发工具**:
* Cursor IDE (集成了 Claude AI 的智能编辑器)
* 配置建议:
* 启用代码补全和聊天功能
* 设置项目级别的上下文提示,说明项目结构和模块关系
* 配置保存检查确保生成的代码符合项目linting规则
* 设置快捷键加速常用AI操作的执行
* 对于团队协作,考虑共享提示模板和命令
*重要提示*:
1. 确保所有环境与 RuoYi-Vue-Plus 主项目所依赖的版本兼容。建议查阅项目根目录的 `pom.xml` (后端) 和 `package.json` (前端) 以获取精确的版本信息。
2. 使用 Cursor 进行开发时,可以通过命令面板 (Cmd/Ctrl+Shift+P) 选择 "Chat with codebase" 功能,帮助快速理解项目结构和代码逻辑。
3. 建议添加对项目特定文件如README.md、架构图文档、API规范的上下文帮助Cursor更好地理解项目规范。
### 2.2 后端项目结构 (`ruoyi-vue-plus`)
后端项目采用典型的 Maven 多模块结构,这对于添加新业务模块至关重要:
* `ruoyi-vue-plus` (根项目)
* `pom.xml`: 主 POM 文件,管理所有模块的依赖和插件。**新增业务模块后,需要在此处的 `<modules>` 标签内注册新模块。**
* `ruoyi-admin`: 启动和核心管理模块。
* `ruoyi-common`: 通用模块父级,包含多个功能明确的子模块:
* `ruoyi-common-core`: 核心工具类、常量、枚举、通用 Service/Mapper 接口等。
* `ruoyi-common-mybatis`: MyBatis Plus 相关配置和基类。
* `ruoyi-common-redis`: Redis 相关配置和工具。
* `ruoyi-common-satoken`: SaToken 权限认证相关。
* `ruoyi-common-log`: 操作日志和系统日志处理。
* `ruoyi-common-web`: Web 相关通用处理如全局异常、XSS过滤等。
* `ruoyi-common-excel`: Excel导入导出处理。
* `ruoyi-common-translation`: 数据翻译功能。
* `ruoyi-common-tenant`: 多租户支持。
* ... (其他通用组件)
* `ruoyi-modules`: **所有业务模块的父级模块。您开发的新业务模块将作为其子模块存放。**
* `ruoyi-system`: 系统管理模块 (用户、角色、菜单、部门、字典等)。
* `ruoyi-generator`: 代码生成器模块。
* `ruoyi-job`: 定时任务模块。
* `ruoyi-workflow`: 工作流模块(如果已启用)。
* `your-new-module`: **您新增的业务模块将放置于此,例如 `ruoyi-pms` (商品管理)。**
* `ruoyi-extend`: 扩展模块,如监控等。
**Cursor使用技巧**
- 使用"文件探索"功能快速导航到关键模块的代码文件
- 通过聊天功能询问"系统模块之间的依赖关系是什么?"来理解项目架构
- 请求Cursor生成新模块的Maven配置文件如"帮我创建一个名为ruoyi-crm的新业务模块的pom.xml文件"
- 让Cursor分析现有模块的结构如"分析ruoyi-system模块的目录结构和主要类"
- 使用Cursor生成符合项目规范的新模块基础结构
### 2.3 前端项目结构 (`ruoyi-plus-soybean`)
前端项目基于 Soybean Admin Pro采用 Vue 3 + TypeScript + Naive UI 技术栈,组织结构清晰:
* `ruoyi-plus-soybean` (项目根目录)
* `src/`: 主要源代码目录。
* `views/`: 页面视图组件。**新模块的页面通常会在此目录下创建对应子目录**,例如 `src/views/pms/product/index.vue`
* `service/api/`: API 请求服务。**新模块的后端接口调用会在此目录下创建对应的 `ts` 文件**,例如 `src/service/api/pms/product.ts`
* `router/routes/modules/`: 路由配置文件。**新模块的路由信息会在此目录下创建新的 `ts` 文件**,如 `product.ts`
* `store/modules/`: Pinia 状态管理模块。如果新模块有复杂的状态管理需求,可以在此创建。
* `locales/langs/`: 国际化语言包。新模块中需要国际化的文本,其键值对会添加到此处的语言文件中。
* `components/`: 通用或业务组件。
* `common/`: 通用基础组件。
* `custom/`: 业务相关组件。
* `advanced/`: 复杂功能组件。
* `hooks/`: 自定义 Hooks (Composition API)。
* `business/`: 业务相关的钩子函数,如表格操作、权限校验等。
* `common/`: 通用钩子函数如状态管理、UI交互等。
* `typings/`: TypeScript 类型定义,特别是 API 相关的类型。
* `api/`: 后端接口类型定义。
* `utils/`: 工具函数集合。
**Cursor使用技巧**
- 使用聊天功能分析前端项目结构:"分析ruoyi-plus-soybean前端项目的文件组织和主要模块"
- 了解组件使用模式:"ruoyi-plus-soybean项目中的表格组件是如何封装的?"
- 根据已有模块生成新模块:"基于system模块的用户管理页面创建一个产品管理页面的基础结构"
- 分析Hooks使用方式"分析项目中useTable这个hook的用法和参数"
- 生成符合规范的API服务"为产品管理模块创建API服务文件包含列表查询、新增、修改和删除方法"
### 2.4 代码生成器简介与Cursor协同使用
RuoYi-Vue-Plus 提供了强大的代码生成器功能(通常在系统后台的"开发工具"→"代码生成"菜单下)。它可以根据数据库表结构自动生成包括后端 Controller, Service, Mapper, Domain (Entity, BO, VO) 以及前端 Vue 页面和 API 调用代码。
代码生成步骤:
1. 配置数据源(如果尚未配置)
2. 导入要生成代码的数据表
3. 编辑表和字段配置(包括字段显示类型、查询方式、是否必填等)
4. 生成代码
5. 下载代码包或直接生成到项目中
**强烈建议在创建新模块的基础 CRUD 功能时,优先使用代码生成器**,它可以显著提高开发效率并保证代码结构的统一性。后续可在生成代码的基础上进行业务逻辑的定制和优化。
**代码生成器与Cursor协同工作**:
1. 使用代码生成器生成基础CRUD代码
2. 将生成的代码导入项目
3. 使用Cursor分析生成的代码结构"分析这个新生成的XXX模块的代码结构和主要功能点"
4. 让Cursor帮助优化生成的代码"优化这个Controller中的分页查询方法添加更多的查询条件支持"
5. 使用Cursor扩展业务逻辑"在这个Service中添加一个批量处理的方法"
6. 请求Cursor解释复杂部分"解释这段MyBatis XML中的动态SQL语句的功能"
这种组合利用代码生成器的快速创建能力和Cursor的智能优化能力可以最大化提升开发效率同时确保代码质量和一致性。
## 3. 模块深入分析:以"用户管理"为例
本章通过对用户管理模块的分析,帮助理解 RuoYi-Vue-Plus 项目的模块设计、分层架构以及常用功能的集成方式。
### 3.1 使用Cursor理解模块架构
在开始开发新模块前彻底理解项目的现有模块结构和设计模式至关重要。Cursor能够帮助开发者快速分析和理解复杂的模块架构特别是像用户管理这样的核心功能模块。
以下是使用Cursor理解用户管理模块的有效方式
1. **快速概览模块结构**
* 使用聊天功能询问:"用户管理模块的主要组件和类有哪些?"
* 让Cursor分析关键类之间的关系"分析SysUserController、SysUserService和SysUserMapper之间的交互流程"
2. **分析数据流转**
* 请求Cursor绘制数据流程"从前端请求到后端处理,用户管理模块的数据流是怎样的?"
* 了解BO/VO对象转换"SysUserBo和SysUserVo的区别和转换过程是什么"
3. **分析权限控制**
* 理解注解应用:"分析用户管理模块中@SaCheckPermission的使用场景和实现逻辑"
* 探索数据权限:"用户管理模块如何实现基于部门的数据权限?"
4. **理解业务逻辑**
* 让Cursor解释复杂方法"解释SysUserServiceImpl中的importUser方法的业务逻辑"
* 分析关键业务规则:"用户管理模块中的密码策略是如何实现的?"
通过这些提问和分析,可以快速掌握模块的设计理念和实现细节,为开发新模块打下坚实基础。
### 3.2 后端实现 (`ruoyi-system` 模块)
后端实现遵循经典的分层架构:
* **Controller 层**: 负责接收前端请求,进行初步参数校验和权限验证,然后调用 Service 层处理业务逻辑,并返回统一格式的响应。它主要关注 HTTP 请求和响应的处理。
* **Service 层**: 包含核心业务逻辑。负责协调对 Mapper 层的调用执行复杂的业务规则处理事务和缓存等。Service 层是业务流程的核心。
* **Mapper 层**: 负责与数据库进行直接交互,执行 SQL 语句完成数据的持久化和检索。通常使用 MyBatis Plus。
* **Domain 层**: 定义数据对象,包括:
* **Entity**: 映射数据库表结构,用于 ORM 操作。
* **BO (Business Object)**: 用于 Controller 层接收请求参数和 Service 层内部数据传递,主要负责参数校验。
* **VO (View Object)**: 用于 Service 层向 Controller 层返回数据,最终响应给前端,包含前端展示所需的字段,可能进行数据脱敏和翻译。
**Cursor使用提示** 可以向Cursor请求"生成一个分析用户管理模块各层次依赖关系的结构图",快速理解分层架构。
#### 3.2.1 核心功能实现分析
用户管理模块中的核心功能在后端各层的应用:
* **权限控制 (SaToken)**: 通过注解或编程式方式在 Controller 层对接口进行访问权限校验。
* **Cursor分析点** 请求"分析SaToken在用户管理模块中的应用方式和关键代码"
* **数据权限**: 在 Mapper 层通过注解实现,根据用户角色动态过滤数据访问范围。
* **Cursor分析点** 询问"解释@DataPermission注解在SysUserMapper中的具体作用"
* **操作日志**: 通过注解在 Controller 层记录用户的业务操作。
* **Cursor分析点** 请求"展示用户管理模块中操作日志注解的使用示例"
* **参数校验**: 主要在 BO 对象上通过 JSR 303/380 注解实现Controller 层触发校验。
* **Cursor分析点** 询问"用户管理模块使用了哪些校验注解及其作用?"
* **Excel 导入/导出**: 利用 EasyExcel 工具类及其注解简化操作。
* **Cursor分析点** 请求"分析用户Excel导入导出功能的核心实现逻辑"
* **多租户处理**: 通过框架提供的机制在 Entity 和 Mapper 层实现数据隔离。
* **Cursor分析点** 询问"用户管理模块如何处理多租户数据隔离?"
* **事务管理**: 在 Service 层通过 `@Transactional` 注解确保数据库操作的原子性。
* **Cursor分析点** 请求"找出用户管理模块中的事务应用示例"
* **缓存使用 (Redis)**: 通过 Spring Cache 注解和工具类提升数据访问性能。
* **Cursor分析点** 询问"用户管理模块的哪些数据使用了缓存,如何实现?"
* **国际化**: 通过资源文件和 MessageSource 在后端实现多语言支持。
* **Cursor分析点** 请求"显示用户管理模块中国际化的实现方式"
* **统一结果与异常处理**: 使用统一的响应结构和全局异常处理器提升代码一致性和用户体验。
* **Cursor分析点** 询问"用户管理模块如何处理业务异常并返回统一结果?"
通过Cursor对这些核心功能的分析可以深入理解框架的设计理念和实现方式为开发新模块奠定基础。
### 3.3 前端实现 (`ruoyi-plus-soybean`)
前端实现主要基于 Vue 3、TypeScript 和 Soybean Admin Pro 框架:
* **视图组件**: 使用 Vue 3 组件构建页面,通常包含搜索区、操作按钮区、数据表格等。
* **Hooks 应用**: 大量使用框架提供的自定义 Hooks (Composables) 封装和复用通用逻辑,如表格数据处理、操作处理、权限校验、字典获取等。
* **API 服务**: 集中封装所有与后端交互的 API 请求函数,提供统一的请求处理和类型约束。
* **路由配置**: 定义页面访问路径、组件加载和菜单元信息,通常按模块组织。
**Cursor使用提示** 可以请求Cursor"分析用户管理前端组件的结构和主要功能块",快速理解前端实现。
#### 3.3.1 前端功能实现分析
前端用户管理模块的核心功能实现:
* **接口调用与数据处理**: 调用封装的 API 服务函数,处理后端数据更新视图。
* **Cursor分析点** 请求"分析用户管理模块的API调用和数据处理流程"
* **表单与校验**: 使用 UI 组件库构建表单,配合校验规则进行数据验证。
* **Cursor分析点** 询问"用户表单组件的校验规则是如何设置的?"
* **权限控制**: 利用 `useAuth` Hook 判断用户权限,控制页面元素的显示和操作。
* **Cursor分析点** 请求"展示useAuth在用户管理页面中的应用案例"
* **国际化**: 使用 `$t` 函数实现界面文本的多语言支持。
* **Cursor分析点** 请求"显示用户管理模块中国际化的实现方式"
* **状态管理 (Pinia)**: 管理全局或跨组件共享的状态,如用户认证信息、数据字典等。
* **Cursor分析点** 请求"分析用户管理使用了哪些Pinia状态管理"
* **子组件通信**: 通过标准的 Props 和 Emits 实现组件间的数据传递和事件交互。
* **Cursor分析点** 询问"用户管理页面中的组件通信方式有哪些?"
通过对前端实现的深入分析结合Cursor的辅助可以清晰理解Vue 3 + TypeScript的组件化开发模式和最佳实践为新模块的前端开发提供参考。
### 3.4 使用Cursor复现模块架构
通过对用户管理模块的分析我们可以使用Cursor帮助复现类似的架构到新的业务模块中
1. **基础结构生成**:
* 请求"根据用户管理模块的结构,生成一个产品管理模块的基础结构框架"
* 让Cursor生成新模块所需的关键文件列表
2. **分层设计复现**:
* 请求"参考用户管理模块设计产品管理模块的Entity, BO, VO对象结构"
* 让Cursor生成"产品管理模块的Controller、Service、Mapper接口定义"
3. **功能特性实现**:
* 请求"基于用户管理模块,为产品管理实现数据权限控制代码"
* 让Cursor生成"产品管理的Excel导入导出功能实现代码"
4. **前端组件设计**:
* 请求"参考用户管理的前端组件,设计产品管理的页面组件结构"
* 让Cursor生成"产品管理的API服务和类型定义文件"
通过这种方式Cursor能够在理解现有模块架构的基础上生成高度符合项目规范的新模块代码大幅提高开发效率并保证代码一致性。
## 4. 后端开发最佳实践
本章节将基于对RuoYi-Vue-Plus特别是用户管理模块的分析并结合通用的后端开发原则和Cursor辅助开发能力总结在进行二次开发时推荐遵循的最佳实践。
### 4.1 Cursor辅助后端开发技巧
在进行RuoYi-Vue-Plus的后端开发时Cursor可以显著提升开发效率和代码质量。以下是一些关键的辅助开发技巧
1. **快速理解项目结构**
* 使用Cursor分析整体架构"分析RuoYi-Vue-Plus后端的核心模块结构和依赖关系"
* 了解设计模式:"RuoYi-Vue-Plus中应用了哪些设计模式请举例说明"
* 生成模块结构图:"绘制一个RuoYi-Vue-Plus模块依赖关系图"
2. **代码生成与完善**
* 生成常用类文件:"基于RuoYi规范创建一个ProductController类"
* 补充接口方法:"为ProductService接口添加批量导入和导出方法"
* 实现复杂逻辑:"实现一个根据销售状态统计产品数量的Service方法"
* 增强生成代码:"优化代码生成器生成的ProductServiceImpl类添加缓存支持"
3. **分析与解释现有代码**
* 理解原理:"解释SaToken在RuoYi-Vue-Plus中的集成方式和工作原理"
* 分析性能:"分析UserServiceImpl中这个查询方法的性能瓶颈"
* 学习最佳实践:"RuoYi项目中MyBatis动态SQL的最佳实践有哪些"
4. **代码重构与优化**
* 优化复杂方法:"重构这个导入用户的方法,提高可读性和维护性"
* 消除代码气味:"这段代码有什么可以改进的地方?"
* 提取公共逻辑:"从这几个Service中提取通用的验证逻辑到工具类"
5. **排查与修复问题**
* 分析错误:"为什么这个查询方法返回的结果和预期不符?"
* 性能诊断:"为什么这个接口响应很慢?可能的原因和解决方案"
* 解决冲突:"解决这个多租户环境下的数据访问冲突问题"
通过这些技巧开发者可以充分利用Cursor的AI能力加快开发进度提升代码质量同时深入理解项目架构和设计理念。
### 4.2 模块设计与创建
* **单一职责原则 (SRP)**: 设计模块时,应确保每个模块聚焦于一块明确、独立的业务功能领域(例如,系统管理模块 `ruoyi-system` 负责用户、角色、菜单、部门、字典等;产品管理模块 `ruoyi-pms` 负责产品信息的维护)。避免创建过于庞大、职责不清的"上帝模块",这会导致业务逻辑交织,难以理解、维护和独立升级。
**使用Cursor进行模块设计**
* 分析现有模块分工:"分析RuoYi-Vue-Plus各业务模块的职责边界和交互方式"
* 设计新模块:"帮我设计一个订单管理模块的功能和边界,考虑与其他模块的关系"
* 避免过度耦合:"检查我设计的这个模块是否存在责任划分不清的问题"
* **模块命名规范**:
* **Maven模块名**: 采用小写字母多个单词之间使用中横线连接kebab-case`ruoyi-order-management`, `ruoyi-customer-support`。这与RuoYi-Vue-Plus现有的模块命名风格`ruoyi-common-core`)保持一致。
* **Java包名**: 遵循标准的Java包命名约定通常以反向域名开头后跟项目名和模块名全小写。例如`org.dromara.ordermanagement` 或 `com.yourcompany.yourproject.customersupport`
* **模块依赖管理**:
* **清晰的依赖关系**: 业务模块(如 `ruoyi-pms`)应明确依赖其所需的平台公共模块(如 `ruoyi-common-core`, `ruoyi-common-mybatis`, `ruoyi-common-web`, `ruoyi-common-satoken`, `ruoyi-common-excel` 等)。
* **避免业务模块间的直接强依赖**: 如果业务模块A需要调用业务模块B的功能应优先考虑是否可以通过更松耦合的方式实现例如
* **API调用**: 如果模块未来可能独立部署为微服务或者希望保持高度的独立性可以设计模块间的API接口通过HTTP/RPC调用如使用OpenFeign若项目引入了Spring Cloud相关技术栈
* **异步消息/事件**: 对于非核心业务流程的解耦、最终一致性场景或耗时操作推荐使用消息队列如RocketMQ、Kafka需额外集成或Spring框架内置的事件发布/监听机制 (`ApplicationEvent`)。
* **共享公共服务/DTO**: 如果仅仅是共享一些通用的业务逻辑或数据结构,可以考虑将其抽象并下沉到 `ruoyi-common-core` 或创建一个新的、更细粒度的 `ruoyi-common-{feature}` 模块中。
* **依赖的最小化原则**: 只依赖真正需要的模块和库,避免不必要的依赖传递和潜在的冲突。
* **新模块创建流程** (回顾PMS模块示例):
1.`ruoyi-vue-plus/ruoyi-modules` 父Maven模块下通过IDE或Maven命令创建新的子模块。
2. 在新模块的 `pom.xml` 文件中,将其 `<parent>` 指向 `ruoyi-modules`并根据新模块的业务需求添加对RuoYi公共模块`ruoyi-common-core`, `ruoyi-common-mybatis`等)和其他第三方库的依赖。
3. 在项目根目录的 `pom.xml``ruoyi-modules/pom.xml` 文件的 `<modules>` 部分,添加新创建的模块名。
4. 在新模块的 `src/main/java/` 目录下,按照既定的包结构(如 `org.dromara.{模块名}`)创建 `controller`, `service`, `mapper`, `domain` (包含 `entity`, `bo`, `vo`) 等子包。
5.`src/main/resources/` 目录下,创建 `mapper/{模块名}` 子目录用于存放MyBatis的XML映射文件以及 `i18n` 目录用于存放国际化属性文件 (如 `messages_zh_CN.properties`, `messages_en_US.properties`)。
### 4.3 分层架构约定
RuoYi-Vue-Plus 遵循了经典且职责清晰的分层架构,二次开发时应严格遵守此约定:
* **Controller (表现层 / 控制层)**:
* **核心职责**: 作为HTTP请求的直接入口负责请求的接收、参数的初步绑定与校验主要通过JSR 303/380注解在BO上完成、调用相应的Service层方法来执行核心业务逻辑、组装Service层返回的数据并构建统一的响应结果 (`R` 对象) 返回给前端。
* **关注点**: HTTP协议相关的处理如路径映射 (`@RequestMapping`, `@GetMapping`等)、请求参数解析 (`@PathVariable`, `@RequestParam`, `@RequestBody`等)、权限控制 (`@SaCheckPermission`)、操作日志记录 (`@Log`)。
* **禁止**: 直接调用Mapper层进行数据库操作包含复杂的业务流程代码直接处理数据库实体 `Entity` 的输入输出应使用BO和VO
* **Service (业务逻辑层)**:
* **接口 (`ISyourService.java`)**: 定义业务操作的契约,明确本业务模块能提供的服务能力。面向接口编程是推荐的。
* **实现 (`YourServiceImpl.java`)**: 包含核心的业务逻辑实现。负责编排对一个或多个Mapper方法的调用、组合其他Service提供的服务、执行复杂的业务规则校验、管理事务边界、处理缓存逻辑读/写)、发送领域事件或消息等。
* **禁止**: 直接依赖或处理HTTP相关的对象 (如 `HttpServletRequest`, `HttpServletResponse`);将数据库实体 `Entity` 直接返回给Controller层应转换为VO
* **事务管理**: 在实现类的公开业务方法上使用 `@Transactional(rollbackFor = Exception.class)` 注解来声明事务边界,确保数据操作的原子性和一致性。
* **Mapper (数据访问层)**:
* **接口 (`YourMapper.java`)**: 继承自框架提供的 `BaseMapperPlus<Entity, Vo>`并可以定义针对特定业务需求的自定义数据库操作方法。对于复杂的SQL语句应在对应的XML映射文件中编写。
* **核心职责**: 负责与数据库进行直接交互执行SQL语句完成数据的持久化增删改和检索
* **禁止**: 包含任何业务逻辑代码被Controller层直接调用。
* **数据权限**: 在Mapper接口方法上使用框架提供的 `@DataPermission` 注解来实现声明式的数据权限控制。
* **Domain (领域对象层)**:
* **Entity (`YourEntity.java`)**: 数据库表在Java中的映射对象用于ORM操作其字段和结构应与数据表严格对应。
* **BO (`YourBo.java`)**: Business Object (业务对象)也常作为DTO (Data Transfer Object)。主要用于Controller层接收前端传入的参数以及在Service层内部进行数据传递。BO对象是进行参数校验 (JSR 303/380注解) 的主要场所。
* **VO (`YourVo.java`)**: View Object (视图对象)。主要用于Service层向Controller层返回处理结果最终序列化为JSON响应给前端。VO的字段应为前端展示所需并可能包含经过数据脱敏 (`@Sensitive`)、数据翻译 (`@Translation`) 或其他格式化处理的数据。
**遵循分层架构的好处**:
* **高内聚、低耦合**: 各层职责单一且明确,层与层之间通过接口或定义好的数据对象进行交互,降低了代码的耦合度。
* **可维护性**: 清晰的结构使得代码更易于理解、修改和维护。问题定位也更加方便。
* **可测试性**: 可以针对每一层尤其是Service层和Mapper层独立编写单元测试和集成测试。
* **可扩展性与复用性**: 更容易在不影响其他层的情况下替换某一层或某一部分的具体实现,业务逻辑也更容易被复用。
### 4.4 Domain 对象规范 (Entity, BO, VO)
在RuoYi-Vue-Plus中合理设计和使用Entity、BO、VO对于保持代码清晰和高效至关重要。
* **Entity (`YourEntity.java`) - 持久化对象**: (如 `SysUser`)
* **用途**: 直接映射数据库表作为MyBatis Plus进行ORM操作的基础。
* **规范**:
* 使用 `@TableName` 指明对应的数据库表名。
* 使用 `@TableId` 标记主键字段,并可指定主键策略 (如雪花算法 `IdType.ASSIGN_ID`)。
* 对于逻辑删除字段,使用 `@TableLogic` 注解。
* 字段命名采用驼峰式对应数据库表的下划线命名MyBatis Plus默认支持此转换
* 继承框架提供的基类 (如 `TenantEntity` 以支持多租户和通用审计字段,或 `BaseEntity` 仅包含审计字段)。
* **不应**包含任何业务逻辑方法 (除了简单的、基于自身属性的判断,如 `SysUser::isSuperAdmin`)。
* **不应**包含与数据库持久化无关的临时字段或计算字段。
* **BO (`YourBo.java`) - 业务/数据传输对象**: (如 `SysUserBo`)
* **用途**:
1. Controller层接收前端HTTP请求体 (`@RequestBody`) 或查询参数时的数据封装对象。
2. Service层方法的形式参数类型用于传递业务操作所需的数据。
3. Service层内部复杂业务逻辑处理时的数据载体。
* **规范**:
* 字段可以部分来源于Entity也可以包含Entity中没有的、特定于业务操作的辅助字段例如`SysUserBo` 中的 `roleIds`, `postIds` 用于关联操作;`params` Map中的 `beginTime`, `endTime` 用于范围查询)。
* **必须**承担参数校验的主要职责在其字段上使用JSR 303/380标准校验注解 (`@NotBlank`, `@NotNull`, `@Size`, `@Min`, `@Max`, `@Email`, `@Pattern`等) 以及框架自定义的校验注解 (如 `@Xss`)。
* 可以使用MapStruct Plus的 `@AutoMapper(target = YourEntity.class)` 注解来辅助与Entity对象之间的属性复制简化转换代码。
* **不应**直接用于数据库的持久化操作应先转换为对应的Entity对象
* **不应**包含大量与前端展示强相关的逻辑或格式化字段这些应在VO中处理
* **VO (`YourVo.java`) - 视图对象**: (如 `SysUserVo`, `SysUserExportVo`, `SysUserImportVo`)
* **用途**: Service层处理完业务逻辑后将结果数据封装成VO对象返回给Controller层最终序列化为JSON响应给前端。
* **规范**:
* 字段内容应完全根据前端界面的展示需求来定制。可能只包含Entity中的部分字段也可能包含通过关联查询、计算或数据翻译得到的额外字段。
* 对于敏感信息字段(如用户邮箱、手机号),应使用框架提供的 `@Sensitive` 注解进行数据脱敏处理,并可根据权限 (`perms`)决定是否对特定用户展示完整信息。
* 对于需要代码/ID转换的字段如部门ID转部门名称、用户ID转用户昵称、字典值转字典标签、OSS文件ID转URL应使用框架提供的 `@Translation` 注解进行自动翻译。
* 对于导出Excel的场景应创建专门的ExportVo (如 `SysUserExportVo`),其字段使用 `@ExcelProperty` 注解定义Excel列标题并使用 `@ExcelDictFormat` 等注解处理字典转换。
* 对于从Excel导入数据的场景应创建专门的ImportVo (如 `SysUserImportVo`),其字段同样使用 `@ExcelProperty` 匹配Excel列并可使用 `@ExcelDictFormat` 进行字典值的反向转换。
* **绝不应**包含用户的密码等高度敏感且不应在前端展示的原始信息。
* 可以使用MapStruct Plus的 `@AutoMapper(target = YourEntity.class)` 注解通常是反向的从Entity/BO生成VO来辅助对象属性的复制。
* **不应**用于接收前端的输入参数这是BO的职责
* **不应**包含业务校验逻辑。
* **命名约定**:
* Entity: 直接使用领域名词,如 `Product`, `Order`
* BO: 通常以 `...Bo` 为后缀,如 `ProductBo`, `OrderQueryBo`
* VO: 通常以 `...Vo` 为后缀,如 `ProductVo`, `OrderDetailVo`。特定用途的VO可以更具体`ProductExportVo`
* **对象转换**:
* 推荐使用MapStruct Plus (`@AutoMapper`) 或其他成熟的Java Bean映射工具 (如 `cn.hutool.core.bean.BeanUtil.copyProperties`) 来完成Entity, BO, VO之间的属性复制以减少手动编写大量getter/setter的模板代码并提高代码的可读性和可维护性。
* 进行对象转换时需注意深拷贝与浅拷贝的问题特别是当对象中包含集合或复杂嵌套对象时。对于复杂映射逻辑MapStruct Plus也支持自定义映射方法。
* **序列化**: 所有VO对象以及可能需要缓存的Entity/BO对象都应实现 `java.io.Serializable` 接口这是Java序列化的基本要求对于对象的缓存、分布式Session共享、RPC传输等场景非常重要。
## 5. 前端开发最佳实践
基于对RuoYi-Vue-Plus (Soybean Admin Pro 版本前端) 的分析,本章节将提供前端开发的最佳实践指南,帮助开发人员高效地进行二次开发。
### 5.1 Cursor辅助前端开发技巧
在进行RuoYi-Vue-Plus的前端开发时Cursor可以显著提升开发效率和代码质量。以下是一些关键的辅助开发技巧
1. **快速理解项目结构**
* 分析项目架构:"分析ruoyi-plus-soybean前端项目的整体架构和核心概念"
* 查看技术栈:"列出ruoyi-plus-soybean使用的主要技术栈和库"
* 生成目录结构图:"绘制一个ruoyi-plus-soybean前端项目的目录结构图"
2. **组件开发与完善**
* 生成业务组件:"基于项目规范创建一个产品详情页组件"
* 添加表单验证:"为这个产品表单添加完整的字段验证规则"
* 实现复杂UI"实现一个带有拖拽排序功能的产品分类管理组件"
* 增强现有组件:"为这个表格组件添加导出Excel功能"
3. **前端工具类分析**
* 理解工具实现:"解释useTable hook的实现原理和主要功能"
* 分析性能:"分析这个表单渲染方法的性能瓶颈"
* 学习最佳实践:"项目中API请求封装的最佳实践有哪些"
4. **代码重构与优化**
* 优化复杂组件:"重构这个多级表单组件,提高可维护性"
* 消除代码气味:"这段TypeScript代码有哪些可以改进的地方"
* 提取公共逻辑:"从这几个组件中提取通用的表单处理逻辑到Hook"
5. **排查与修复前端问题**
* 分析渲染问题:"为什么这个组件首次加载时显示异常?"
* 性能诊断:"为什么这个表格组件滚动卡顿?可能的原因和解决方案"
* 解决兼容性问题:"解决这个组件在不同浏览器下的显示差异"
通过这些技巧开发者可以充分利用Cursor的AI能力加快前端开发进度提升代码质量和用户体验。
### 5.2 前端项目结构与规范
RuoYi-Vue-Plus (Soybean Admin Pro 版本) 前端项目采用了Vue 3 + TypeScript + Vite的现代化技术栈在二次开发时应遵循以下结构与规范
* **核心目录结构**:
* `src/assets/`: 静态资源文件,如图片、图标和全局样式。
* `src/components/`: 通用组件库包含可复用的UI组件。
* `src/hooks/`: Vue 3 Composition API的自定义hooks封装可复用的逻辑。
* `src/layouts/`: 布局组件,定义整体页面结构。
* `src/router/`: 路由配置,定义应用的导航结构。
* `src/service/api/`: API服务封装与后端的HTTP通信。
* `src/store/`: 使用Pinia的全局状态管理。
* `src/views/`: 页面组件,通常按业务模块组织。
* `src/typings/api/`: TypeScript类型定义特别是API相关的类型。
**使用Cursor进行前端结构分析**
* 分析目录结构:"分析ruoyi-plus-soybean前端项目的目录结构和主要职责"
* 查看组件组织:"ruoyi-plus-soybean中组件是如何组织和复用的"
* 理解技术集成:"项目中Naive UI是如何与Vue 3集成的"
* **前端命名规范**:
* **文件命名**: 组件文件采用PascalCase如`UserForm.vue`),工具/服务类文件采用camelCase如`userService.ts`)。
* **目录命名**: 使用kebab-case如`user-management/`)。
* **组件命名**: 组件名应该始终是多个单词的使用PascalCase以避免与HTML元素冲突如`AppButton`而非`Button`)。
* **Props命名**: 在组件内部props应使用camelCase声明在模板中使用kebab-case传递Vue自动转换
* **事件命名**: 使用kebab-case如`@item-click`),并优先使用原生事件名。
* **代码风格与最佳实践**:
* **Vue 3 Composition API**: 优先使用Composition API + `<script setup>`语法,利用其更好的类型推断和逻辑组织能力。
* **TypeScript类型定义**: 为props、响应式状态、方法参数和返回值提供明确的类型注解避免使用`any`。
* **状态管理**: 局部状态使用`ref`/`reactive`共享状态使用Pinia store。
* **性能优化**: 合理使用`computed`、`v-memo`和组件懒加载,避免不必要的渲染。
* **代码分割**: 路由级别的组件应使用动态导入(`import()`)以实现按需加载。
### 5.3 前端功能模块开发规范
在RuoYi-Vue-Plus前端二次开发中为保持一致性和可维护性应遵循以下规范
* **视图组件设计**:
* **页面结构**: 遵循"搜索区 + 操作区 + 表格/表单区"的经典布局。
* **组件复用**: 将复杂页面拆分为多个小型组件,提高复用性和可维护性。
* **状态提升**: 共享状态应提升到合适的层级避免prop drilling。
* **组件通信**: 使用props和emits进行父子组件通信复杂场景可使用provide/inject或Pinia。
* **API服务与数据处理**:
* **API封装**: 所有后端API调用应在`src/service/api/`下集中管理,按业务模块组织。
* **类型定义**: 请求参数和响应数据都应有明确的TypeScript接口定义位于`src/typings/api/`下。
* **错误处理**: 使用统一的错误处理机制,包括网络错误、业务错误和权限错误。
* **数据转换**: 在API层处理数据转换保证组件接收到的数据格式一致。
* **路由与权限管理**:
* **路由配置**: 新模块路由应定义在`src/router/routes/modules/`下并设置适当的元信息如title、icon、权限等
* **权限控制**: 使用`useAuth`钩子和权限指令控制UI元素的显示/隐藏,路由守卫控制页面访问权限。
* **菜单集成**: 确保路由配置中包含正确的meta信息使其能被自动集成到系统菜单中。
* **样式与主题**:
* **样式隔离**: 组件样式应使用scoped或CSS模块化方案避免全局污染。
* **主题兼容**: 支持深色模式和明亮模式使用CSS变量实现主题切换。
* **响应式设计**: 页面布局应考虑不同设备尺寸,使用响应式设计原则。
* **国际化**:
* **文本外部化**: 所有用户可见文本都应通过`$t`函数从语言包获取,而不是硬编码。
* **语言包组织**: 新模块的翻译应添加到`src/locales/langs/`下对应的语言文件中。
* **状态管理**:
* **Pinia Store**: 模块级共享状态应创建独立的Pinia store位于`src/store/modules/`下。
* **状态持久化**: 需要持久化的状态应使用storage插件保存到localStorage或sessionStorage。
* **异常与加载状态**:
* **加载指示**: 使用骨架屏、加载动画等提供视觉反馈。
* **空状态处理**: 数据为空时显示友好的空状态提示,而非空白界面。
* **错误处理**: 捕获并友好展示操作错误,提供重试机制。
### 5.4 前端组件开发案例
让我们以一个典型的"产品管理"模块为例展示如何使用Cursor辅助开发前端组件
1. **创建API服务**:
* 请求Cursor"基于RuoYi-Vue-Plus规范创建产品管理模块的API服务文件包含列表查询、详情、新增、修改和删除方法"
* 得到productApi.ts文件包含完整的API调用方法和类型定义。
2. **创建列表页组件**:
* 请求Cursor"基于Naive UI和项目规范创建一个产品列表页组件包含搜索条件、操作按钮和数据表格"
* 得到ProductList.vue组件实现了完整的列表功能。
3. **创建表单组件**:
* 请求Cursor"创建一个产品表单组件,用于新增和编辑产品信息,包含必要的字段验证"
* 得到ProductForm.vue组件可在对话框或抽屉中使用。
4. **创建路由配置**:
* 请求Cursor"为产品管理模块创建路由配置,包含列表页和详情页"
* 得到product.ts路由配置文件可整合到系统菜单中。
5. **状态管理**:
* 请求Cursor"创建产品管理的Pinia store管理产品列表和筛选条件状态"
* 得到useProductStore.ts实现产品数据的集中管理。
通过Cursor的辅助可以快速生成符合项目规范的代码大幅提高开发效率。
### 5.5 前后端交互最佳实践
在RuoYi-Vue-Plus项目中前后端交互是开发过程中的重要环节应遵循以下最佳实践
* **统一的API调用封装**:
* 使用项目提供的封装工具axios或alova处理HTTP请求。
* 统一处理请求头、认证令牌、响应状态和错误。
* 按后端API端点组织前端API服务文件。
* **请求与响应类型定义**:
* 为每个API请求定义明确的参数类型和响应类型。
* 与后端BO、VO对象保持一致确保类型安全。
* 在TypeScript接口中添加必要的注释提高代码可读性。
* **请求状态管理**:
* 使用hooks如useRequest管理请求状态包括loading、error和data。
* 实现请求取消、防抖、节流等优化机制。
* 合理处理并发请求和请求依赖关系。
* **数据缓存策略**:
* 适当使用客户端缓存减少重复请求,提高用户体验。
* 实现数据刷新机制,确保数据及时更新。
* 考虑使用service worker或localStorage进行离线数据存储。
* **错误处理与重试**:
* 实现统一的错误处理机制,友好展示错误信息。
* 针对网络错误提供自动或手动重试机制。
* 区分处理业务错误和技术错误。
* **表单提交与验证**:
* 实现前端表单验证,减轻后端验证压力。
* 使用统一的表单提交方法,处理提交状态和响应。
* 适当使用防重复提交机制,避免用户误操作。
* **文件上传与下载**:
* 封装统一的文件上传组件,支持进度展示、大文件分片上传等。
* 实现文件下载功能,支持直接下载和流式下载。
* 处理文件格式验证和大小限制。
通过遵循这些前后端交互最佳实践可以确保前端应用与后端API的无缝集成提高开发效率和用户体验。
## 6. 前后端协作规范
为了确保RuoYi-Vue-Plus二次开发过程中前后端协作的高效与顺畅本章节提供了一套协作规范与最佳实践。
### 6.1 接口设计与文档规范
在RuoYi-Vue-Plus项目中良好的接口设计与规范文档是前后端协作的基础
* **RESTful API设计**:
* 遵循HTTP方法语义GET查询、POST创建、PUT更新、DELETE删除
* 使用资源为中心的URL设计如`/api/system/user/{userId}`。
* 使用HTTP状态码正确表达请求结果200成功、400客户端错误、500服务器错误等
* 保持接口的向后兼容性,避免随意修改已发布接口的参数结构。
* **接口文档规范**:
* 使用Swagger/Knife4j生成规范的API文档包含完整的接口信息、参数说明和响应结构。
* 对每个接口添加详细注释,说明功能、使用场景、参数要求和业务规则。
* 及时更新接口文档,确保与实际代码保持一致。
* 在Swagger注解中明确标识接口的权限要求、是否需要认证等信息。
* **请求与响应格式**:
* 请求参数应符合后端BO对象的结构必填字段明确标识。
* 响应统一使用RuoYi-Vue-Plus的`R<T>`通用返回结构,包含业务状态码、提示信息和数据。
* 分页查询接口应返回标准化的分页信息结构,包含总记录数、当前页数据等。
* 使用恰当的数据类型特别是日期时间ISO 8601格式和数值类型。
### 6.2 开发协作流程
有效的协作流程可以大幅提高前后端团队的开发效率:
* **接口优先原则**:
* 在开发新功能前先由前后端共同确定API接口规范包括URL、参数结构、响应格式等。
* 后端先完成接口的基本骨架实现并提供Mock数据前端可以据此并行开发。
* 使用Swagger/Knife4j作为接口契约前后端基于此进行独立开发。
* **代码评审与联调**:
* 实施定期代码评审,确保代码质量和一致性。
* 安排专门的联调时间,解决前后端交互问题。
* 建立明确的Bug反馈与修复流程快速响应问题。
* **使用Cursor辅助协作**:
* 利用Cursor分析后端实现"分析这个用户管理接口的参数结构和响应格式"
* 让Cursor生成前端调用代码"基于这个Swagger文档生成用户管理模块的API调用代码"
* 使用Cursor同步修改"后端修改了用户查询接口更新对应的前端API调用和类型定义"
### 6.3 数据结构一致性
前后端数据结构的一致性是无缝集成的关键:
* **类型映射**:
* 建立Java与TypeScript类型的明确映射关系如Java的Long/Integer对应TS的numberString对应string等。
* 对于特殊类型(如日期时间、枚举值)定义统一的序列化与反序列化规则。
* 前端TypeScript接口应与后端BO/VO对象结构保持一致字段名称和类型对应。
* **命名一致性**:
* API路径、参数名和响应字段应使用一致的命名风格推荐使用小驼峰式camelCase
* 保持前后端对业务概念的命名一致性,避免同一实体在前后端使用不同名称。
* 在代码注释中使用一致的业务术语表述。
* **数据同步策略**:
* 使用Swagger生成的接口文档导出API定义前端可以基于此自动生成TypeScript类型定义。
* 后端接口变更时,及时通知前端并更新对应的类型定义。
* 考虑使用代码生成工具自动保持前后端数据结构的同步。
### 6.4 异常处理与状态码规范
统一的异常处理机制能够提高系统的可靠性和用户体验:
* **业务状态码**:
* 使用RuoYi-Vue-Plus统一的业务状态码体系不同类型的错误使用不同的状态码范围。
* 确保错误信息清晰明确,便于定位问题。
* 对安全敏感的异常,在生产环境隐藏技术细节,仅展示用户友好的错误信息。
* **前端异常处理**:
* 实现统一的错误拦截器,根据后端返回的状态码进行相应处理。
* 针对不同类型的错误提供不同的用户界面反馈(如表单验证错误、权限错误、系统错误等)。
* 特殊业务错误应有专门的处理逻辑,如令牌过期自动跳转登录页面。
* **后端异常处理**:
* 使用全局异常处理器统一捕获并处理异常,转换为标准的响应格式。
* 区分业务异常和系统异常,业务异常应给出清晰的错误原因。
* 敏感操作应有完整的日志记录,便于问题追踪。
## 7. 代码规范与风格
在RuoYi-Vue-Plus项目的二次开发中遵循统一的代码规范和风格可以提高代码质量、可维护性和团队协作效率。
### 7.1 后端代码规范
* **Java编码风格**:
* 遵循阿里巴巴Java开发手册规范结合RuoYi-Vue-Plus项目的特定约定。
* 使用统一的代码格式化配置如缩进4个空格、行宽最大120字符等。
* 遵循Java类和方法的命名约定类名使用PascalCase方法名和变量名使用camelCase。
* 方法名应反映其功能和意图,如`getUserById`、`updateUserStatus`等。
* **代码注释规范**:
* 类级注释每个类都应有Javadoc注释说明其目的、功能和特殊说明。
* 方法注释公共方法应有完整的Javadoc注释包括功能描述、参数说明、返回值和异常。
* 使用`@author`标注代码的作者,便于追踪责任人。
* 对于复杂的业务逻辑或算法,添加详细的行内注释说明。
* **SQL编写规范**:
* 优先使用MyBatis Plus提供的方法避免手写复杂SQL。
* 必要的自定义SQL应放在XML文件中而非注解中便于维护和阅读。
* SQL关键字使用大写表名和字段名使用小写提高可读性。
* 编写复杂查询时应考虑性能,合理使用索引,避免全表扫描。
* **安全编码规范**:
* 所有用户输入必须进行校验和过滤防止XSS、SQL注入等安全漏洞。
* 敏感数据(如密码)必须加密存储,并在传输和展示时脱敏处理。
* 使用参数化查询避免直接拼接SQL语句。
* 权限检查应在所有敏感操作前执行,确保用户只能访问其有权限的资源。
### 7.2 前端代码规范
* **Vue组件风格**:
* 使用Vue 3的Composition API和`<script setup>`语法组织代码。
* 组件文件采用单文件组件SFC格式即`.vue`文件。
* 组件名应使用PascalCase并且至少两个单词如`UserProfile`而非`User`)。
* 组件应遵循单一职责原则,过大的组件应拆分为多个小组件。
* **TypeScript规范**:
* 为所有变量、参数、返回值和属性提供明确的类型注解,避免使用`any`。
* 使用接口Interface定义复杂数据结构并添加必要的注释说明。
* 遵循TypeScript的命名约定接口名使用PascalCase并以`I`开头类型别名使用PascalCase变量和函数使用camelCase。
* 利用TypeScript的类型检查能力在编译时捕获潜在问题。
* **CSS/SCSS规范**:
* 使用scoped属性或CSS Modules隔离组件样式避免全局污染。
* 遵循BEMBlock-Element-Modifier或类似的CSS命名规范。
* 复用项目提供的颜色变量、主题变量和布局工具,保持视觉一致性。
* 编写响应式样式,确保在不同设备上的良好表现。
* **前端代码优化**:
* 组件应实现合理的懒加载,特别是大型页面或组件。
* 避免不必要的计算和渲染,合理使用`computed`、`watch`和`v-memo`。
* 对用户输入添加防抖/节流处理避免频繁触发事件或API调用。
* 使用Vue DevTools进行性能分析优化重渲染和内存使用。
### 7.3 使用Cursor提高代码质量
Cursor作为AI编辑助手能显著提高代码质量和开发效率
* **代码审查辅助**:
* 请求Cursor检查代码质量"分析这个Service类有哪些可以改进的地方"
* 进行安全审查:"检查这段代码是否存在安全漏洞"
* 寻找性能优化点:"分析这个查询方法的性能,提供优化建议"
* **代码规范化**:
* 统一编码风格:"根据阿里巴巴Java规范格式化这段代码"
* 自动添加注释:"为这个复杂方法添加完整的Javadoc注释"
* 类型补全:"为这段TypeScript代码添加完整的类型定义"
* **重构与优化**:
* 提取重复逻辑:"从这几个Controller中提取公共验证逻辑"
* 简化复杂方法:"重构这个超过100行的方法提高可读性"
* 优化算法:"这个列表处理算法有更高效的实现方式吗?"
* **学习与最佳实践**:
* 分析设计模式:"这段代码使用了什么设计模式?如何改进?"
* 学习项目风格:"分析RuoYi-Vue-Plus项目的错误处理机制和最佳实践"
* 理解框架特性:"说明MyBatis Plus的性能优化特性及使用方法"
通过利用Cursor的这些功能开发团队可以统一代码风格提高代码质量减少常见错误同时加快开发速度。
## 8. 新模块添加流程与实践
本章节将完整展示如何在RuoYi-Vue-Plus中添加全新的业务模块涵盖从需求分析到最终部署的全流程。
### 8.1 模块需求分析与设计
在开始开发前,需要对新模块进行全面的需求分析与架构设计:
* **需求收集与分析**:
* 明确新模块的业务目标、功能范围和用户角色。
* 绘制业务流程图,理清核心业务规则和数据流向。
* 设计数据模型,确定实体关系和关键属性。
* 识别与现有模块的交互点和依赖关系。
* **使用Cursor辅助设计**:
* 业务流程分析:"基于这个需求描述,绘制产品管理模块的业务流程图"
* 数据模型设计:"根据产品管理需求,设计数据库表结构和实体关系"
* 接口规划:"为产品管理模块设计RESTful API接口清单"
* 模块架构:"设计产品管理模块的整体架构和组件结构"
### 8.2 数据库设计与实现
良好的数据库设计是模块稳定运行的基础:
* **表结构设计**:
* 遵循RuoYi-Vue-Plus的表命名规范如业务表使用模块前缀如`pms_product`)。
* 包含标准审计字段(如创建时间、创建者、更新时间、更新者)。
* 对于多租户场景添加租户ID字段。
* 设计合理的索引,考虑查询性能和数据完整性。
* **SQL脚本编写**:
* 创建数据表的SQL脚本应放在对应的SQL目录下如`script/sql/mysql/pms_xxx.sql`)。
* 编写初始数据插入脚本,包括必要的字典数据、菜单权限等。
* 为升级场景准备增量更新脚本,放在`update`子目录下。
* 包含必要的注释,说明表的用途和关键字段。
* **使用Cursor生成SQL**:
* 请求:"根据产品管理模块需求生成创建产品表和分类表的MySQL SQL脚本"
* 请求:"为产品管理模块生成菜单和权限的初始化SQL"
* 请求:"根据这个ER图优化产品表索引设计"
### 8.3 后端模块开发流程
后端模块开发应遵循RuoYi-Vue-Plus的分层架构和开发规范
1. **创建Maven模块**:
* 在`ruoyi-modules`下创建新的子模块(如`ruoyi-pms`)。
* 配置pom.xml添加必要的依赖项。
* 创建基础包结构controller, service, mapper, domain等
2. **使用代码生成器**:
* 通过RuoYi-Vue-Plus后台的代码生成功能基于数据表生成基础CRUD代码。
* 根据业务需求调整生成的代码,特别是表单验证规则和业务逻辑。
* 生成对应的前端代码包括API服务、视图组件和路由定义。
3. **业务逻辑实现**:
* 依照分层架构实现业务逻辑,严格遵循前面章节的架构约定。
* 实现个性化业务需求,如特殊查询、统计分析、报表导出等。
* 添加单元测试,验证关键业务逻辑的正确性。
4. **接口测试与文档**:
* 使用Swagger/Knife4j生成API文档完善接口描述和参数说明。
* 通过Postman或Knife4j界面测试接口功能验证各种场景下的行为是否符合预期。
* 编写接口测试脚本,便于后续持续集成和回归测试。
### 8.4 前端模块开发流程
前端模块开发应遵循RuoYi-Vue-Plus (Soybean Admin Pro) 的组件化开发理念:
1. **准备工作**:
* 在前端项目中创建对应的目录结构,如`src/views/your-module/`。
* 定义API服务和类型放在`src/service/api/your-module/`和`src/typings/api/your-module/`。
* 创建路由配置,放在`src/router/routes/modules/your-module.ts`。
2. **组件开发**:
* 基于UI设计和业务需求开发必要的页面组件和功能组件。
* 实现数据加载、表单交互、列表展示等核心功能。
* 确保所有组件支持国际化和主题切换。
3. **业务逻辑与状态管理**:
* 根据需求实现前端业务逻辑,如数据处理、校验逻辑等。
* 针对复杂状态创建Pinia store进行集中管理。
* 抽取通用逻辑到hooks提高代码复用率。
4. **测试与优化**:
* 在各种浏览器环境下测试功能,确保兼容性。
* 进行性能优化,如组件懒加载、虚拟滚动等。
* 使用Chrome DevTools分析渲染性能优化瓶颈。
### 8.5 集成与部署
最后,将新模块集成到系统并准备部署:
1. **前后端集成**:
* 进行前后端联调,解决接口对接问题。
* 验证数据流转和业务流程的完整性。
* 修复发现的Bug并优化用户体验。
2. **系统集成**:
* 在系统菜单中添加新模块入口。
* 配置模块权限,确保只有有权限的用户能访问。
* 更新全局类型、工具类等共享资源。
3. **部署准备**:
* 更新项目文档包括README、用户手册等。
* 准备部署脚本和配置文件。
* 执行最终测试,确认所有功能正常运行。
4. **持续集成与部署**:
* 将代码提交到版本控制系统并触发CI/CD流程。
* 执行自动化测试,验证新模块不会破坏现有功能。
* 部署到测试环境或生产环境,并进行监控。
通过遵循这一完整的开发流程并充分利用Cursor提供的AI辅助功能可以高效地将新业务模块集成到RuoYi-Vue-Plus系统中确保代码质量和功能稳定性。
## 9. 总结与最佳实践要点
作为总结本文档提供了RuoYi-Vue-Plus项目二次开发的全面指南特别强调了借助Cursor这一现代AI开发工具提升开发效率的方法。以下是关键最佳实践要点
1. **架构理解与遵循**:
* 深入理解RuoYi-Vue-Plus的分层架构和模块设计。
* 严格遵循既定的架构约定,保持代码结构的一致性。
* 使用Cursor快速分析和理解现有代码结构加速学习曲线。
2. **代码规范与质量**:
* 遵循统一的编码规范和风格指南。
* 利用Cursor进行代码审查和质量提升。
* 注重注释和文档,确保代码可维护性。
3. **模块设计与实现**:
* 新模块应保持职责单一、边界清晰。
* 充分利用代码生成器提高开发效率。
* 确保前后端接口设计的一致性和规范性。
4. **前后端协作**:
* 建立明确的接口契约和开发流程。
* 保持数据结构和命名约定的一致性。
* 利用Cursor辅助API调用和类型生成减少协作成本。
5. **性能与安全考量**:
* 在设计阶段考虑性能和安全因素。
* 实施必要的安全措施,如输入验证、权限控制和数据脱敏。
* 使用Cursor分析性能瓶颈并提供优化建议。
6. **测试与部署**:
* 为核心业务逻辑编写单元测试。
* 实施自动化测试和持续集成。
* 建立规范的部署流程和回滚机制。
通过遵循这些最佳实践结合Cursor的AI辅助能力开发团队可以显著提高在RuoYi-Vue-Plus平台上的二次开发效率和代码质量打造出高性能、高可靠性的企业级应用。