基于AngularJS的農(nóng)業(yè)信息搜索系統(tǒng)設計與實現(xiàn)

劉 艷

（河南師范大學 計算機與信息工程學院，河南 新鄉(xiāng) 453007）

當前，農(nóng)業(yè)信息的及時提供不僅可以加速農(nóng)產(chǎn)品的流通，也是建設現(xiàn)代農(nóng)業(yè)的基礎[1]。我國農(nóng)業(yè)相關人員獲取農(nóng)業(yè)相關信息的主要途徑為：綜合搜索引擎約占53%；其次是農(nóng)業(yè)全文搜索引擎；最后是農(nóng)業(yè)分類搜索引擎[2]。但從具體占比數(shù)據(jù)來看，農(nóng)業(yè)分類搜索等專業(yè)門戶網(wǎng)站的比重還較低，說明利用專業(yè)途經(jīng)獲取農(nóng)業(yè)信息的存在諸多困難[3]。

當“互聯(lián)網(wǎng)+”和農(nóng)業(yè)之間深度融合以后，互聯(lián)網(wǎng)技術帶來了及時的數(shù)據(jù)、信息和嶄新的技術手段，從而使得農(nóng)業(yè)產(chǎn)業(yè)中的各個環(huán)節(jié)、涉及農(nóng)業(yè)領域的眾多細分市場，都有了更多的條件、技術和可能來進行創(chuàng)新。農(nóng)業(yè)信息研究可以通過IT技術，突破時間空間限制，實現(xiàn)及時有效地互聯(lián)互通，進而將大大促進農(nóng)業(yè)知識、農(nóng)業(yè)資源、農(nóng)業(yè)科技、農(nóng)業(yè)生產(chǎn)、農(nóng)產(chǎn)品市場等各方面信息的快速及時傳遞，解決信息的不對稱問題。在優(yōu)化農(nóng)業(yè)生產(chǎn)的同時，也能對接農(nóng)副產(chǎn)品供需市場，解決傳統(tǒng)時期農(nóng)業(yè)信息不暢而滯銷等問題。農(nóng)業(yè)信息化對農(nóng)業(yè)生產(chǎn)過程中所需各類資源，都有相當高程度的重新配置作用，這將大大提高土地、勞動力、資金等各項生產(chǎn)資源的配置利用效率。“互聯(lián)網(wǎng)+”結(jié)合大數(shù)據(jù)、物聯(lián)網(wǎng)等近年來興起的信息技術，可以不斷提升農(nóng)業(yè)各個生產(chǎn)環(huán)節(jié)智能化程度，提高生產(chǎn)效率，進而實現(xiàn)“生產(chǎn)環(huán)境可測、生產(chǎn)過程可控、產(chǎn)品質(zhì)量可溯”，也能部分解決食品安全等問題。信息化農(nóng)業(yè)的推廣，在節(jié)約人力成本的同時，同時也大大提高了農(nóng)產(chǎn)品的質(zhì)量和產(chǎn)量，進而也增強了農(nóng)業(yè)的抗風險能力。

1 相關技術

AngularJS[4]是一個功能強大的基于JavaScript，用來構(gòu)建大型應用，高性能的Web應用程序的框架，是開源的，完全免費的，并且由數(shù)千名世界各地的開發(fā)者開發(fā)維護，為開發(fā)者提供了一個在干凈的模型—視圖—控制器（Model View Controller，MVC）方式，編寫的應用都是跨瀏覽器兼容的，易于維護的動態(tài)網(wǎng)絡應用框架。

1.1 AngularJS MVC架構(gòu)

模型視圖控制器是一種Web應用程序開發(fā)設計模式[5]。傳統(tǒng)的MVC主要由模型、視圖、控制器幾個成分組成。MVC是當前應用比較廣泛的模式構(gòu)建，因為它從用戶界面層和支持分離關注隔離了應用邏輯。

1.2 AngularJS模塊

在開發(fā)程序的過程中，AngularJS允許并且優(yōu)先鼓勵開發(fā)者使用模塊化的思想來開發(fā)應用。為了使開發(fā)者書寫的代碼更加簡潔明快，AngularJS允許在單個的js文件中完成模塊的命名，并可以將其稱為module.js文件。每個程序中允許有多個模塊，每個模塊應該含有定義功能的部分。模塊方法有眾多優(yōu)點。AngularJS也允許開發(fā)者利用angular.modle()來定義模塊，這種方法要求有兩個參數(shù)，第一個參數(shù)是要定義的模塊名，第二是依賴表，也就是要求被射入到模塊當中的依賴列表[6]。

1.3 AngularJS數(shù)據(jù)綁定

AngularJS系統(tǒng)利用不同的手段來組合來自模型的數(shù)據(jù)并傳遞給視圖。每視圖的組成部分是動態(tài)插值的。AngularJS的完成模式允許把程序中的模型當作為唯一數(shù)據(jù)源。視圖自始至終僅僅是數(shù)據(jù)的呈現(xiàn)模式。雙向數(shù)據(jù)綁定功能是AngularJS中眾多功能之一，也是AngularJS的重要特性。

