天天看點

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

源碼及論文下載下傳:http://www.byamd.xyz/tag/java/
           

摘 要

在當今網絡技術迅速發展的時代,如果能借助網絡平台的優勢,建立一個農業領域的資料交流平台,讓使用者通過平台收集和共享資料,使資料得以動态及時地展示,将可以提高農業資訊管理的工作效率。是以,開發一個農情資訊交流平台就顯得很有必要。

多業務農情資訊雲平台是一個基于文本、音頻、圖像及視訊資料的農情資訊擷取與管理平台,對農情資訊實作實時預覽、動态展示以及資料分析功能。多業務農情資訊雲平台的開發整體遵循MVC模式的思想,并使用Spring整合Hibernate架構工具來實作。資料庫采用輕量級的MySQL,前端應用有較強浏覽器相容性的BootStrap架構,調用百度地圖API定位資料源節點。本平台主要應用于多業務農情資訊管理應用領域,是以具有比較廣泛的應用前景。

本文先介紹了多業務農情資訊雲平台的研究背景意義以及開發過程中所運用的技術和開發工具,其次闡述了系統的概要設計和詳細設計過程,然後描述了多業務農情資訊雲平台實作細節和過程,通過系統界面的截圖展示了系統的運作效果,最後對論文進行總結與展望。

關鍵詞:農情資訊擷取 資訊管理平台 MVC模式 BootStrap 百度地圖

Cloud Platform for Multi-service Agricultural Information Acquisition

Lin Yingying

(College of Mathematics and Informatics, South China Agricultural University, Guangzhou 510642, China)

Abstract: In the rapidly developing information era, if the great advantage of network can be taken to create an agricultural data management platform, will benefit the Work efficiency of agricultural information management. Through the platform, data can be collected and shared, and displayed in time. Therefore, it is very necessary to create an agricultural information management platform.

Multi-service information acquisition cloud platform is an agricultural information management platform, where data types include text, audio, image and video. Through the platform, data can be real-time previewed, dynamic displayed and analyzed. Multi-service information acquisition cloud platform developed following the thinking of MVC pattern, and used the integration framework of Spring and Hibernate. Database of the platform is the lightweight database management system named MySQL. The platform applied the BootStrap framework in programming Web pages, which is compatible strongly with browsers. It also called Baidu map API to locate data source. It could be widely used in multi-service agricultural information management applications, which means it has a broad application prospect.

This paper first introduces the research background of multi-service information acquisition cloud platform and the technical tools used in the program. Secondly, it elaborates the outline design and detailed design of the platform, and then describes the details and the process of programming multi-service information acquisition cloud platform, shows the operation of the platform through the views screenshots, and finally makes the paper summary and prospects.

Key words: Agricultural Information Acquisition Information Management Platform MVC Pattern BootStrap Baidu Map

1 前言

1.1 研究背景

随着網絡通信技術的快速發展和網際網路平台建設技術的成熟,網際網路與各行各業的融合創造出了許多優秀的軟體産品,比如電子商務平台、各色各樣的APP,也逐漸成為了當下創新創業的新趨勢。從商業領域、到金融業領域,再到農業領域,網際網路為每個領域提供着便捷的服務,網際網路使傳統業務不再受限于時間空間和裝置,人們可以随時享受着資訊的交流和共享。通過各領域的資訊資料交流平台,如文章分享平台、技術分享平台、相片管理平台等各色各樣的平台,人們分享資訊,交流資料,獲益其中。

當下為全面建成小康社會,我國全面深化改革,“三農”問題一直是國家建設聚焦的重點問題。農情資訊是各級管理部門、農作物種植生産部門、經營與市場部門時刻關注的重大問題。國家對農業資訊化建設的支援和投入逐年增加,資訊化建設得到快速的發展。其中,農情資訊監測過程中産生大量資料和資訊,如何高效管理和共享這些資料是一個重要的發展問題。是以,結合網際網路優勢開發一個農情資訊共享平台将具有很好的發展前景(鄒金秋,2011;曹衛彬,2004)。

1.2 研究内容

建立一個農業領域的資料管理平台,讓使用者可以通過電子裝置便捷地添加農情資料,上傳圖檔,上傳音頻,上傳視訊等,讓農業領域的資料跨越地域邊界得以收集和共享,平台獲得上傳的大量資料後,可以對資料進行同一地點和同一時間的歸類,整理出動态的結果展示,這将友善于使用者檢視資料和對資料進行分析研究。

本文研究的多業務農情資訊雲平台,是一個基于B/S的Web平台,處理關于農業領域的多項業務,包括收集地點資料、溫度資料、相對濕度資料、光照強度資料、圖像資料、音頻資料和視訊資料,調用百度地圖的API提供地圖定位的功能,動态展示資料變化等業務,這個平台将具有很好的發展前景。

1.3 研究意義

農業資訊化的發展迅速,農情資訊的農情資訊監測過程中産生大量資料和資訊,如何高效管理和共享這些資料已經是一個迫切需要解決的問題。目前,國家級農情遙感監測每年新增資料超過5TB,這些資料包含地面調查的各種空間專題資料、屬性表格文本、照片和視訊等多媒體資料,也包括大量的遙感影像資料。資料和資訊複雜,多源、異構是其主要特征(鄒金秋,2011)。

針對農情資料的多處來源多種格式特征,多業務農情資訊雲平台對資料管理和展示技術進行研究,實作一個基于文本、音頻、圖像及視訊資料的農情資訊收集與管理平台,對農情資訊實作實時預覽、動态展示以及資料分析功能。多業務農情資訊雲平台借用了網際網路優勢,與農業領域結合起來,主要通過使用者打開浏覽器端實時性或周期性地上傳圖像和視訊資訊,通過對大量使用者資料和資料來源地的管理和分析,直覺展示資料的變化,友善相關人員進行再分析和研究,主要應用于多業務農情資訊管理應用領域,是以具有比較廣泛的應用前景。

1.4 本論文工作和章節内容

本論文的主要工作是對多業務農情資訊雲平台進行說明、闡述和示範。闡述方式采用先整體後,先從總體說明系統需求、架構設計和資料庫設計,再從局部解釋系統關鍵技術點的實作,最後是系統的界面展示。此外,本文對系統用到的技術架構和關鍵技術進行了詳細說明。

本論文的章節内容概述如下:

第一章:本文前言部分。主要介紹論文的背景和意義,概述了論文的研究内用和章節結構。

第二章:本文的系統環境和技術支援部分。主要介紹系統的開發環境和運作環境,再介紹系統使用的技術架構。

