企业官网建设流程全解析

1. 项目背景与意义

传统水产养殖长期依赖人工经验，水质监测滞后、投喂粗放、病害预警不及时，导致养殖风险高、资源浪费严重。随着物联网、大数据和人工智能技术的普及，水产养殖正从“靠经验”向“靠数据”转型。

基于 SpringBoot + Vue 的智能水产养殖管理系统，通过传感器实时采集水温、pH 值、溶解氧、氨氮等关键水质指标，结合远程控制设备（增氧机、投饵机、换水阀），实现养殖全流程的数字化、可视化与自动化管理。该系统能够显著降低养殖风险、节约人力成本、提升单位产量，对推动水产养殖产业升级具有重要的实践意义。

2. 系统技术栈

2.1 后端技术栈

• Spring Boot：作为后端核心框架，提供快速开发、自动配置和微服务支持。
• Spring Security + JWT：实现用户认证与接口权限控制。
• MyBatis-Plus：简化数据库操作，提供高效的分页查询和代码生成能力。
• MySQL：存储用户、设备、水质历史数据等核心业务数据。
• Redis：缓存热点数据（如实时水质指标、设备状态），降低数据库压力。
• Netty / MQTT：用于对接物联网传感器设备，实现数据实时上报与指令下发。

2.2 前端技术栈

• Vue 3：前端核心框架，采用组合式 API 提升代码复用性。
• Element Plus：提供丰富的后台管理 UI 组件，快速搭建数据看板与表单页面。
• ECharts：实现水质趋势曲线、设备运行状态等可视化图表。
• Axios：统一封装 HTTP 请求，与后端 RESTful API 交互。
• Pinia：前端状态管理，维护用户登录态与全局配置。

3. 系统核心功能模块

• 水质监测模块：实时采集并展示水温、pH、溶解氧、氨氮等指标，支持历史曲线查询与超标报警。
• 设备控制模块：远程控制增氧机、投饵机、换水阀等设备，支持定时任务与手动控制。
• 养殖档案模块：管理鱼塘信息、投放批次、饲料记录和生长情况。
• 预警中心模块：根据水质阈值规则自动触发告警，通过站内消息和短信通知养殖户。
• 数据大屏模块：面向管理者的可视化总览，展示各塘口实时状态与关键指标。

4. 核心代码实现

4.1 后端：水质数据接收接口

传感器通过 MQTT 上报数据，后端订阅消息并解析存储。以下为水质数据接收与保存的核心代码：

@RestController @RequestMapping("/api/water") public class WaterQualityController { @Autowired private WaterQualityService waterQualityService; /** 接收传感器上报的水质数据 */ @PostMapping("/report") public Result<Void> report(@RequestBody WaterQualityDTO dto) { waterQualityService.saveWaterQuality(dto); // 判断是否触发预警 waterQualityService.checkAlert(dto); return Result.success(); } /** 查询某塘口最近 24 小时水质趋势 */ @GetMapping("/trend") public Result<List<WaterQualityVO>> trend(@RequestParam Long pondId, @RequestParam String indicator) { List<WaterQualityVO> list = waterQualityService.getTrend(pondId, indicator); return Result.success(list); } }

4.2 后端：水质超标预警判断

@Service public class WaterQualityServiceImpl implements WaterQualityService { @Autowired private WaterQualityMapper waterQualityMapper; @Autowired private AlertRuleMapper alertRuleMapper; @Override public void checkAlert(WaterQualityDTO dto) { // 查询该塘口对应的预警规则 AlertRule rule = alertRuleMapper.selectByPondId(dto.getPondId()); if (rule == null) { return; } // 溶解氧低于下限，触发增氧机联动 if (dto.getDissolvedOxygen() < rule.getOxygenMin()) { sendDeviceCommand(dto.getPondId(), "aerator", "on"); saveAlert(dto.getPondId(), "溶解氧过低，已自动开启增氧机"); } // 水温超过上限，触发换水提醒 if (dto.getTemperature() > rule.getTempMax()) { saveAlert(dto.getPondId(), "水温过高，建议开启换水阀"); } } }

4.3 前端：水质实时监控页面

前端通过 Vue 3 组合式 API 封装水质数据请求，并使用 ECharts 渲染趋势图：

<template> <div class="water-panel"> <el-card v-for="item in indicators" :key="item.key"> <template #header>{{ item.label }}</template> <div class="value" :style="{ color: item.color }"> {{ current[item.key] }} {{ item.unit }} </div> <div ref="chartRefs" class="chart"></div> </el-card> </div> </template> <script setup> import { ref, onMounted, onUnmounted } from 'vue' import { getTrend } from '@/api/water' import * as echarts from 'echarts' const pondId = ref(1) const current = ref({}) const chartRefs = ref([]) const charts = [] const indicators = [ { key: 'temperature', label: '水温', unit: '℃', color: '#e6a23c' }, { key: 'ph', label: 'pH 值', unit: '', color: '#409eff' }, { key: 'oxygen', label: '溶解氧', unit: 'mg/L', color: '#67c23a' } ] async function loadTrend() { for (let i = 0; i < indicators.length; i++) { const item = indicators[i] const res = await getTrend(pondId.value, item.key) const chart = echarts.init(chartRefs.value[i]) chart.setOption({ xAxis: { type: 'category', data: res.data.map(p => p.time) }, yAxis: { type: 'value' }, series: [{ type: 'line', data: res.data.map(p => p.value), smooth: true }] }) charts.push(chart) } } onMounted(loadTrend) onUnmounted(() => charts.forEach(c => c.dispose())) </script>

4.4 前端：设备远程控制

import request from '@/utils/request' // 远程控制设备 export function controlDevice(pondId, deviceType, action) { return request({ url: '/api/device/control', method: 'post', data: { pondId, deviceType, action } }) } // 页面中调用 async function handleAerator() { const res = await controlDevice(pondId.value, 'aerator', 'on') if (res.code === 200) { ElMessage.success('增氧机已开启') } }

5. 总结

基于 SpringBoot + Vue 的智能水产养殖管理系统，通过前后端分离架构实现了水质实时监测、设备远程控制、异常预警和数据分析等核心能力。后端利用 Spring Boot 生态快速构建稳定可靠的 RESTful 服务，前端借助 Vue 3 和 ECharts 提供直观的可视化交互体验。该系统有效降低了养殖户的管理成本，提升了养殖过程的精细化水平，是物联网技术赋能传统农业的典型实践。