一个基于Spring Boot + React的现代化水资源监测数据管理系统，专为水资源管理部门、环保机构和相关企业设计。
✅ 系统已完全正常运行！
- 数据库连接正常，包含完整的测试数据
- 后端API服务正常，所有接口返回正确数据
- 前端界面正常显示，不再出现"暂无数据"问题
- 所有数据库字段映射已修复，实体类与数据库表结构完全匹配
- 监测点管理: 管理水库、河流、地下水、水厂等各类监测点
- 实时数据监控: 实时显示水位、水质、温度、pH值等关键指标
- 地图可视化: 在地图上直观显示所有监测点位置和状态
- 数据分析: 提供图表分析和历史数据趋势
- 预警系统: 自动监测异常数据并发出预警
- 数据导出: 支持监测数据的导出和报表生成
- 现代化设计: 基于Ant Design的美观界面
- 响应式布局: 完美适配电脑、平板、手机
- 操作简单: 直观的用户界面，易学易用
- 实时更新: 数据实时刷新，无需手动刷新页面
- Spring Boot 2.7.18: 企业级Java开发框架
- MySQL 8.0: 关系型数据库存储
- MyBatis Plus: 数据库操作框架
- Redis: 缓存和会话管理
- Maven: 项目构建和依赖管理
- React 18: 现代化前端框架
- TypeScript: 类型安全的JavaScript
- Ant Design: 企业级UI组件库
- Leaflet: 地图展示组件
- ECharts: 数据可视化图表
- Vite: 快速构建工具
- 操作系统: Windows 10/11, macOS 10.15+, 或 Linux
- 内存: 至少 8GB RAM (推荐 16GB)
- 硬盘: 至少 10GB 可用空间
- 网络: 稳定的互联网连接
watersystem/ # 项目根目录
├── 📂 backend/ # 后端Java程序
│ ├── 📂 src/ # 源代码
│ ├── 📄 pom.xml # Maven配置文件
│ └── 📄 mvnw.cmd # Maven启动脚本
├── 📂 frontend/ # 前端React程序
│ ├── 📂 src/ # 源代码
│ ├── 📄 package.json # npm配置文件
│ └── 📄 vite.config.ts # 构建配置
├── 📂 database/ # 数据库文件
│ ├── 📄 init.sql # 数据库初始化脚本
│ └── 📄 sample-data.sql # 示例数据
├── 📂 docs/ # 项目文档
├── 📄 README.md # 项目说明文档
├── 📄 start.bat # 一键启动脚本
├── 📄 init-database.bat # 数据库初始化脚本
└── 📄 cleanup.bat # 项目清理脚本
- 访问 Adoptium官网
- 选择 "Temurin 17 (LTS)" 版本
- 选择你的操作系统 (Windows/macOS/Linux)
- 下载并安装
- 验证安装：打开命令行输入
java -version
- 访问 Node.js官网
- 下载 LTS 版本 (推荐)
- 安装时选择 "Add to PATH" 选项
- 验证安装：打开命令行输入
node -v和npm -v
- 访问 MySQL官网
- 下载 MySQL Community Server 8.0
- 安装时记住设置的 root 密码 (例如:
wrl1314520) - 确保 MySQL 服务已启动
- 访问 Git官网
- 下载并安装
- 安装时选择默认选项即可
- 从项目页面下载 ZIP 文件
- 解压到你想要的目录，例如
C:\watersystem
git clone <项目地址>
cd watersystem双击运行 init-database.bat，按提示输入MySQL密码
- 打开命令行 (Windows: 按 Win+R，输入 cmd)
- 连接到 MySQL：
mysql -u root -p- 输入你设置的 MySQL 密码
- 创建数据库：
CREATE DATABASE water_resource_system CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
exit;- 导入数据：
# 进入项目目录
cd C:\watersystem
# 导入数据库结构
mysql -u root -p water_resource_system < database/init.sql
# 导入示例数据
mysql -u root -p water_resource_system < database/sample-data.sql- 打开文件：
backend/src/main/resources/application.yml - 修改数据库密码为你的 MySQL 密码：
spring:
datasource:
password: wrl1314520 # 改为你的MySQL密码双击运行 start.bat
停止系统: 直接关闭后端和前端的命令行窗口即可
- 启动后端服务：
# 进入后端目录
cd backend
# Windows 用户使用：
mvnw.cmd spring-boot:run
# Mac/Linux 用户使用：
./mvnw spring-boot:run等待看到 "水资源信息服务管理系统启动成功！" 提示
- 启动前端服务 (打开新的命令行窗口)：
# 进入前端目录
cd frontend
# 安装依赖 (首次运行需要)
npm install
# 启动前端
npm run dev- 前端界面: 打开浏览器访问 http://localhost:3000
- 后端API: http://localhost:8080/api
- API文档: http://localhost:8080/api/swagger-ui.html
- 显示系统概览信息
- 实时监测数据统计
- 快速访问各个功能模块
- 查看监测点: 列表显示所有监测点信息
- 添加监测点: 点击"新增"按钮添加新的监测点
- 编辑监测点: 点击"编辑"按钮修改监测点信息
- 删除监测点: 点击"删除"按钮移除监测点
- 查看数据: 浏览所有监测数据记录
- 数据筛选: 按时间、监测点等条件筛选数据
- 数据导出: 导出数据为 Excel 文件
- 监测点分布: 在地图上显示所有监测点位置
- 实时状态: 不同颜色表示监测点的不同状态
- 详情查看: 点击监测点查看详细信息
- 进入"监测点管理"页面
- 点击"新增监测点"按钮
- 填写监测点信息：
- 监测点编码 (唯一标识)
- 监测点名称
- 监测点类型 (水库/河流/地下水/水厂)
- 经纬度坐标
- 地址和描述
- 点击"确定"保存
- 进入"监测数据管理"页面
- 使用筛选条件查找特定数据
- 点击"查看详情"查看完整信息
- 使用"导出"功能下载数据
问题: 端口 8080 被占用 解决:
# Windows 查找占用端口的进程
netstat -ano | findstr :8080
# 结束进程 (替换 PID 为实际进程ID)
taskkill /PID <进程ID> /F问题: 无法连接到 MySQL 解决:
- 检查 MySQL 服务是否启动
- 确认用户名密码是否正确
- 检查数据库名称是否正确
问题: 导入数据时出现 "Data too long for column" 错误 解决:
- 使用
test-database.bat测试数据库连接 - 确保 MySQL 字符集设置为 utf8mb4
- 重新运行
init-database.bat初始化数据库
问题: 浏览器显示空白页面 解决:
- 检查后端服务是否正常启动
- 按 F12 打开开发者工具查看错误信息
- 确认前端服务是否正常运行
问题: 页面显示没有数据 解决:
- 确认数据库中是否有示例数据
- 重新导入 sample-data.sql 文件
- 检查后端日志是否有数据库字段映射错误
- 确认实体类字段与数据库表结构是否匹配
如果遇到其他问题：
- 查看后端控制台的错误日志
- 查看前端浏览器控制台的错误信息
- 确认所有必需软件都已正确安装
- 检查网络连接是否正常
- 易于部署: 提供详细的安装指南
- 代码规范: 遵循最佳实践和编码规范
- 文档完善: 包含完整的使用和开发文档
- 功能完整: 涵盖水资源管理的核心功能
- 前后端分离: 便于维护和扩展
- 响应式设计: 适配各种设备屏幕
- 实时数据: 支持实时数据更新
- 地图集成: 直观的地理信息展示
本项目采用 MIT 许可证，详情请查看 LICENSE 文件。
🎉 恭喜！你已经成功搭建了水资源信息服务管理系统！
如果这个指南对你有帮助，请给项目一个 ⭐ Star！