第三章:系統設計部分。從總體概述系統的功能子產品、系統架構設計和資料庫設計。

第四章:系統實作的關鍵技術部分。從局部分析系統使用到的對系統共有有關鍵性意義或較為困難的技術重點和難點。

第五章:本文的系統展示部分,全方位展示系統浏覽器端的界面與功能。

第六章:本文的總結和展望。

2 系統環境與技術支援

2.1 系統環境

多業務農情資訊雲平台的程式設計語言是JAVA 1.8.0。開發硬體環境是PC Intel Core i3-2350 2.30GHz,記憶體2.0GB,硬碟剩餘容量100GB左右;運作硬體環境是PC Intel Core i3-2350 2.30GHz,記憶體2.0GB,硬碟剩餘容量100GB左右。開發軟體環境是Windows 8,Tomcat v8.5,Chrome / IE 10,Eclipse 4.6.1;運作軟體環境是Windows 7作業系統及以上版本,JRE 1.8。

2.2 B/S架構

B/S架構也稱Browser/Server模式,和C/S(Client/Server)模式并稱為網絡程式開發體系結構的兩大主流。選擇B/S架構是因為它的以下特點:

(1)B/S結構不需要客戶安裝用戶端程式,客戶隻需要通過浏覽器端口就可以通路伺服器,是以客戶不需要對用戶端程式進行安裝、解除安裝、更新等操作,開發和維護成本低于C/S結構。

(2)B/S結構把所有的業務邏輯資料處理都放在了服務端,減少了用戶端的負載,但對伺服器端的負荷就會較重。

(3)B/S結構由于不是專人使用的系統,訪客量不固定,是以安全性能會比較低,本系統通過一些權限限制和日志管理來輔助提高網站的安全性能。

2.3 服務端技術

服務端的開發與實作遵循了MVC(Model View Controller)設計模式和三層架構模式的思想,将程式劃分了三個層次進行Java開發。架構采用了Spring架構和Hibernate架構內建進行背景開發,由Spring架構整合Hibernate架構,Spring內建并負責業務對象的生命周期管理、事務控制管理,Hibernate負責資料模型的持久化。資料庫采用MySQL資料庫。以下将分别介紹MVC模式、Spring架構、Hibernate架構和MySQL資料庫。

2.3.1 MVC模式

MVC,即由模型、視圖、控制器組成,這是一個典型的網站開發設計模式,把網站開發合理地劃分為三個部分,模型表示應用的資料模型,視圖處理展示給使用者的頁面,控制器處理頁面傳來的資料和模型之間的邏輯關系,每個部分互相獨立,任務功能不同,這種劃分對項目代碼進行了解耦合,便于開發團隊對項目代碼的管理,也友善開發人員的合作和獨立程式設計。

MVC設計模式屬于一種混合的設計模式,它是經過觀察者模式、政策模式群組合模式演變而來的(Eric Freeman,2007)。其中,多個視圖時刻觀察着同一個模型的狀态資訊,就是一種觀察者模式,控制器根據使用者資料操作不同業務邏輯改變視圖顯示,就是很好的政策模式。

2.3.2 Spring架構

Spring架構主要由七大子產品組成,如圖1所示:

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖1 Spring七大子產品

這些子產品可以單獨使用,也可以組合使用。上方子產品建立在下方的子產品基礎上,如MVC子產品建立在Spring核心子產品——Core子產品之上、Web子產品建立在Spring Context基礎之上。Spring Core子產品包含了BeanFactory類,負責管理JavaBean,實作了Spring IoC(Inversion of Control)模式,是以core子產品是整個架構的核心子產品;AOP(Aspect Oriented Programming)子產品通過事務管理将任意管理的對象事務面向切面程式設計,分離應用業務邏輯和系統服務,在系統服務的切入點通知織入業務邏輯的切面,實作切面動态代理;Spring ORM子產品為Hibernate等ORM工具架構提供了完美的整合功能(吳婉楠,2016)。

2.3.3 Hibernate架構

Hibernate是現在較為流行的資料持久層的架構,充分展現了ORM(Object Relational Mapping)設計理念,是一個優秀的ORM工具,架起了面向對象的對象和關系資料庫的關系的橋梁,開發人員隻需關注應用程式中的對象即可(Branko Milosavljevic et al.,2010)。

ORM原理如圖2所示:

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖2 ORM原理

Hibernate架構還提供了一套HQL(Hibernate Query Language)語言,相比于SQL(Structured Query Language)語言,HQL具有以下幾個特點:

(1)HQL區分大小寫。HQL是面向對象的查詢語句,即查詢的目标是Java類對象,Java類對象區分大小寫,是以HQL也區分大小寫。

(2)HQL從目标對象中查詢資訊并傳回實體對象的集合,從本質上來說,開發人員隻需要關心實體對象即可。

2.3.4 MySQL資料庫

MySQL資料庫是關系型資料庫管理系統的一種,它的特點是:運作速度快、易使用、優異的可移植性和低廉的成本等等。MySQL的存儲引擎是可以選擇的插件,針對不同類型的資料可以采用不同的存儲引擎技術(王威,2012)。MySQL屬于輕便型的開源資料庫,功能能滿足中小型網站,對開發環境和運作環境要求也不高,适合應用于網站初期開發。

2.4 前端技術

前端開發采用JavaScript和HTML5語言編寫頁面和實作頁面互動,用CSS(Cascading Style Sheets)檔案美化頁面。此外,前端技術實作還應用了BootStrap架構和JQuery架構,前後端互動應用了Ajax架構。以下将分别介紹BootStrap架構、JQuery架構和Ajax架構。

2.4.1 BootStrap架構

BootStrap是由設計師Mark Otto和Jacob Thornton共同開發的開源Web前端架構,是基于HTML、CSS、JavaScript技術提供的一套web頁面設計工具包,UI控件樣式簡潔大方,能自适應不同螢幕尺寸。鑒于自身的優勢,架構一經推出後便發展迅速。從最初由CSS 驅動的項目,到如今已成為包括靈活的響應式栅格系統、完整的基礎CSS元件和一整套基于JQuery的JavaScript插件集。

Bootstrap架構具有以下重要特性:

(1)一套完整的基礎CSS插件。

(2)豐富的預定義樣式表。

(3)一組基于JQuery的JavaScript插件集。

(4)一個非常靈活的響應式(Responsive)栅格系統,并且崇尚移動先行(Mobil First)的思想(舒後等,2016)。

2.4.2 JQuery架構

