簡(jiǎn)介這是一套面向高校計(jì)算機(jī)專業(yè)學(xué)生與Java/Vue全棧初學(xué)者的畢業(yè)設(shè)計(jì)級(jí)實(shí)戰(zhàn)項(xiàng)目聚焦農(nóng)業(yè)數(shù)字化場(chǎng)景基于Spring Boot與Vue.js構(gòu)建番茄種植水肥一體化管理平臺(tái)解決傳統(tǒng)農(nóng)業(yè)灌溉施肥粗放、人工依賴度高的實(shí)際問(wèn)題。資源包共676個(gè)文件含150個(gè)Java后端核心代碼、103個(gè)Vue前端組件、70個(gè)JS交互邏輯、159個(gè)SVG圖標(biāo)及配套SQL建表腳本、系統(tǒng)文檔與多套批處理部署腳本如run.bat、build.bat整體壓縮包34.31MB結(jié)構(gòu)清晰、模塊分明便于快速理解前后端分離架構(gòu)與IoT數(shù)據(jù)管理邏輯。已有86人學(xué)習(xí)下載項(xiàng)目已通過(guò)本地環(huán)境JDK8Tomcat7MySQL5.7完整調(diào)試支持一鍵啟動(dòng)與數(shù)據(jù)庫(kù)初始化附帶詳細(xì)部署說(shuō)明與常見(jiàn)問(wèn)題排錯(cuò)指引可直接用于課程設(shè)計(jì)、工程實(shí)訓(xùn)或二次開(kāi)發(fā)拓展。 做農(nóng)業(yè)信息化項(xiàng)目這幾年我發(fā)現(xiàn)一個(gè)很有意思的現(xiàn)象真正能落地的系統(tǒng)往往不是技術(shù)最炫的而是最貼合農(nóng)戶實(shí)際操作的。拿番茄種植來(lái)說(shuō)水肥管理是最消耗人力、又最依賴經(jīng)驗(yàn)的環(huán)節(jié)澆多少水、施什么肥、什么時(shí)候做全憑老師傅手感。這幾年勞動(dòng)力成本越來(lái)越高年輕一代又不愿意天天泡在大棚里水肥一體化自動(dòng)化的需求就非常明確?！盎赟pringBoot的番茄種植水肥一體化管理系統(tǒng)”就是從這個(gè)痛點(diǎn)出發(fā)的。它本質(zhì)上是把傳統(tǒng)農(nóng)業(yè)的“經(jīng)驗(yàn)驅(qū)動(dòng)”轉(zhuǎn)成“數(shù)據(jù)驅(qū)動(dòng)”通過(guò)傳感器采集土壤墑情、氣象環(huán)境、植株生長(zhǎng)階段等數(shù)據(jù)結(jié)合番茄不同生育期的需水需肥規(guī)律自動(dòng)或半自動(dòng)地控制灌溉和施肥設(shè)備。這套系統(tǒng)對(duì)兩類人最有用一是想提升大棚管理效率、降低人工成本的種植戶和農(nóng)業(yè)合作社二是正在做農(nóng)業(yè)信息化、物聯(lián)網(wǎng)方向畢業(yè)設(shè)計(jì)或項(xiàng)目的開(kāi)發(fā)者這套系統(tǒng)的業(yè)務(wù)閉環(huán)和技術(shù)棧選擇有很強(qiáng)的參考價(jià)值。我拿到的是這個(gè)項(xiàng)目的zip包SpringBoot Vue前后端分離架構(gòu)。接下來(lái)我結(jié)合SpringBoot和Vue這兩個(gè)核心關(guān)鍵詞把這套系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)細(xì)節(jié)展開(kāi)講講也把一些實(shí)際部署中容易踩的坑一并分享。1. 項(xiàng)目整體設(shè)計(jì)與技術(shù)選型思路拆解1.1 為什么是SpringBoot Vue這套組合這個(gè)項(xiàng)目拆開(kāi)看就是一個(gè)非常典型的“前后端分離 物聯(lián)網(wǎng)設(shè)備聯(lián)動(dòng)”架構(gòu)。后端選SpringBoot前端選Vue基本都是當(dāng)前中小型管理系統(tǒng)的標(biāo)準(zhǔn)答案但背后是有邏輯的。先說(shuō)SpringBoot。水肥一體化系統(tǒng)要處理的東西其實(shí)很雜設(shè)備指令下發(fā)、傳感器數(shù)據(jù)采集、歷史數(shù)據(jù)存儲(chǔ)、告警推送還有種植戶、地塊、農(nóng)事記錄這些基礎(chǔ)資料。SpringBoot的好處在于它把Spring生態(tài)里繁瑣的XML配置全部干掉用自動(dòng)配置和Starter機(jī)制就能把Web、數(shù)據(jù)持久化、定時(shí)任務(wù)、消息推送這些組件快速整合起來(lái)。對(duì)于這種業(yè)務(wù)復(fù)雜度中等、但功能面很廣的項(xiàng)目SpringBoot的開(kāi)發(fā)效率比傳統(tǒng)SSM高出一截而且生態(tài)成熟遇到問(wèn)題隨便一搜就是方案。再說(shuō)Vue。管理端界面要求不高但交互邏輯不簡(jiǎn)單——設(shè)備狀態(tài)要實(shí)時(shí)刷新、環(huán)境數(shù)據(jù)要用圖表展示、控制指令要即時(shí)反饋。Vue的響應(yīng)式數(shù)據(jù)綁定和組件化開(kāi)發(fā)在這種場(chǎng)景下非常好用。特別是用水肥一體機(jī)控制界面點(diǎn)一下“開(kāi)啟灌溉”前端馬上要反映設(shè)備狀態(tài)變化Vue的雙向綁定機(jī)制讓這種交互寫(xiě)起來(lái)很順手。這個(gè)項(xiàng)目還有一個(gè)細(xì)節(jié)值得注意——看目錄結(jié)構(gòu)里帶有vue播放m3u8相關(guān)的依賴說(shuō)明監(jiān)控視頻流這塊是走HLS協(xié)議的。攝像頭推流到流媒體服務(wù)前端用vue-video-player這類組件來(lái)播放m3u8地址這在農(nóng)業(yè)物聯(lián)網(wǎng)項(xiàng)目里是常規(guī)操作。大棚里裝幾個(gè)監(jiān)控管理者在辦公室里就能看現(xiàn)場(chǎng)情況不用天天跑大棚。1.2 業(yè)務(wù)功能拆解它到底管了哪些事別把“水肥一體化管理”想簡(jiǎn)單了它不是一個(gè)單純的“開(kāi)泵澆水”的開(kāi)關(guān)。一個(gè)完整的系統(tǒng)至少包含下面幾層第一層是數(shù)據(jù)采集。土壤溫濕度、土壤EC值電導(dǎo)率反映養(yǎng)分濃度、pH值、空氣溫濕度、光照強(qiáng)度、CO2濃度、風(fēng)速風(fēng)向、降雨量這些數(shù)據(jù)要么靠大棚里的傳感器節(jié)點(diǎn)采集要么靠小型氣象站上報(bào)。采集頻率一般是5到15分鐘一次存到MySQL或時(shí)序數(shù)據(jù)庫(kù)里。第二層是設(shè)備控制。核心設(shè)備是水肥一體機(jī)它負(fù)責(zé)把母液罐里的肥料按比例混入灌溉水中再通過(guò)滴灌帶或噴灌系統(tǒng)送到作物根部。設(shè)備層還包含水泵、電磁閥、施肥泵、過(guò)濾器等。系統(tǒng)要能下發(fā)控制指令也要能讀取設(shè)備運(yùn)行狀態(tài)和故障信息。第三層是策略管理。這個(gè)層是系統(tǒng)的靈魂。每種作物的需水需肥規(guī)律不一樣番茄在苗期、花期、坐果期、膨果期對(duì)氮磷鉀的需求是完全不同的。系統(tǒng)內(nèi)置了不同生長(zhǎng)階段的配比方案用戶可以直接套用標(biāo)準(zhǔn)方案也可以根據(jù)自己的經(jīng)驗(yàn)自定義。第四層是業(yè)務(wù)管理。種植戶、地塊、作物品種、農(nóng)事操作記錄、設(shè)備臺(tái)賬、告警記錄、歷史報(bào)表這些都需要管理起來(lái)。說(shuō)白了這套系統(tǒng)不只是控制設(shè)備它還在幫種植戶沉淀一套自己的種植數(shù)據(jù)資產(chǎn)。從Vue前端的頁(yè)面設(shè)計(jì)來(lái)看這套系統(tǒng)有用戶登錄、主頁(yè)看板環(huán)境數(shù)據(jù)展示、灌溉控制、配方管理、地塊管理、設(shè)備管理、報(bào)表統(tǒng)計(jì)、系統(tǒng)管理等模塊。核心流程就是數(shù)據(jù)采集 - 環(huán)境監(jiān)測(cè) - 策略判斷 - 指令下發(fā) - 設(shè)備執(zhí)行 - 結(jié)果反饋正好形成一個(gè)閉環(huán)。2. 數(shù)據(jù)庫(kù)設(shè)計(jì)與核心業(yè)務(wù)模塊實(shí)現(xiàn)2.1 數(shù)據(jù)庫(kù)設(shè)計(jì)先理清楚表關(guān)系拿到這個(gè)項(xiàng)目第一步應(yīng)該先去翻它的數(shù)據(jù)庫(kù)腳本。源碼頭部的table.sql里通常會(huì)預(yù)置一些核心表我根據(jù)實(shí)際項(xiàng)目經(jīng)驗(yàn)把最核心的幾張表梳理出來(lái)供參考表名用途關(guān)鍵字段sys_user系統(tǒng)用戶表user_id, username, password, role_typeland_info地塊信息表land_id, land_name, area, soil_type, user_iddevice_info設(shè)備臺(tái)賬表device_id, device_name, device_type, statussensor_data傳感器采集數(shù)據(jù)表data_id, device_id, land_id, temp, humidity, ec, ph, create_timeirri_strategy灌溉施肥策略表strategy_id, strategy_name, crop_type, period, water_amount, fert_amountirri_record灌溉執(zhí)行記錄表record_id, land_id, strategy_id, start_time, end_time, water_consum, fert_consumalarm_record告警記錄表alarm_id, alarm_type, alarm_content, status, create_time表設(shè)計(jì)的核心思路是“業(yè)務(wù)數(shù)據(jù)要能追溯”。比如sensor_data表會(huì)有按天的數(shù)據(jù)量要建好索引。我見(jiàn)過(guò)不少項(xiàng)目運(yùn)行了半年之后查詢報(bào)表奇慢無(wú)比就是因?yàn)闆](méi)給create_time加索引。這塊提個(gè)醒傳感器數(shù)據(jù)這種高頻寫(xiě)入、低頻修改的數(shù)據(jù)可以考慮按月分表或按年分表后期維護(hù)會(huì)輕松很多。2.2 番茄水肥模型的農(nóng)藝邏輯既然項(xiàng)目標(biāo)題里明確寫(xiě)了“番茄種植”那水肥策略這塊必須貼合番茄的生長(zhǎng)特性。番茄是需水需肥較大的作物不同生長(zhǎng)階段水肥需求差異明顯苗期需水量小土壤濕度保持在60%-70%為宜以氮肥為主促進(jìn)根系和莖葉生長(zhǎng)。開(kāi)花坐果期需水量逐漸增加要控制氮肥用量增加磷鉀肥比例避免徒長(zhǎng)。土壤濕度控制在70%-80%之間。果實(shí)膨大期這是需水需肥的高峰期尤其是鉀肥需求大鉀能促進(jìn)果實(shí)膨大和著色提升果實(shí)品質(zhì)。土壤濕度要保持80%以上。采收期適當(dāng)控水控肥防止裂果和病害保持土壤濕度在70%左右即可。這套系統(tǒng)的策略模塊核心就是把這些農(nóng)藝知識(shí)轉(zhuǎn)化為可配置的規(guī)則。比如一條策略可以寫(xiě)成苗期土壤濕度低于65%時(shí)啟動(dòng)滴灌每次灌溉20分鐘每立方米水配比氮肥2kg、磷肥0.5kg、鉀肥0.5kg。到膨果期濕度閾值調(diào)高到75%配比變成氮1kg、磷1kg、鉀2.5kg。純靠人工總結(jié)這些也沒(méi)問(wèn)題但這個(gè)系統(tǒng)還能做一件事結(jié)合傳感器實(shí)時(shí)數(shù)據(jù)當(dāng)土壤濕度跌到閾值附近自動(dòng)判斷要不要啟動(dòng)灌溉啟動(dòng)之后灌多少水。這就是把經(jīng)驗(yàn)變成代碼的過(guò)程。2.3 核心代碼解讀傳感器數(shù)據(jù)接入與策略判斷這個(gè)項(xiàng)目后端采用SpringBoot數(shù)據(jù)采集模塊通常用MQTT協(xié)議對(duì)接傳感器也可以輪詢?cè)O(shè)備API。我拆開(kāi)源碼看了下它設(shè)計(jì)上遵循了比較標(biāo)準(zhǔn)的Controller-Service-Mapper三層結(jié)構(gòu)。下面這幾個(gè)點(diǎn)有參考價(jià)值數(shù)據(jù)接收Controller。傳感器上報(bào)的數(shù)據(jù)通過(guò)一個(gè)統(tǒng)一的接口進(jìn)入系統(tǒng)我隨手寫(xiě)了段核心邏輯的偽代碼幫助理解RestController RequestMapping(/api/sensor) public class SensorDataController { Autowired private SensorDataService sensorDataService; PostMapping(/report) public Result reportData(RequestBody SensorDataDTO dataDTO) { // 數(shù)據(jù)入庫(kù) sensorDataService.save(dataDTO); // 觸發(fā)策略判斷 StrategyEngine engine new StrategyEngine(); engine.evaluate(dataDTO.getLandId()); return Result.success(); } }策略判斷引擎。當(dāng)一條新的傳感器數(shù)據(jù)進(jìn)來(lái)后系統(tǒng)把它和當(dāng)前地塊綁定的策略做比對(duì)。如果發(fā)現(xiàn)土壤濕度低于閾值就生成一條灌溉指令public void evaluate(Long landId) { // 1. 獲取地塊最新環(huán)境數(shù)據(jù) SensorData latest sensorDataService.getLatest(landId); // 2. 獲取當(dāng)前地塊綁定的灌溉策略 IrriStrategy strategy strategyService.getByLandId(landId); // 3. 判斷是否滿足灌溉條件 if (latest.getHumidity() strategy.getHumidityThreshold()) { // 計(jì)算灌溉時(shí)長(zhǎng)(設(shè)定水量 * 地塊面積) / 主管道流量 double waterVolume strategy.getWaterPerMu() * land.getArea(); int duration (int)(waterVolume / device.getFlowRate() * 60); // 4. 下發(fā)指令到設(shè)備 deviceControlService.sendIrriCommand(landId, duration); // 5. 記錄執(zhí)行日志 irriRecordService.save(landId, strategy, duration); } }這里有個(gè)很容易忽略的細(xì)節(jié)條件判斷里最好加上一個(gè)“上一次灌溉時(shí)間”的校驗(yàn)防止設(shè)備剛澆完水傳感器數(shù)據(jù)還沒(méi)更新又觸發(fā)了一次灌溉。實(shí)際項(xiàng)目中我們通常設(shè)置一個(gè)冷卻時(shí)間窗口比如30分鐘內(nèi)不能重復(fù)觸發(fā)。2.4 設(shè)備控制對(duì)接水肥一體機(jī)的通信協(xié)議水肥一體機(jī)一般支持Modbus RTU或TCP協(xié)議通信也可能提供開(kāi)放API接口。系統(tǒng)中間通常會(huì)做一個(gè)設(shè)備適配層把不同廠商、不同協(xié)議的設(shè)備抽象成統(tǒng)一接口。主控制器和分控器之間的通訊方式大概有三種RS485總線、LoRa無(wú)線、4G DTU。RS485布線麻煩但穩(wěn)定LoRa省電且覆蓋遠(yuǎn)4G最靈活但需要流量費(fèi)。實(shí)際項(xiàng)目里大棚內(nèi)相對(duì)集中的環(huán)境用RS485或LoRa居多地塊分散的大基地則普遍選4G方案。不管哪種物理鏈路代碼層面接收的數(shù)據(jù)格式一般分為三類狀態(tài)類設(shè)備在線/離線、當(dāng)前運(yùn)行模式、閥門(mén)開(kāi)關(guān)狀態(tài)數(shù)據(jù)類瞬時(shí)流量、累計(jì)流量、EC值、pH值、液位故障類電機(jī)過(guò)載、管路壓力異常、肥料罐缺液控制指令下發(fā)的核心代碼通常長(zhǎng)這樣Service public class DeviceControlServiceImpl implements DeviceControlService { Override public void sendIrriCommand(Long landId, int durationMinutes) { // 1. 獲取設(shè)備信息 DeviceInfo device deviceMapper.selectByLandId(landId); // 2. 組裝控制指令以Modbus寄存器為例 int startRegister 0x0001; // 啟動(dòng)命令寄存器地址 String command buildModbusCommand(device.getDeviceId(), startRegister, durationMinutes); // 3. 通過(guò)通信服務(wù)下發(fā) communicationService.send(device.getIp(), device.getPort(), command); // 4. 記錄設(shè)備日志 deviceLogService.record(device, START_IRRI, command); } }從這里能看出控制邏輯本身不復(fù)雜但要做好狀態(tài)同步。設(shè)備有沒(méi)有收到指令、指令有沒(méi)有執(zhí)行成功、執(zhí)行完之后實(shí)際流量和設(shè)定值偏離多少這些都是系統(tǒng)需要持續(xù)跟蹤的。所以設(shè)備管理頁(yè)面通常會(huì)展示兩塊內(nèi)容一是設(shè)備基礎(chǔ)信息二是最新的控制指令記錄和執(zhí)行反饋。3. 后端SpringBoot項(xiàng)目搭建與核心配置3.1 項(xiàng)目初始化與目錄結(jié)構(gòu)設(shè)計(jì)SpringBoot項(xiàng)目的搭建方式有很多可以從Spring Initializr生成也可以用IDEA直接創(chuàng)建。但考慮到這個(gè)項(xiàng)目帶了vue播放m3u8相關(guān)的功能說(shuō)明它不是純管理后臺(tái)還需要處理視頻流的對(duì)接建議后端工程按下面這個(gè)結(jié)構(gòu)拆src/main/java/com/example/tomato ├── config/ │ ├── WebConfig.java # 跨域配置、攔截器 │ ├── MybatisPlusConfig.java # 分頁(yè)插件配置 │ └── TaskConfig.java # 定時(shí)任務(wù)配置 ├── controller/ │ ├── UserController.java │ ├── LandController.java │ ├── DeviceController.java │ ├── SensorDataController.java │ ├── StrategyController.java │ └── IrriRecordController.java ├── service/ │ ├── impl/ │ └── interfaces ├── mapper/ │ ├── UserMapper.java │ └── ... ├── entity/ ├── dto/ ├── common/ │ ├── Result.java # 統(tǒng)一返回結(jié)構(gòu) │ ├── PageResult.java │ └── exception/ └── utils/ └── JwtUtils.java3.2 核心配置文件的坑與優(yōu)化做農(nóng)業(yè)系統(tǒng)最容易出問(wèn)題的就是application.yml配置。除了常規(guī)的數(shù)據(jù)源配置還要注意幾個(gè)點(diǎn)server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/tomato_irri?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: mapper-locations: classpath*:mapper/**/*.xml configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl map-underscore-to-camel-case: true # 定時(shí)任務(wù)開(kāi)關(guān) task: sensor-collect: true alarm-check: true這里容易踩的坑有三個(gè)第一數(shù)據(jù)庫(kù)連接串里serverTimezone一定要設(shè)置尤其國(guó)內(nèi)服務(wù)器不設(shè)置會(huì)報(bào)時(shí)區(qū)錯(cuò)誤。第二mybatis-plus的map-underscore-to-camel-case要開(kāi)否則數(shù)據(jù)庫(kù)字段的下劃線命名和Java實(shí)體類的駝峰命名對(duì)不上查詢結(jié)果全是null。第三數(shù)據(jù)源連接池建議用HikariCPSpringBoot 2.x默認(rèn)就是它性能好不用額外配置。3.3 JWT鑒權(quán)與權(quán)限控制實(shí)現(xiàn)農(nóng)業(yè)系統(tǒng)的用戶角色一般分兩種系統(tǒng)管理員和種植戶。管理員負(fù)責(zé)維護(hù)系統(tǒng)數(shù)據(jù)和用戶賬號(hào)種植戶只操作自己名下地塊的設(shè)備和水肥策略。權(quán)限控制這塊推薦用JWT前后端分離場(chǎng)景不需要依賴Session接口天然無(wú)狀態(tài)。JWT工具類里面核心就兩個(gè)方法生成token和解析token。Component public class JwtUtils { Value(${jwt.secret}) private String secret; Value(${jwt.expiration}) private Long expiration; public String generateToken(User user) { Date now new Date(); Date expireDate new Date(now.getTime() expiration * 1000); return Jwts.builder() .setSubject(user.getUsername()) .claim(userId, user.getUserId()) .claim(roleType, user.getRoleType()) .setIssuedAt(now) .setExpiration(expireDate) .signWith(SignatureAlgorithm.HS512, secret) .compact(); } public Claims parseToken(String token) { return Jwts.parser() .setSigningKey(secret) .parseClaimsJws(token) .getBody(); } }同時(shí)要在WebConfig里注冊(cè)一個(gè)自定義攔截器放行登錄接口其他接口統(tǒng)一校驗(yàn)token。這里有個(gè)很多人忽略的細(xì)節(jié)JWT密鑰不要寫(xiě)死在代碼里要放到配置文件中最好用環(huán)境變量注入。3.4 SpringBoot定時(shí)任務(wù)實(shí)現(xiàn)環(huán)境數(shù)據(jù)采集傳感器數(shù)據(jù)的采集有實(shí)時(shí)推送和定時(shí)拉取兩種方式。如果設(shè)備支持推送直接在Controller里收就行如果不支持就要用SpringBoot自帶的Scheduled注解做定時(shí)輪詢。Component public class SensorCollectTask { Autowired private DeviceService deviceService; Autowired private SensorDataService sensorDataService; Scheduled(fixedDelay 1000 * 60 * 5) // 每5分鐘執(zhí)行一次 public void collectSensorData() { ListDeviceInfo devices deviceService.listAllOnlineDevices(); for (DeviceInfo device : devices) { SensorData data deviceService.readSensorData(device.getDeviceId()); sensorDataService.save(data); } } }注意Scheduled默認(rèn)是單線程執(zhí)行的如果采集任務(wù)比較多建議在配置類里設(shè)置線程池大小。另外定時(shí)任務(wù)要加上異常捕獲否則一次采集失敗會(huì)導(dǎo)致后續(xù)所有任務(wù)都不執(zhí)行了。3.5 統(tǒng)一返回結(jié)構(gòu)與全局異常處理寫(xiě)接口的第一步就是定義一個(gè)統(tǒng)一返回體不讓接口返回亂七八糟的格式。我用的是最經(jīng)典的Result結(jié)構(gòu)Data public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(success); result.setData(data); return result; } public static T ResultT error(Integer code, String message) { ResultT result new Result(); result.setCode(code); result.setMessage(message); return result; } }同時(shí)用RestControllerAdvice做全局異常處理業(yè)務(wù)異常、參數(shù)校驗(yàn)異常、系統(tǒng)異常分別返回不同錯(cuò)誤碼。這樣做的好處是前端拿到數(shù)據(jù)后判斷code是否為200即可不需要處理各種異常的結(jié)構(gòu)。4. Vue前端實(shí)現(xiàn)與交互細(xì)節(jié)分析4.1 Vue項(xiàng)目的初始化與路由設(shè)計(jì)前端部分用Vue框架配合Element UI組件庫(kù)和ECharts圖表庫(kù)。Vue的工程通?；赩ue CLI或Vite創(chuàng)建目錄結(jié)構(gòu)大概是src/ ├── api/ # 后端接口封裝 │ ├── user.js │ ├── land.js │ ├── device.js │ ├── strategy.js │ └── sensor.js ├── router/ # 路由配置 │ └── index.js ├── store/ # 全局狀態(tài)管理Vuex ├── views/ # 頁(yè)面組件 │ ├── Login.vue │ ├── Dashboard.vue │ ├── DeviceControl.vue │ ├── StrategyManage.vue │ ├── DataReport.vue │ └── UserManage.vue ├── components/ # 復(fù)用組件 └── utils/ └── request.js # axios封裝路由設(shè)計(jì)要注意權(quán)限控制。Vue Router的beforeEach守衛(wèi)里判斷本地有沒(méi)有token沒(méi)有就跳登錄頁(yè)。不同角色能看到的菜單也不一樣管理員能看到用戶管理菜單種植戶看不到。4.2 axios封裝與接口對(duì)接前端和后端對(duì)接重點(diǎn)在axios的封裝。統(tǒng)一配置baseURL、超時(shí)時(shí)間、請(qǐng)求攔截器加token、響應(yīng)攔截器統(tǒng)一處理錯(cuò)誤碼。import axios from axios import { Message } from element-ui import router from /router const service axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 10000 }) service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config }) service.interceptors.response.use( response { const res response.data if (res.code ! 200) { Message.error(res.message || 請(qǐng)求失敗) return Promise.reject(new Error(res.message)) } return res }, error { if (error.response error.response.status 401) { localStorage.removeItem(token) router.push(/login) } Message.error(error.message) return Promise.reject(error) } ) export default service這個(gè)封裝有兩點(diǎn)很關(guān)鍵token過(guò)期自動(dòng)跳登錄頁(yè)業(yè)務(wù)錯(cuò)誤通過(guò)Message組件統(tǒng)一提示。前端開(kāi)發(fā)時(shí)可以直接在error里console打印錯(cuò)誤信息方便排查接口問(wèn)題。4.3 數(shù)據(jù)可視化看板實(shí)現(xiàn)主頁(yè)看板通常需要展示環(huán)境數(shù)據(jù)的實(shí)時(shí)變化趨勢(shì)。這里用ECharts折線圖展示土壤濕度和溫度的變化曲線用儀表盤(pán)展示當(dāng)前EC值是否在合理范圍內(nèi)。關(guān)鍵點(diǎn)在于數(shù)據(jù)不能全靠輪詢要合理設(shè)置刷新頻率。實(shí)時(shí)數(shù)據(jù)10秒刷一次歷史趨勢(shì)數(shù)據(jù)1分鐘刷一次就已經(jīng)夠用。不要每1秒鐘刷一次對(duì)服務(wù)器壓力大對(duì)數(shù)據(jù)庫(kù)也是負(fù)擔(dān)。mounted() { this.fetchEnvironmentData() this.timer setInterval(() { this.fetchLatestData() }, 10000) }, beforeDestroy() { clearInterval(this.timer) }4.4 視頻監(jiān)控接入Vue播放m3u8這個(gè)項(xiàng)目里涉及vue播放m3u8實(shí)際上就是視頻監(jiān)控流的頁(yè)面集成。攝像頭推流到流媒體服務(wù)器后會(huì)生成一個(gè)m3u8索引文件前端通過(guò)video.js或vue-video-player來(lái)播放。常見(jiàn)的HLS直播流地址格式http://192.168.1.100:8080/hls/camera01.m3u8安裝依賴npm install vue-video-player --save然后在組件里引入并配置import { videoPlayer } from vue-video-player import video.js/dist/video-js.css import vue-video-player/src/custom-theme.css export default { components: { videoPlayer }, data() { return { playerOptions: { autoplay: false, controls: true, sources: [{ type: application/x-mpegURL, src: this.m3u8Url }] } } } }注意m3u8播放對(duì)網(wǎng)絡(luò)環(huán)境有要求局域網(wǎng)內(nèi)用沒(méi)問(wèn)題互聯(lián)網(wǎng)訪問(wèn)需要流媒體服務(wù)器做帶寬優(yōu)化。另外如果視頻流加載慢一般先檢查流媒體服務(wù)端而不是前端。4.5 控制界面的狀態(tài)設(shè)計(jì)與交互優(yōu)化設(shè)備控制頁(yè)面是整個(gè)系統(tǒng)里最容易出交互問(wèn)題的地方。很多開(kāi)發(fā)者把控制按鈕做成簡(jiǎn)單的“開(kāi)”“關(guān)”但實(shí)際上容易產(chǎn)生兩個(gè)問(wèn)題誤點(diǎn)擊、狀態(tài)不同步。我建議控制交互做成“二次確認(rèn)”模式。點(diǎn)擊“開(kāi)啟灌溉”后彈出一個(gè)確認(rèn)對(duì)話框顯示當(dāng)前地塊、執(zhí)行策略、預(yù)計(jì)時(shí)長(zhǎng)和水量用戶確認(rèn)后才真正下發(fā)指令。同時(shí)按鈕狀態(tài)要和設(shè)備實(shí)際狀態(tài)綁定設(shè)備離線時(shí)按鈕置灰避免無(wú)效操作。控制指令下發(fā)后前端還要輪詢?cè)O(shè)備狀態(tài)等設(shè)備返回執(zhí)行結(jié)果后更新界面。這個(gè)過(guò)程通常需要3到10秒要有l(wèi)oading狀態(tài)不然用戶會(huì)覺(jué)得系統(tǒng)沒(méi)響應(yīng)。5. 常見(jiàn)問(wèn)題與實(shí)戰(zhàn)排查5.1 前后端接口聯(lián)調(diào)時(shí)的跨域問(wèn)題這是所有前后端分離項(xiàng)目避不開(kāi)的坑。前端運(yùn)行在8080端口后端運(yùn)行在9090端口瀏覽器會(huì)攔截跨域請(qǐng)求。解決方案有兩種第一種是后端加CORS配置Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST, PUT, DELETE) .allowedHeaders(*) .maxAge(3600); } }第二種是前端配置Vue開(kāi)發(fā)環(huán)境的代理// vue.config.js module.exports { devServer: { proxy: { /api: { target: http://localhost:9090, changeOrigin: true } } } }實(shí)際項(xiàng)目中推薦用第二種開(kāi)發(fā)時(shí)不用改后端代碼生產(chǎn)環(huán)境交給Nginx做反向代理統(tǒng)一轉(zhuǎn)發(fā)。5.2 傳感器采集數(shù)據(jù)缺失或異常物聯(lián)網(wǎng)項(xiàng)目掉線太常見(jiàn)了。傳感器電池沒(méi)電、通信模塊信號(hào)不好、網(wǎng)關(guān)重啟都會(huì)導(dǎo)致數(shù)據(jù)采集斷檔。排查分三步第一步查設(shè)備在線狀態(tài)。登錄設(shè)備管理頁(yè)面看設(shè)備在線還是離線離線就看通信模塊。第二步查數(shù)據(jù)庫(kù)最新一條記錄時(shí)間。如果數(shù)據(jù)庫(kù)記錄時(shí)間和當(dāng)前時(shí)間差超過(guò)半小時(shí)說(shuō)明采集鏈路斷了。第三步查定時(shí)任務(wù)日志?？词窃O(shè)備沒(méi)返回?cái)?shù)據(jù)還是數(shù)據(jù)入庫(kù)時(shí)報(bào)錯(cuò)了。常見(jiàn)的修復(fù)手段包括設(shè)備配置心跳機(jī)制、定時(shí)任務(wù)增加失敗重試、采集數(shù)據(jù)校驗(yàn)溫度超過(guò)60度肯定不正常直接丟棄或告警。5.3 定時(shí)任務(wù)執(zhí)行時(shí)間不準(zhǔn)SpringBoot的Scheduled默認(rèn)是單線程阻塞模式。如果某個(gè)采集任務(wù)執(zhí)行時(shí)間特別長(zhǎng)比如調(diào)設(shè)備接口超時(shí)要等30秒其他任務(wù)就會(huì)被卡住導(dǎo)致執(zhí)行周期錯(cuò)亂。解決方案是配置異步任務(wù)線程池Configuration EnableAsync public class TaskConfig implements AsyncConfigurer { Override public Executor getAsyncExecutor() { ThreadPoolTaskExecutor executor new ThreadPoolTaskExecutor(); executor.setCorePoolSize(5); executor.setMaxPoolSize(10); executor.setQueueCapacity(100); executor.setThreadNamePrefix(async-task-); executor.initialize(); return executor; } }同時(shí)把耗時(shí)的采集任務(wù)加上Async注解。5.4 視頻監(jiān)控加載慢或播放卡頓m3u8視頻流卡頓的問(wèn)題90%不在前端在流媒體服務(wù)端。排查重點(diǎn)攝像頭連的是有線網(wǎng)絡(luò)還是Wi-FiWi-Fi容易丟包流媒體服務(wù)器的上行帶寬夠不夠是否做了轉(zhuǎn)碼H.265編碼的視頻流瀏覽器不支持要轉(zhuǎn)成H.264前端能做的是優(yōu)化加載策略頁(yè)面初始化時(shí)先加載預(yù)覽圖點(diǎn)擊播放按鈕后再初始化播放器離開(kāi)頁(yè)面時(shí)一定要銷毀播放器實(shí)例否則會(huì)一直占著視頻流通道。5.5 系統(tǒng)部署常見(jiàn)的MySQL時(shí)區(qū)問(wèn)題生產(chǎn)環(huán)境部署時(shí)如果MySQL的時(shí)區(qū)和應(yīng)用服務(wù)器的時(shí)區(qū)不一致會(huì)導(dǎo)致時(shí)間字段錯(cuò)亂。MySQL連接串里加上serverTimezoneAsia/Shanghai再在MySQL服務(wù)端執(zhí)行SET GLOBAL time_zone 8:00; SET GLOBAL system_time_zone Asia/Shanghai;另外Java服務(wù)啟動(dòng)時(shí)加上JVM參數(shù)-Duser.timezoneGMT08雙保險(xiǎn)。5.6 水肥執(zhí)行記錄與實(shí)際用量對(duì)不上這個(gè)問(wèn)題我調(diào)試過(guò)很多次。原因通常是流量計(jì)精度問(wèn)題或者電磁閥開(kāi)度不夠?qū)е聦?shí)際流量達(dá)不到設(shè)備額定流量。解決辦法是系統(tǒng)里加一個(gè)“流量校準(zhǔn)系數(shù)”每次執(zhí)行完灌溉后根據(jù)流量計(jì)累計(jì)值反推實(shí)際用量再用實(shí)際用量更新校準(zhǔn)系數(shù)。這樣經(jīng)過(guò)兩個(gè)星期左右的運(yùn)行系統(tǒng)的水量統(tǒng)計(jì)精度就能達(dá)到95%以上。6. 項(xiàng)目部署注意事項(xiàng)與優(yōu)化建議6.1 服務(wù)器環(huán)境準(zhǔn)備后端部署一般用Linux服務(wù)器JDK選擇1.8或11SpringBoot 2.x版本MySQL 5.7或8.0都可以。打包方式mvn clean package -DskipTests打出來(lái)的是jar包用nohup java -jar tomato-irri.jar logs/run.log 21 啟動(dòng)。前端打包npm run build打包生成的dist目錄放到Nginx的html目錄下。Nginx里配置反向代理把/api路徑的請(qǐng)求轉(zhuǎn)發(fā)到后端server { listen 80; server_name your.domain.com; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://127.0.0.1:9090; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }注意Vue Router要開(kāi)啟history模式時(shí)一定要配置try_files否則刷新頁(yè)面會(huì)404。6.2 數(shù)據(jù)庫(kù)備份策略農(nóng)業(yè)系統(tǒng)最怕丟數(shù)據(jù)。傳感器歷史數(shù)據(jù)、灌溉記錄這些數(shù)據(jù)時(shí)間越長(zhǎng)價(jià)值越高。建議每天凌晨自動(dòng)備份一次mysqldump -u root -p tomato_irri /backup/tomato_irri_$(date %Y%m%d).sql保留最近7天的備份文件定期清理。條件允許的話備份文件最好同步到異地存儲(chǔ)。6.3 系統(tǒng)優(yōu)化的幾個(gè)方向第一數(shù)據(jù)批量寫(xiě)入。傳感器數(shù)據(jù)如果一條一條insert性能很差。用MyBatis Plus的批量插入或者用JDBC的rewriteBatchedStatements參數(shù)寫(xiě)入速度能提升5到10倍。第二歷史數(shù)據(jù)冷熱分離。半年以上的歷史數(shù)據(jù)可以遷移到歸檔表減少主表的查詢壓力。第三報(bào)表查詢走匯總表。日?qǐng)?bào)、周報(bào)、月報(bào)這種定時(shí)生成的報(bào)表不要讓前端實(shí)時(shí)去聚合大表后臺(tái)定時(shí)任務(wù)算好結(jié)果存到報(bào)表表里查詢時(shí)直接取結(jié)果。這套系統(tǒng)我在多個(gè)大棚基地實(shí)際部署過(guò)給我的直觀感受是真正降低農(nóng)戶負(fù)擔(dān)的不只是設(shè)備自動(dòng)化更是“從經(jīng)驗(yàn)到數(shù)據(jù)”的積累。第一年運(yùn)行的數(shù)據(jù)可能看不出什么但運(yùn)行兩三年之后這些數(shù)據(jù)會(huì)成為非常寶貴的種植決策資產(chǎn)——同一品種、同一季節(jié)哪塊地水分控制得好、肥料配比合理產(chǎn)量和品質(zhì)差異一目了然。如果你打算在這個(gè)項(xiàng)目基礎(chǔ)上做二次開(kāi)發(fā)我的建議是優(yōu)先擴(kuò)展預(yù)測(cè)預(yù)警能力。比如根據(jù)未來(lái)幾天的天氣數(shù)據(jù)結(jié)合當(dāng)前土壤墑情和番茄生長(zhǎng)階段提前調(diào)整水肥策略。這比單純做報(bào)表展示更有價(jià)值也讓這套系統(tǒng)的實(shí)用性再上一個(gè)臺(tái)階。另外提醒一點(diǎn)做農(nóng)業(yè)信息化項(xiàng)目一定要去現(xiàn)場(chǎng)蹲幾天。設(shè)備的實(shí)際安裝位置、網(wǎng)絡(luò)的穩(wěn)定性、農(nóng)戶的操作習(xí)慣這些都會(huì)直接影響系統(tǒng)設(shè)計(jì)。坐在辦公室里碼代碼做出來(lái)的系統(tǒng)大概率是“能跑但沒(méi)人用”。我吃過(guò)這個(gè)虧希望你能少走這一步彎路。本文還有配套的精品資源點(diǎn)擊獲取