1.4 AngularJS服務

服務是JavaScript函數(shù)或?qū)ο螅试SAngularJS程序中應用。控制器、過濾器等都可以通過指令調(diào)用服務。服務的輸入依靠AngularJS的依賴注入模式。AngularJS提供了如$http和$route等眾多常見的內(nèi)置服務，每種服務都有一種特殊的功能。開發(fā)者可以利用$route來定義路由消息等。

1.5 AngularJS依賴注入

依賴注入式AngularJS的重要特性之一[7]。在AngularJS的系統(tǒng)中，依賴注入可以說到處存在。經(jīng)常在下面場景（函數(shù)）中會應用依賴注入：使用工廠方法來完成定義組件（components）時：如directive，factory，filter，provider，controller等。這些工廠函數(shù)需要注冊到某個模塊上。

1.6 如何獲取微信用戶信息

利用微信關注用戶的基本信息，主要包括用戶微信名（或者昵稱）、用戶微信頭像、用戶注冊性別、用戶所在地域、用戶使用語言等方面。該技術將適用于訂閱號、服務號以及微信用戶自定義菜單中的所有場景[8]。

2 基于AngularJS的農(nóng)業(yè)信息搜索系統(tǒng)的設計與實現(xiàn)

2.1 系統(tǒng)設計

本系統(tǒng)的服務對象主要是一般農(nóng)民、農(nóng)業(yè)院校的師生、農(nóng)業(yè)技術人員、涉農(nóng)企業(yè)負責人等人士。可提供商家企業(yè)信息、涉農(nóng)科技、展覽展示、農(nóng)資信息、花卉信息、涉農(nóng)養(yǎng)生等方面的信息服務。系統(tǒng)總體分為展示前臺和后臺。前臺展示又分為推薦、搜索、導航、詳情、微信交互等。后臺管理包括登錄、列表、篩選、編輯、設置等。

2.2 系統(tǒng)前臺實現(xiàn)

在首頁顯示的熱詞排行下面，從左至右依次可以點擊顯示今日、本周、本月3個時間段內(nèi)通過該網(wǎng)絡搜索頻次最高的一些詞匯。在首頁面的搜索框中輸入關心的詞匯后，如果有滿足條件的詞條出現(xiàn)，搜索結(jié)果會及時顯現(xiàn)。搜索結(jié)果實時顯現(xiàn)是本系統(tǒng)的一個亮點。為了更好地交流信息，留言評價。利用全局Access Token技術，系統(tǒng)開發(fā)了與微信進行交互的功能。使微信用戶關注即可進入網(wǎng)站系統(tǒng)，同時采用HTML5技術研發(fā)，打開速度較傳統(tǒng)頁面提升較大，訪問更快速方便。用戶掃描網(wǎng)頁上的二維碼后，用戶手機系統(tǒng)將出現(xiàn)取得用戶信息許可的通知界面，獲取用戶微信登錄信息的前端邏輯。

2.3 系統(tǒng)后臺實現(xiàn)

本系統(tǒng)根據(jù)動態(tài)網(wǎng)站系統(tǒng)的需要，該系統(tǒng)采用ThinkPHP+MySQL的數(shù)據(jù)庫管理模式[9]。管理員成功登錄后臺后，系統(tǒng)將自動呈現(xiàn)百科條目列表。列表包含條目ID、標題、縮略圖、摘要、分類、添加時間、點擊統(tǒng)計、編輯操作等。在列表頁面下，每條條目右側(cè)有對應的編輯、刪除按鈕，點擊后管理員可以根據(jù)提示進行相應的操作。在列表頁面下，設計了分類篩選功能，也就是管理者可以先根據(jù)類別查詢條目。在列表頁面的右上角，點擊分類按鈕，就可以顯示各種分類，點擊該類別，就可以方便地查詢該類別下的所有條目。管理員成功登錄后，在列表頁面，點擊頁面左上角的添加條目按鈕，系統(tǒng)將跳轉(zhuǎn)到添加新一條條目的頁面。管理員添加條目時，需要添加該條目的標題、分類、正文等。在正文部分，系統(tǒng)提供了常用的編輯功能，同時也可以插入編輯圖片。完成條目的內(nèi)容編輯后，點擊提交即可。當然，系統(tǒng)也提供了取消添加、刪除臨時添加條目的內(nèi)容。

3 結(jié)語

本文在廣泛調(diào)研的基礎上，確定了系統(tǒng)的總體設計。根據(jù)各部分的功能，利用HTML5，CSS3和AngularJS等當前最先進的前端開發(fā)技術，MySQL，ThinkPHP等后端數(shù)據(jù)技術，以及微信交互、模塊消息等方式對農(nóng)業(yè)信息搜索系統(tǒng)進行了開發(fā)。