JQuery是由John Resig在2006年建立的JavaScript架構。将其命名為JQuery,意在強調其查找或“查詢”網頁元素,并通過JavaScript操作這些元素的核心用途,JQuery借鑒了HTML和CSS結構中的很多優點,采用了一緻性和對稱性的設計原則。

JQuery憑借簡潔的文法和跨平台的相容性,極大簡化了腳本開發人員周遊HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax的操作。短短幾年間,JQuery作為一個真正開源的項目,已經擁有了一個足以傲視群雄的、由頂尖JavaScript開發人員組成的核心團隊,以及一個數千萬開發人員組成的活躍社群,并被網際網路上一些最有名的站點廣泛采用。

概括起來,JQuery提供了可靠富有效率的選擇符機制,有效易用的頁面外觀、文檔内容修改方式,簡潔的事件操作,輕松的動态效果建立方式,全面的Ajax支援,簡化的JavaScript常見任務開發,使得JQuery幾乎适用于所有腳本程式設計的情形(黃競,2012)。

2.4.3 互動架構Ajax

Ajax也稱異步JavaScript和XML,與傳統模式相比,Ajax模式在性能上最大的不同就是傳輸資料方式的不同。其機制是在用戶端和伺服器之間增加一個中間層——Ajax引擎,分離使用者操作和伺服器響應,把一些伺服器擔負的工作轉交給用戶端,利用用戶端資源處理,減輕伺服器和寬帶的負擔,進而達到伺服器更快回應使用者操作的效果(施人銅,2015)。

3 系統設計

3.1 系統功能概述

多業務農情資訊雲平台是一個B/S模式的Web項目,網站角色分為管理者和普通使用者兩大類,本系統的功能分為四大功能子產品,權限管理子產品、實驗地點子產品、實驗資料子產品和資料報告子產品。

權限管理子產品限制了不同角色擁有不同的功能權限,是所有功能子產品的基礎。本系統限制了地點管理子產品為管理者特有的功能子產品,資料管理子產品和資料報告子產品為管理者和普通使用者都可以使用的功能子產品。

在地點管理子產品中,管理者可以添加新地點、搜尋地點、删除搜尋到的地點、在百度地圖上定位搜尋到的地點。每個地點資訊包括地點編号、地點所處半球、地點經緯度以及備注等。

在資料管理子產品中,使用者和管理者都可以對溫度、相對濕度、光照強度、農情圖像、農情音頻和農情視訊資料進行添加、删除和搜尋。其中,使用者隻可以删除自己添加的資料,而管理者具有删除所有資料的權限。

在資料報告子產品中,使用者和管理者可以自定義時間跨度、選擇其一地點來檢視農情報告,本系統對收集的農情資料進行了處理,這份報告包括選擇的地點定位圖、同一地點同一時間跨度的溫度變化折線圖、同一地點同一時間跨度的相對濕度變化折線圖、同一地點同一時間跨度的光照強度變化折線圖、同一地點同一時間跨度的圖像展示區、同一地點同一時間跨度的音頻展示區、同一地點同一時間跨度的視訊展示區。

系統具有以下特點:

(1)系統使用Bootstrap前端架構,相容各浏覽器視窗大小,與使用者互動友好。此外,應用了Bootstrap的檔案上傳元件,可拖拽檔案上傳,允許同時多線程上傳多個檔案。

(2)系統可動态展示文本資料變化,包括地圖定位圖、溫度變化折線圖、相對濕度變化折線圖、光照強度變化折線圖等。

(3)系統使用MySQL資料庫。

3.2 系統需求分析

系統用況圖,如圖3所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖3 系統用況圖

根據系統功能概述分析,系統整體劃分為5個主用況。其中,農情資料管理用況中包含3個子用況,分别為上傳資料、搜尋資料和删除資料子用況;地點管理用況中包含4個子用況,分别是添加地點、搜尋地點、删除地點和地圖定位子用況;農情報告管理用況中包含檢視報告用況。系統業務邏輯依照系統用況圖設計,在一些子用況下還有更小的子產品,如上傳資料子用況還劃分為上傳普通資料、上傳檔案資料等子產品。

3.3 系統架構闡述

系統架構圖,如圖4所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖4 系統架構圖

系統的架構設計遵循業界流行的三層架構,分為顯示層、業務邏輯層、接口通路層。顯示層是系統與使用者人群接觸的直接層,是一個系統的門面,這一層主要是通過UI控件指引使用者友好作業系統,實作人機友好互動,涉及的技術有Bootstrap架構、JQuery架構等。業務邏輯層是該系統的核心層,根據使用者不同輸入執行不同的業務子產品,并傳回對應的資料結果,這一層主要用JSP和Servlet實作。 第三層是接口通路層,涉及的技術有Spring架構和Hibernate架構,其中,業務接口的實作依賴于資料持久層,這一層用了Hibernate架構做資料持久化。

3.4 系統資料庫設計

多業務農情資訊雲系統的資料庫PDM(Product Data Management)圖,如圖5所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖5 資料庫PDM圖

系統使用了MySQL資料庫,根據需求在資料庫中設計了5張表,整體設計符合第三範式,user(使用者表)與log(日志表)是一對多的關系,user(使用者表)、type(資料類型表)和node(地點表)分别與valueitem(資料項表)是多對一的關系。

日志表如表1所示,主要記錄了系統使用者通路系統的一些資訊,日志編号字段由上線時間拼接使用者主鍵構成,確定表格主鍵唯一性;使用者賬号受使用者表外鍵限制;使用者登入成功時,系統目前時間即為上線時間;使用者點選“退出”安全退出後,系統目前時間即為下線時間,如果浏覽器端口因網絡不正常被關閉或非安全退出,下線時間均為空。

表1 日志表log資料字典

序号 字段 字段含義 類型 是否主鍵
1 logid 日志編号 Varchar(255)
2 userid 使用者賬号 Varchar(255)
3 logintime 上線時間 datetime
4 leavetime 下線時間 datetime

使用者user表如表2所示,主要記錄了注冊使用者的資訊,注冊使用者賬号以使用者郵箱賬号注冊,確定主鍵唯一性;表格中的使用者密碼是對使用者登入密碼加密後形成的32位MD5密文;權限字段為0表示普通使用者權限,為1表示管理者權限,若系統擴充需要也可以再設定其他權限。若實際情況需要也可以增加其它的一些字段來記錄使用者的個人真實資訊。

表2 使用者表user資料字典

序号 字段 字段含義 類型 是否主鍵
1 userid 使用者賬号 Varchar(255)
2 username 使用者名 Varchar(255)
3 userpassword 使用者密碼 Varchar(255)
4 permission 權限 int

