mirror of
https://github.com/dromara/RuoYi-Vue-Plus.git
synced 2025-09-27 05:36:41 +08:00
942 lines
59 KiB
Markdown
942 lines
59 KiB
Markdown
# 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的number,String对应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隔离组件样式,避免全局污染。
|
||
* 遵循BEM(Block-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平台上的二次开发效率和代码质量,打造出高性能、高可靠性的企业级应用。
|