1. 项目概述
最近在做一个农业环境监测系统的二次开发项目,基于若依(RuoYi)分离版框架进行扩展。这个开源框架确实给开发者提供了很大便利,但实际开发过程中还是遇到了不少坑。今天先分享第一部分内容:如何在若依系统中创建新菜单并实现菜单结构调整。
若依框架作为国内流行的开源后台管理系统,其分离版采用前后端分离架构,前端基于Vue.js+Element UI,后端基于Spring Boot+MyBatis。这种架构在开发企业级应用时非常高效,但新手在二次开发时往往会遇到各种配置问题。
2. 数据库设计与表创建
2.1 农业CO2监测数据表设计
在农业环境监测场景中,CO2浓度是一个重要指标。我们需要设计一个能够记录传感器数据并支持空间分析的数据表结构:
sql复制CREATE TABLE `agriculture_co2_data` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`sensor_id` varchar(50) NOT NULL COMMENT '传感器编号',
`co2_value` decimal(10,2) NOT NULL COMMENT 'CO2浓度值(ppm)',
`x_coordinate` decimal(10,2) DEFAULT NULL COMMENT 'X坐标(米)',
`y_coordinate` decimal(10,2) DEFAULT NULL COMMENT 'Y坐标(米)',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '检测时间',
`remark` varchar(255) DEFAULT NULL COMMENT '备注',
PRIMARY KEY (`id`),
KEY `idx_sensor_id` (`sensor_id`),
KEY `idx_coordinates` (`x_coordinate`, `y_coordinate`),
KEY `idx_create_time` (`create_time`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='农业CO2检测数据表';
这个设计有几个关键点:
- 使用decimal(10,2)存储CO2值和坐标,确保数值精度
- 添加空间坐标索引(idx_coordinates)便于后续GIS分析
- 自动记录数据创建时间(create_time)
- 为传感器ID和创建时间建立索引提高查询效率
2.2 使用Navicat执行建表语句
在Navicat中执行SQL的注意事项:
- 确保连接的是正确的数据库(ry-vue)
- 执行前先检查SQL语法是否正确
- 执行后刷新表列表确认表已创建
- 建议先备份数据库再进行结构变更
提示:若依框架默认使用MySQL数据库,表名建议使用小写字母和下划线组合,避免使用特殊字符。
3. 若依代码生成器使用
3.1 生成基础CRUD代码
若依的代码生成器能极大提高开发效率:
- 进入系统管理 → 代码生成
- 勾选新建的agriculture_co2_data表
- 点击"编辑"按钮配置生成选项
关键配置项:
- 模块名:agriculture(保持全小写)
- 业务名:co2Data(使用驼峰命名)
- 作者:填写你的姓名(会自动加到代码注释中)
3.2 代码生成后的文件结构
生成的代码包包含以下关键部分:
code复制agriculture_co2_data/
├── main/
│ ├── java/
│ │ └── com/
│ │ └── ruoyi/
│ │ └── agriculture/
│ │ ├── controller/
│ │ ├── domain/
│ │ ├── mapper/
│ │ └── service/
│ └── resources/
│ └── mapper/
└── vue/
├── api/
└── views/
4. 前后端文件部署
4.1 后端文件部署
后端文件需要放置到三个关键位置:
- Controller类:
code复制ruoyi-admin/src/main/java/com/ruoyi/web/controller/agriculture/
- Domain/Mapper/Service类:
code复制ruoyi-system/src/main/java/com/ruoyi/agriculture/
- MyBatis映射文件:
code复制ruoyi-system/src/main/resources/mapper/agriculture/
注意:放置后需要检查包路径是否正确,特别是Controller类中的@RequestMapping注解路径。
4.2 前端文件部署
前端Vue文件需要放置到两个位置:
- API接口文件:
code复制ruoyi-ui/src/api/agriculture/data.js
- 视图组件文件:
code复制ruoyi-ui/src/views/agriculture/co2Data/
部署完成后需要:
- 检查API文件中的请求路径是否正确
- 确认组件中的路由配置匹配后端
- 验证Element UI组件引用路径
4.3 常见部署问题排查
- 404错误:
- 检查Controller是否加了@RestController注解
- 确认@RequestMapping路径是否正确
- 查看前端API调用的URL是否匹配
- 500错误:
- 查看后端日志确定具体异常
- 检查MyBatis映射文件位置是否正确
- 确认数据库连接配置
- 页面显示异常:
- 检查浏览器控制台是否有JS错误
- 确认Vue组件引入路径正确
- 验证Element UI版本兼容性
5. 菜单配置与管理
5.1 创建新菜单项
在若依系统中创建菜单的步骤:
- 进入系统管理 → 菜单管理
- 点击"新增"按钮
- 填写菜单信息:
- 菜单名称:CO2监测
- 父级菜单:选择适当位置
- 路由地址:/agriculture/co2Data
- 组件路径:agriculture/co2Data/index
- 权限标识:agriculture:co2Data:list
关键参数说明:
- 路由地址需要与Vue路由配置一致
- 组件路径对应src/views下的文件结构
- 权限标识用于控制访问权限
5.2 菜单结构调整
若依支持灵活的菜单层级管理:
- 通过"修改"功能调整菜单顺序
- 可以拖拽改变菜单层级关系
- 支持多级菜单嵌套(建议不超过3级)
调整技巧:
- 常用功能放在一级菜单
- 相关功能分组到同一父菜单下
- 使用菜单图标提升用户体验
5.3 菜单缓存问题处理
修改菜单后可能出现缓存问题:
- 清除浏览器缓存
- 重新登录系统
- 检查后端菜单缓存配置
- 确认数据库sys_menu表已更新
6. 开发经验分享
6.1 项目结构规划建议
- 按业务模块划分包结构
- 公共组件提取到common目录
- API接口按功能模块分组
- 保持命名一致性(全小写+下划线或驼峰)
6.2 若依二次开发技巧
- 充分利用代码生成器
- 修改前先备份关键文件
- 关注官方更新日志
- 复杂功能先在小模块测试
6.3 调试技巧
- 后端:
- 开启DEBUG日志级别
- 使用Postman测试接口
- 关注控制台异常堆栈
- 前端:
- 善用Chrome开发者工具
- 查看Vuex状态变化
- 使用console.log调试
7. 后续开发计划
完成基础菜单配置后,下一步将实现:
- CO2数据可视化展示
- 传感器地图分布
- 数据异常报警功能
- 移动端适配优化
在实际开发中发现,若依的权限控制和菜单管理非常灵活,但需要遵循一定的规范。建议初次使用时先完整阅读官方文档,了解其设计理念和最佳实践。