地點node 表如表3所示,用于記錄地點的各項資訊,根據世界地點的經緯度标志法設定了如下字段,備注字段可以為空,經度值在0到180的閉區間,緯度值在0到90的閉區間。若實際情況需要也可以增加其它的一些字段來記錄地點資訊。

表3 地點表node資料字典

序号 字段 字段含義 類型 是否主鍵
1 nodeid 地點編号 Varchar(255)
2 nodename 地點名稱 Varchar(255)
3 east_west 所處東西半球 Varchar(255)
4 south_north 所處南北半球 Varchar(255)
5 longitude 經度 Double
6 latitude 緯度 Double
7 note 備注 Varchar(255)

資料類型type表如表4所示,記錄的是使用者上傳的資料的類型,根據系統功能需求分析,目前隻設定了6種資料類型,分别為溫度、相對濕度、光照強度、圖像、音頻和視訊。若系統擴充需要也可以再添加其他資料類型。

資料項valueitem表如表5所示,用于記錄使用者上傳的資料資訊,資料值字段存放文本資料的值,資料值字段存放檔案資料上傳伺服器後的相對路徑,多個檔案路徑以“;”分割;備注字段可以為空;資料項表外鍵關聯地點表的id、資料類型表的id和使用者表的使用者賬戶。

表4 資料類型表type資料字典

序号 字段 字段含義 類型 是否主鍵
1 typeid 資料類型編号 Varchar(255)
2 typename 資料類型名 Varchar(255)

表5 資料項表valueitem資料字典

序号 字段 字段含義 類型 是否主鍵
1 itemid 資料編号 int
2 value 資料值 Varchar(255)
3 recordingtime 記錄時間 datetime
4 note 備注 Varchar(255)
5 nodeid 地點編号 Varchar(255)
6 typeid 資料類型編号 Varchar(255)
7 userid 使用者賬号 Varchar(255)

4 系統實作

4.1 Spring和Hibernate整合背景開發

多業務農情資訊雲平台背景接口的開發應用了Spring和Hibernate結合的架構,Hibernate架構是一個很好的資料持久化架構,在進行項目開發前要先搭配好Spring和Hibernate的內建架構,連接配接資料庫采用連接配接池的方式。

先在web.xml檔案配置項目的Spring核心檔案路徑,加載spring的配置檔案:

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

在applicationContext.xml中配置資料庫連接配接池,設定JDBC驅動名稱、JDBC連接配接URL、資料庫使用者名和密碼、連接配接池初始值:

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

先注入datasource,再配置hibernate屬性和hibernate映射檔案,因為在實體類中采用注解方式配置資料持久層,是以hibernate映射檔案配置是要自動掃描實體對象 com.model.po的包結構中存放的實體類,關鍵代碼如下:

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-OSE01RTO-1612844963992)(E:%5C%E8%AE%BA%E6%96%87%5Cimages%5Cwps10-1612843291108.png)]

Hibernate架構的搭建有兩種方式,一種是xml配置,一種是注解配置,多業務農情雲平台采用的是注解配置的方式,程式通過注解可以自動映射到資料庫中的實體,采用注解方式的優點是較友善快捷,缺點就是複雜的注解容易寫錯。

4.2 JQuery和Ajax實作系統互動

多業務農情資訊雲平台的顯示層與業務邏輯層之間的資料互動是通過JQuery架構提供的Ajax互動實作。根據JQuery API文檔,JQuery Ajax方法的參數在版本1.5前是一個JSON格式的參數,在版本1.5後參數可以多加一個統一資源定位符,JSON參數中配置了Ajax互動所需的各種參數資訊,如url配置請求通路業務邏輯路徑,data配置要傳送到伺服器的資料,async配置是否異步處理請求,success配置請求成功後運作的函數等關鍵參數。除關鍵參數外,如果其它參數資訊沒有被配置,Ajax方法會初始化為預設值。

根據需求設計,多業務農情資訊雲平台的前後端互動資料格式約定為JSON格式,即采用鍵值對格式,是以系統開發時編寫了doAjax方法,封裝了JQuery Ajax方法,分離了浏覽器端請求資料的處理、Ajax的運作與伺服器端回複資料的展示,降低代碼耦合度,規範化程式,提高代碼可讀性。關鍵代碼如下:

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

doAjax方法約定了調用時要傳入兩個參數,一個是伺服器業務邏輯的通路路徑,一個是JSON格式的請求資料,Ajax運作成功将直接傳回調用業務邏輯子產品運作後的JSON格式的結果。調用代碼如下所示:

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-pWBfDtiq-1612844963997)(E:%5C%E8%AE%BA%E6%96%87%5Cimages%5Cwps12-1612843291108.png)]

其中,{nodeid:nodeid}為浏覽器端向伺服器端發送的請求,為一個JSON格式資料,ret為伺服器端傳回的JSON格式結果。顯示層将會在JavaScript檔案中解析JSON資料結果,并向使用者進行合理的展示。

4.3 資料管理技術

資料管理技術流程圖如圖6所示:

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖6 資料管理技術流程圖

資料管理技術流程圖闡述了資料管理子產品的操作與技術實作流程,其中退出界面是指退出目前界面,如退出文本資料管理頁面等。子產品管理的農情資料,除普通資料外還涉及到圖像、音頻、視訊格式檔案的資料,為解決不同來源不同格式的資料管理難題,資料管理子產品中設計了一些關鍵技術點,以下将對檔案上傳技術和資料分頁展示技術做詳細闡述。

4.3.1 檔案上傳

檔案上傳主要有兩種方法可實作,一種是将檔案上傳到伺服器,并把檔案的相對路徑儲存進資料庫中對應的記錄;另一種是将檔案直接以二進制形式放入資料庫中對應的記錄(曹蘇群等,2003)。由于考慮到系統收集的圖像、音頻、視訊等二進制檔案位元組長度較長,本系統的資料管理子產品業務多,而且為減輕資料庫負載和提高資料庫寫入寫出速率,本系統采用了第一種方法,第一種方法具有前面所述特點。第一種方法的不足就是造成了檔案與關系的分離,本系統通過在相應業務邏輯中編寫同步機制業務的方法,完善了第一種方法的不足,如檔案删除是分别執行删除檔案和删除關系操作。

檔案上傳技術主要采用了BootStrap檔案上傳元件和jspSmartUpload元件組合實作,其中,BootStrap檔案上傳元件用于顯示層的頁面開發,jspSmartUpload元件則應用于業務邏輯層。

BootStrap檔案上傳元件是BootStrap社群開發的一個檔案上傳元件,是在原生file控件基礎上的進階化,開源、可中文化、可拖拽上傳、可校驗檔案擴充名、允許同時多線程上傳多個檔案,而且頁面美觀大方、有漂亮的上傳進度條,這些良好的特性使BootStrap 檔案上傳元件在開發中很受歡迎。

首先引入BootStrap檔案上傳元件必要的CSS、JavaScript檔案資源,在頁面上添加檔案控件,multiple屬性設定多檔案上傳,如下所示:

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

初始化檔案上傳對應的js,其關鍵僞碼如下:

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

其中fileuploaded這個方法注冊上傳完成後的回調事件,即每個檔案上傳完成之後進入這個方法裡面處理;filebatchuploadcomplete這個方法注冊多檔案上傳完成後的回調事件,即多個檔案上傳完成之後進入這個方法裡面後期處理;

fileinput函數傳入的是一個JSON格式的資料,裡面設定了file控件初始化的各種特性參數,如果沒有設定則使用的是預設值,其中同時上傳多檔案設定為異步上傳,即同時上傳多個檔案時,前台頁面會發送多個異步請求到背景,fileinput函數會被多次執行,這樣就能多線程同時處理多個檔案上傳。

對應背景的檔案上傳開發使用了jspSmartUpload元件,jspSmartUpload上傳元件是比較常用的上傳元件,它有三個核心類,分别是File類、Request類和SmartUpload類。File類中有幾個主要方法,可以擷取上傳檔案對象、上傳檔案數目、上傳檔案位元組,比如getCount()方法就用來擷取上傳檔案的數目;Request類是針對表單對象的,在使用該類之前需把表單屬性enctype設定成“multipart/form-data”,這樣隻有通過元件提供的Request類才可以擷取表單元素,包括file以外的表單元素;SmartUpload類主要用于實作檔案的上傳下載下傳,在使用之前要先實作initialize()方法,其關鍵代碼如下:

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

多業務農情資訊雲平台中對每個上傳檔案都進行了重命名操作,防止檔案重名被覆寫和便于圖檔管理,命名規則是以檔案上傳的目前系統時間,以“年月日時分秒+3位毫秒數”的格式命名。調用SmartUpload類的saveAs函數或save函數時要捕獲異常,因為不存在檔案儲存路徑的檔案夾時會抛出找不到路徑的異常。

4.3.2 資料分頁查詢

資料的分頁查詢是一個很必要的技術,在資料庫中資料量非常大的情況下不适合将所有資料顯示在一個頁面中,這會占用程式很大的一部分資源,也給使用者帶來不便,是以,實作分頁查詢就變得非常有必要了,實作分頁查詢有兩種典型的方法,一種是通過ResultSet對象中的光标上下移動定位查詢結果來擷取資料,另一種是通過資料庫提供的分頁機制,如SQLServer中的top關鍵字和MySQL中的limit關鍵字。

多業務農情資訊雲平台系統中就采用了ResultSet對象光标定位的方法,先通過HQL語句查詢得出結果集,再通過光标定位分頁傳回分頁後的資料結果,其在資料通路接口類中的關鍵代碼如下:

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

背景實作了分頁資料通路接口後,前端用JavaScript語言結合Ajax架構擷取分頁查詢結果集并建構分頁條對象,其中擷取分頁查詢結果集通過調用分頁查詢的資料通路接口,并傳遞所要查詢的目前頁碼實作;分頁條對象即顯示在頁面中的頁碼條。程式中主要通過用a标簽遞歸調用顯示函數,然後拼接html語句構造,其關鍵代碼如下:

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

4.4 資料展示技術

系統資料報告子產品主要是實作對農情溫度、相對濕度、光照強度、圖像、音頻、視訊資料的展示,對地圖資料進行定位,其中對溫度、相對濕度和光照強度資料是以動态折線圖展示,對圖像是以圖像縮略圖展示,對音頻是以音頻清單展示,對視訊是以視訊播放區和可選視訊播放清單展示。

資料展示技術流程圖如圖7所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖7 資料展示技術流程圖

資料展示技術流程圖闡述了資料展示子產品的操作與技術實作流程,其中包括了一些關鍵技術的子流程,以下将對标記地點、折線圖繪制和音頻視訊展示設計與實作分别做詳細闡述。

4.4.1 調用百度地圖API标記地點

百度地圖API(Application Programming Interface)是百度地圖提供的一套應用程式接口,裡面包含了各種各樣建構地圖基本功能的接口,如路況查詢、路線規劃等,應用于表現層上展示地圖,是一套功能豐富、互動性強的應用接口(塗振宇等,2012)。

接口采用了JavaScript語言編寫,使用之前需要先把API引入頁面中,再進行地圖初始化操作,在頁面上建立地圖,如設定中心點坐标;設定地圖事件,如滾輪放大放小,是否可拖拽;添加地圖控件,如比例尺控件、縮略圖控件、路況控件等。

在百度地圖上标記地點技術流程圖如圖8所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖8 标記地點技術流程圖

API使用BMap作為命名空間,所有類均在該命名空間之下,比如:BMap.Map、BMap.Control、BMap.Overlay。BMap命名空間下的Point類可以建立一個坐标點,它描述了一個地理坐标點,構造函數要傳兩個參數,第一個參數是經度,正數表示東經,負數表示西經,第二個參數是緯度,正數表示北緯,負數表示南緯。

标記查詢地點前先通過Ajax擷取地點資訊,并把需要标記的地點資訊存進數組,關鍵代碼如下:

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

再周遊數組,一一把地點在地圖上顯示出來,關鍵代碼如下:

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

4.4.2 應用Highcharts繪制折線圖

Highcharts是一個用純JavaScript編寫的一個圖表庫, 能夠很簡單便捷地在Web網站或是Web應用程式添加有互動性的圖表,HighCharts界面美觀,由于使用JavaScript編寫,是以不需要像Flash和Java那樣需要插件才可以運作,而且運作速度快。HighCharts 隻要核心檔案highcharts.js,還有 a canvas emulator for IE和JQuery類庫或者MooTools類庫(謝忠等,2014)。

資料展示子產品的折線圖是Highcharts圖表庫中的一款基礎線圖,可以通過JavaScript檔案中的$.highcharts匿名函數定義Highcharts圖表的标題、X軸、Y軸、設定點選資料點執行的動作等。

繪制折線圖前要先通過Ajax擷取資料點資料,關鍵代碼如下:

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

再配置Highcharts核心函數,擷取到資料點後,可以先對資料進行封裝,友善在Highcharts核心函數中進行配置,核心函數的大體結構如下:

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

多業務農情資訊雲平台先調用了Ajax方法動态擷取資料,然後把資料結果解析并封裝成對應的資料點,把資料點傳入$.highcharts匿名函數,執行該函數完成折線圖的繪制。

通過對JSON格式的參數選項進行相應的配置,可繪制出不同要求的統計圖表來滿足不同使用者的需求。在chart部分中type設定為“bar”則圖形為柱狀統計圖, 也可設定為line、spline、scatter、splinearea、pie、area、column等圖形類型(謝忠等,2014)。

此外,在title部分中text設定的是圖表正标題;subtitle的text設定的是圖表副标題;xAxis的categories設定的是X軸的資料值,假設點為(x,y),則把所有點的x值依次組成的數組;yAxis中title裡的text設定的是Y軸的機關,plotLines設定的是線條的樣式,可調寬度顔色等;tooltip設定的是滑鼠劃過資料點的顯示資訊;legend設定的是圖例樣式表;series中data設定的是由一組一組資料組成的數組,name設定的是對應一組資料的組名,用圖例上的一個名目來表示。假設現有兩組資料,一組描述濕度、一組描述溫度,點為(x,y),則把所有濕度點的y值依次組成數組作為一組資料,記為{name:’濕度’,data:濕度值組成的數組},同理,所有溫度資料記為{name:’溫度’,data:溫度值組成的數組},此時series: [{name:’濕度’,data:濕度值組成的數組},{name:’溫度’,data:溫度值組成的數組}]。如此使用的前提是濕度資料與溫度資料可共用一個X軸,即資料點的橫坐标是對應的。

多業務農情資訊雲平台的溫度、相對濕度、光照強度資料的記錄時間并不一一對應,是以,資料展示子產品沒有把這三種資料展示在同一個圖表,而是選擇了分開展示。

4.4.3 應用HTML5标簽展示音頻視訊

在HTML5中可以通過添加HTML5新标簽控件來實作音頻和視訊的播放,audio标簽定義音頻或音頻流檔案,video标簽定義視訊或視訊流檔案。

大部分浏覽器可支援HTML5新标簽,IE浏覽器從IE9開始支援MPEG4格式的視訊檔案和MP3格式的音頻檔案,Chrome支援三種格式的視訊檔案和兩種格式的音頻檔案,MPEG4格式、Ogg格式和WebM格式的視訊檔案,Ogg Vorbis格式和MP3格式的音頻檔案。MPEG4格式檔案是有H.264視訊編碼與AAC音頻編碼的視訊檔案;Ogg格式檔案為是有Theora視訊編碼與Vorbis音頻編碼的視訊檔案;WebM格式檔案為是有VP8視訊編碼與Vorbis音頻編碼的視訊檔案(李連民等,2014;Ozer et al.,2010;J. Dale Prince ,2013)。

HTML5展示音頻視訊的核心代碼如下,其中,src屬性定義檔案路徑,controls屬性表示向使用者顯示控件,loop屬性表示是否循環播放。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

4.5 系統權限限制

多業務農情資訊雲平台系統的資料涉及使用者資訊和農情資料,資料并不對外公開,需要對使用者資訊進行加密和對每個頁面進行權限檢測,對使用者資訊加密是通過對使用者注冊時填寫的個人資訊進行MD5加密存儲實作。

權限限制技術則是通過使用者通路頁面時優先執行的一系列判斷實作的。判斷的内容有使用者性質和本子產品的權限級别。若産生不合法的結果會指引進入合法的操作,如未登入的使用者通路時頁面會跳轉登入頁面,以指引使用者先進行登入操作。多業務農情資訊雲平台在開發過程中獨立增加了一個權限檢測子產品,每個頁面進行初始化時先執行該權限檢測子產品,擷取使用者資訊進行檢測,進而禁止使用者不合法通路。

以多業務農情資訊雲平台中權限限制最高的實驗地點管理子產品為例,權限限制的技術流程圖如圖9所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖9 權限限制技術流程圖

5 系統展示

5.1 平台首頁

多業務農情資訊雲平台首頁,如圖10所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖10 系統首頁

遊客在通路本系統時,進入系統首頁,上側欄是導航欄,導航欄上有登入、注冊按鈕,左側欄是手風琴式的菜單欄,菜單欄有三個闆塊,共9個菜單标簽。中間是展示區,在沒有登入的情況下,展示區會提示遊客先登入,若遊客未登入點選菜單欄的标簽,展示區不會有功能展示。

5.2 注冊使用者

注冊使用者界面,如圖11所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖11 注冊使用者

在系統首頁,遊客點選導航欄的注冊按鈕将進入注冊頁面,有四個輸入框和一個選擇框,分别是郵箱賬号,昵稱,密碼,确認密碼和選擇新增賬號類型,這五個字段都不能為空,确認密碼要與密碼相同。不規範的輸入會在輸入框下方有錯誤資訊提醒。使用者點選注冊按鈕後,服務端如果在資料庫中比對到與使用者相同的賬号,則會提示該賬号已存在,當登入賬号不存在或賬号密碼比對不上時,頁面會有注冊出錯提醒。如果注冊成功,則會跳轉到登入頁面。

5.3 添加地點

添加地點界面,如圖12所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖12 添加地點界面

管理者完成登入後,點選左側菜單欄的實驗地點管理,展示區出現實驗地點管理頁面,非管理者的使用者登入之後點選實驗地點管理,中間展示區不會出現實驗地點管理頁面。上方是兩個功能按鈕——添加地點和搜尋地點,點選添加地點按鈕,會彈出添加地點的模态框,該模态框有五個輸入選項,分别是編号、所處半球、經度、緯度和備注。備注可以為空,其它輸入都不能為空,否則下方會有不合法輸入提醒。輸入完成後,點選添加即可完成添加地點操作。添加地點資料成功或失敗時,頁面均會有友好提示。

5.4 搜尋地點

搜尋地點界面,如圖13所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖13 搜尋地點界面

當管理者滑鼠移過實驗地點管理頁面的搜尋按鈕時會浮出搜尋框,有一個地點編号的 輸入框和一個地點詳情展示區,輸入待查詢的地點編号,點選搜尋後詳情展示區會顯示搜尋結果,不合法輸入會有錯誤提醒,輸入合法後才可以進行搜尋。

5.5 定位地點

定位地點界面,如圖14所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖14 定位地點界面

管理者點選詳情展示區的定位按鈕時,初次定位會浮出地圖頁面,并在頁面上用紅色标記表示該地點,點選紅色标記,紅色标記旁會給出提示框:結點編号、結點經緯度。

5.6 删除地點

删除地點界面,如圖15所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖15 删除地點界面

管理者點選詳情展示區的删除按鈕時,頁面會彈出确認删除模态框,點選删除即删除該地點,詳情展示區會被清空,點選取消即取消該操作。删除操作為不可恢複操作。

5.7 添加資料

添加資料分為添加文本資料和上傳檔案兩種。添加文本資料界面,如圖16所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖16 添加文本資料界面

使用者登入之後,點選左側菜單欄的實驗資料管理,選擇文本資料管理,展示區出現文本資料管理頁面。上方是兩個功能按鈕——添加文本和搜尋文本,點選添加文本按鈕,會彈出添加文本資料的模态框,該模态框有五個輸入選項,分别是資料類型、資料值、地點、記錄時間和備注。備注可以為空,其它輸入都不能為空,否則下方會有不合法輸入提醒。地點下拉框會出現目前管理者添加的所有地點,如果沒有出現想要的地點,請先進行添加地點操作。輸入完成後,點選添加即可完成添加文本操作。添加文本資料成功或失敗時,頁面均會有相應的友好提示。

上傳檔案資料界面,如圖17所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖17 上傳檔案界面

使用者登入之後,點選左側菜單欄的實驗資料管理,選擇圖像資料管理或音頻資料管理或視訊資料管理,展示區出現資料管理頁面。上方是兩個功能按鈕——添加和搜尋,點選添加按鈕,會彈出添加資料的模态框,該模态框有四個輸入選項,分别是Bootstrap的上傳檔案元件、地點、記錄時間和備注。上傳檔案可以多檔案上傳,備注可以為空,其它輸入都不能為空,否則下方會有不合法輸入提醒。地點下拉框會出現目前管理者添加的所有地點,如果沒有出現想要的地點,請先進行添加地點操作。輸入完成後,點選添加即可完成上傳操作。添加資料成功或失敗時,頁面均會有相應的友好提示。上傳檔案格式不對也會有相應提示。

5.8 搜尋資料

搜尋資料分為搜尋文本資料和搜尋檔案資料兩種。

搜尋文本資料界面,如圖18所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖18 搜尋文本資料界面

使用者登入之後,點選左側菜單欄的實驗資料管理,選擇文本資料管理,展示區出現文本資料管理頁面。資料管理頁面上方有兩個功能按鈕,分别是添加和搜尋,當使用者滑鼠移過搜尋按鈕時,頁面會浮出搜尋框,有一個輸入框和三個選擇框,分别是地點編号、起始時間、結束時間和資料類型,點選搜尋會浮出分頁的搜尋結果,這四個字段不能為空,不合法輸入會有錯誤提醒,輸入合法後才可以進行搜尋。

搜尋檔案資料界面,如圖19所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖19 搜尋檔案資料界面

使用者登入之後,點選左側菜單欄的實驗資料管理,選擇圖像資料管理或音頻資料管理或視訊資料管理,展示區出現資料管理頁面。資料管理頁面上方有兩個功能按鈕,分别是添加和搜尋,當使用者滑鼠移過搜尋按鈕時,頁面會浮出搜尋框,有一個輸入框和兩個時間選擇框,分别是地點編号、起始時間、結束時間,點選搜尋會浮出分頁的搜尋結果,這三個字段不能為空,不合法輸入會有錯誤提醒,輸入合法後才可以進行搜尋。

5.9 文本資料報告

使用者登入之後,點選左側菜單欄的資料報告管理,選擇文本資料報告,展示區出現文本資料報告界面,界面上方是報告控制欄,下方分别是實驗地點定位圖、溫度折線圖、相對濕度折線圖和光照強度折線圖,未進行操作前沒有任何資料。報告控制欄上有三個選擇框,分别是實驗的開始時間、結束時間、實驗地點,這三個選擇框不能為空,不合法輸入會有錯誤提醒,輸入合法後才可以生成報告。點選生成報告,下方的四塊展示區才有相應的資料展示。

實驗地點定位圖界面,如圖20所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖20 實驗地點定位圖界面

實驗地點定位圖是百度世界地圖,生成報告後地圖自動鎖定定位點附近,紅色标記所選擇的實驗地點具體位置,滑鼠滾輪可控地圖比例,滑鼠點選紅色标記顯示具體資訊,包括地點編号、經度、次元。

溫度分析折線圖界面,如圖21所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖21 溫度分析折線圖界面

溫度分析折線圖顯示的是一段時間溫度資料随時間增長的變化,縱坐标是溫度,機關是攝氏度、橫坐标是時間。滑鼠劃過折線會顯示折點對應的資料資訊,如“2017-02-27 12:00 17°C”。

相對濕度分析折線圖界面,如圖22所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖22 相對濕度分析折線圖界面

相對濕度分析折線圖顯示的是一段時間相對濕度資料随時間增長的變化,縱坐标是相對濕度,機關是百分比、橫坐标是時間。滑鼠劃過折線會顯示折點對應的資料資訊,如“2017-02-27 12:00 40%”。

光照強度分析折線圖,如圖23所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖23 光照強度分析折線圖界面

光照強度分析折線圖顯示的是一段時間光照強度資料随時間增長的變化,縱坐标是光照強度,機關是Lux、橫坐标是時間。滑鼠劃過折線會顯示折點對應的資料資訊,如“2017-02-27 12:00 100 Lux”。

5.10 圖像資料報告

圖像資料報告界面,如圖24所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖24 圖像資料報告界面

使用者登入之後,點選左側菜單欄的資料報告管理,選擇圖像資料報告,展示區出現圖像資料報告界面,界面上方是報告控制欄,下方是圖像展示區,未進行操作前沒有任何資料。報告控制欄上有三個選擇框,分别是實驗的開始時間、結束時間、實驗地點,這三個選擇框不能為空,不合法輸入會有錯誤提醒,輸入合法後才可以生成報告。點選生成報告,下方的圖像展示區出現分頁展示的圖像縮略圖,滑鼠移到圖像上顯示圖檔資訊,包括記錄地點、記錄時間、記錄者。滑鼠點選圖像,浏覽器将打開新标簽按圖像原圖大小顯示圖像。

5.11 音頻資料報告

音頻資料報告界面,如圖25所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖25 音頻資料報告界面

使用者登入之後,點選左側菜單欄的資料報告管理,選擇音頻資料報告,展示區出現音頻資料報告界面,界面上方是報告控制欄,下方是音頻展示區,未進行操作前沒有任何資料。報告控制欄上有三個選擇框,分别是實驗的開始時間、結束時間、實驗地點,這三個選擇框不能為空,不合法輸入會有錯誤提醒,輸入合法後才可以生成報告。點選生成報告,下方的音頻展示區分頁展示音頻資訊,包括記錄地點、記錄時間、記錄者。點選對應的音頻控件可播放音頻。

5.12 視訊資料報告

視訊資料報告界面,如圖26所示。

基于SSM和MySQL實作的多業務農情資訊雲平台1 前言2 系統環境與技術支援3 系統設計4 系統實作5 系統展示6 總結與展望

圖26 視訊資料報告

使用者登入之後,點選左側菜單欄的資料報告管理,選擇視訊資料報告,展示區出現視訊資料報告界面,界面上方是報告控制欄,下方分别是視訊播放區和視訊資訊展示區,未進行操作前沒有任何資料。報告控制欄上有三個選擇框,分别是實驗的開始時間、結束時間、實驗地點,這三個選擇框不能為空,不合法輸入會有錯誤提醒,輸入合法後才可以生成報告。點選生成報告,下方的視訊資訊展示區分頁展示搜尋到的視訊資訊,包括記錄地點、記錄時間、記錄者。單選框選中視訊,點選播放按鈕,視訊播放區展示該視訊。支援手機錄制的豎屏和橫屏鏡頭視訊,支援播放安卓系統手機和蘋果系統手機錄制的視訊。

6 總結與展望

本文的工作主要是設計和實作一個對文本、圖像、音頻及視訊資料的農情資訊收集與管理的平台,實作對農情資訊的實時預覽、動态展示以及資料分析功能。本次畢業設計工作中,首先對國内外的相關學術論文和相關網站平台技術與實作進行了一番學習和調查,再确定了系統開發目标和開發計劃,然後根據需求分析和設計了系統的架構和技術,經過程式設計,最終完成了系統的開發與實作。

本文設計的多業務農情資訊雲平台是一個B/S模式的Java Web項目,整體設計遵循了MVC模式設計思想,通過顯示層、業務邏輯層、資料接口層分離對項目進行分層開發;學習背景架構,應用了Spring內建Hibernate架構做與MySQL資料庫的持久層;學習和運用了前端BootStrap、JQuery架構等,實作頁面友好互動。多業務農情資訊雲平台主要通過使用者打開浏覽器端實時性或周期性地上傳多種類型的資料資訊,通過對大量使用者資料和資料來源地的管理和分析,直覺展示資料的變化,打造一個友善操作農情業務和管理農情資料的平台,友善相關人員進行再分析和研究。

在整個系統實作的過程中,充分運用了大學所學的專業知識和平時積累的程式設計經驗,按照軟體工程的項目管理和技術文檔規範,完成了本論文的撰寫工作。

由于知識局限和時間局促,本系統還存在着不足之處。例如,系統缺乏一個系統管理者角色,用于對管理者角色和普通使用者的管理和對資料的稽核,保證平台安全和規範;系統的業務功能還可以再豐富和擴充。總之系統的開發和維護是一個長期的過程,日後可根據實際情況需要,繼續完善系統功能,繼續學習先進的技術,提高系統健壯性。

參 考 文 獻

曹蘇群,張虹. 基于B/S結構的圖檔管理系統的實作[J]. 南通職業大學學報,2003,17(2):

​ 56-59,66.

曹衛彬,楊邦傑,裴志遠等. 我國農情資訊需求調查與分析[J]. 農業工程學報,2004,20(1):

​ 147-151.

Eric Freeman. Head First 設計模式[M]. 北京:中國電力出版社,2007:526-560.

黃競.基于JQuery架構的Web前端系統建構方法的研究與應用[D].北京:北京郵電大

​ 學,2012.

李連民,李昌清,盧敏等. HTML5視訊處理技術研究[J]. 電腦知識與技術,2014,10(29):

​ 6949-6952.

施人銅.基于jQuery的Web前端元件開發研究與應用[D].江蘇:東南大學,2015.

舒後,熊一帆,葛雪嬌. 基于Bootstrap架構的響應式網頁設計與實作[J]. 北京印刷學院

​ 學報,2016,24(2):47-52.

塗振宇,劉建君,牛宏偉等. 基于百度地圖API實作水庫地理資訊查詢[J]. 江西教育學院

​ 學報,2012,33(6):18-20.

王威.MySQL資料庫源代碼分析及存儲引擎的設計[D].南京:南京郵電大學,2012.

吳婉楠.基于SpringMVC和MyBatis架構的炒股比賽系統的設計與實作[D].江蘇:南

​ 京大學,2016.

謝忠,顔紅霞. JQuery+Highcharts實作動态統計圖[J]. 電腦程式設計技巧與維護,2014,(13):

​ 64-65,86.

鄒金秋. 農情監測資料擷取及管理技術研究[D]. 北京:中國農業科學院,2011.

Branko Milosavljevic, Danijela Tešendic. Software architecture of distributed client/server

​ library circulation system[J]. The Electronic Library, 2010, 28(2):286-299.

J. Dale Prince. HTML5: Not Just a Substitute for Flash [J]. Journal of Electronic Resources in

Medical Libraries, 2013, 10(2):108-112.

Ozer, Jan. here comes HTML5-should we care? [J]. EventDV, 2010, 23(4):48.

緻 謝

大學四年轉瞬即逝,在這四年裡,華南農業大學為我提供了優越的學習環境,我在這裡不僅學習到豐富的專業知識,更豐富了我的社會經驗,得到老師熱情的指導和幫助,結識好友同學,我要感謝母校對我的培養,讓我能在學海中暢遊。

感謝我的導師肖克輝老師和馮健昭老師,兩位老師在本次系統及論文工作中為我提供了許多建議和幫助,在這裡表示衷心地感謝。

感謝老師們在這四年裡對我亦師亦友的指引與教導,你們傳授的知識,以及你們對生活和工作的态度,都讓我獲益良多,在這裡深表感謝。

感謝我的同班同學,感謝你們四年來一直陪伴我成長,陪我探讨各種奇怪的問題,在生活與學習上給予我很多幫助,在開發和論文撰寫工作中給予我很多建議。

最後,感謝我的父母及在生活中給予我支援鼓勵的親人朋友們,你們一直是我溫暖的加油站。

謝謝你們,我遇到的所有棒棒的人,向你們學習。