基于ElasticSearch的Angularjs聯想框功能實現
2017-06-20 13:42:31江婷
軟件導刊 2017年4期
摘要：基于ElasticSearch實現Angularjs聯想控件，可改善用戶使用體驗，讓用戶更快更準確地輸入內容。結合ElasticSearch達到實時快速、穩定、可靠的搜索目的。ElasticSearch支持HTTP使用JSON數據進行數據索引，使用當前主流的Angularjs框架和bootstrap實現輸入框聯想控件，可靠性高。
關鍵詞： ElasticSearch；Angularjs；聯想框；Javascript；用戶體驗
中圖分類號： TP319
文獻標識碼： A
文章編號： 16727800（2017）004017403
0引言 隨著互聯網的發展，網頁開發與設計從注重功能化發展到更關注效果尤其是用戶體驗。用戶交互式體驗，功能應該更人性化[1]。目前主流MVC Javascript框架有：Angularjs、ReactJS。AngularJS[2]彌補了HTML在構建應用方面的不足。ElasticSearch[3]是一個開源的分布式搜索引擎，具有高可靠性，支持非常多的企業級搜索用例[4]，它對外提供一系列基于java和http的API，用于索引、檢索、修改配置。 本文基于ElasticSearch提供的RESTful API，結合Angularjs框架及bootstrap實現了聯想框功能。1相關技術綜述1.1ElasticSearch ElasticSearch是一個基于Lucene構建的開源、分布式、RESTful搜索引擎，是優秀的全文檢索和分析引擎。ElasticSearch基于高性能數據存儲系統構建，集海量異構數據分析處理、元數據提取、索引數據統一構建管理、通用化檢索接口于一體，系統由分布式的全文搜索引擎和海量數據索引服務組成。針對海量異構數據進行預處理解析后形成構建索引的元數據，對元數據分析后，根據其特性形成索引映射機制，提取構建索引結構數據，并提供持久化機制。以統一的索引資源池為基礎，屏蔽異構數據的復雜性，提供統一檢索服務。數據索引系統架構如圖1所示。
ElasticSearch提供基于http的Restful風格API接口，幫助用戶實現索引構建、海量數據檢索、索引管理等功能。客戶端使用網絡請求工具，如curl、Javascript、.NET、PHP、Ruby、python的http庫等，都可以對索引系統軟件發起訪問請求，通過通信端口與檢索集群進行通信。1.2Angularjs框架 Angualarjs是Google開源的一款JavaScript MVC 。指令（directives）結構是Angularjsjs豐富HTML控件，開發者可以使用HTML來聲明動態內容，從而使得Web開發和測試工作變得更加簡潔、容易。Angularjs具有以下特點：①實現數據雙向綁定，從而大大減少js的代碼冗余，使得view和controller數據實時同步；②代碼模塊化。Angularjs對Web應用進行歸類，每個Web應用都離不開Controller、Directives、Factories、Filters、Services和Views；③提供依賴注入。每個Module都可以通過依賴注入來調整不同類別，每個類別都有自己的功能，如View實現UI，Controller實現UI背后的業務功能等，從而大大降低模塊之間的耦合度；④支持測試驅動開發。 Angularjs處理模板 [5]：帶有標記的HTML→DOM→Angularjs模板引擎。Angualarjs的出現使得網頁應用或移動應用在高效率、跨平臺和安全性等方面得到了顯著提升[6]，該框架適合單頁應用，其交互方式如圖2所示。
1.3搜索聯想框 互聯網時代用戶體驗至關重要。在搜索過程中，提供可靠有效的搜索提示對提升用戶體驗作用較大。用戶每輸入一個字或一個單詞，搜索引擎會相應智能輸出與之相關聯且權重較高的關鍵詞，省去輸入全部字詞的耗時，從而節省搜索時間，提升了用戶體驗。搜索聯想框如圖3所示。
目前各大搜索引擎網站都有相應的智能搜索聯想框，本文基于ElasticSearch、Angularjs，設計實現搜索聯想框。2設計與實現2.1后臺設計 ElasticSearch使用基于HTTP協議，以JSON為數據交互的RESTful API。前端通過端口與ElasticSearch通信，也可通過curl命令與ElaticSearch通信。 RESTful請求格式為： curl–X
2.2構建HTML布局 使用bootstrap[7]構建文本輸入框，用于用戶填寫搜索信息。該文本框下，顯示聯想結果列表，在多個列表中選取用戶需要的信息，其值即可同文本輸入框綁定。點擊“HIK一下”按鈕即觸發搜索功能。 建立一個大
區塊容器，設置兩個小
區塊容器：一塊用于用戶輸入搜索信息，另一塊用于實時顯示聯想結果，代碼如下： 2.3Watch監聽 Angularjs具有臟值檢查策略[8]，檢查輸入值是否發生變化。Angularjs持續跟蹤當前監控的值，同時遍歷$watch列表。如果從舊值更新后的值沒有發生變化，則繼續遍歷監控列表。如果值發生了變化，則啟用新值并繼續遍歷$watch列表，如圖5所示。
- {{opt.text}}
$watch方法會對angular事件的每一個$digest調用進行檢查。如果在表達式上檢測到變化，Angular會返回$digest循環。$watch函數接受兩個必要參數，分別為watchExpression、listener/callback。前者可以是一個函數或一個作用域對象屬性，后者作為回調的監聽函數，只有在watchExpression發生改變時調用。監聽函數會在初始化時調用一次，而此時newValue和oldValue的值都為undefined。 $scope.$watch（'selectedvalue'，function（newValue，oldValue）{ // newValue表示selectedvalue的新值 // oldValue表示selectedvalue的舊值 }）； 由于Angularjs具有數據雙向綁定性能，當view中數據發生變化時將反饋至scope中，scope中的模型會動態更新。scope內置$watch函數監控model變化。當數據模型某部分發生變化時，$watch函數會快速發出通知。2.4聯想結果 ElasticSearch提供REST API和簡單查詢，POST、GET請求搜索數據。無論操作是更改映射還是文檔索引，都需要使用REST API向ElasticSearch發送JSON結構數據。一旦監聽數據發生變化，便立即向ElasticSearch發出請求，以實時獲取最新的聯想結果。2.5JavaScript設計
2.5.1JavaScript函數①對文本輸入框selectedvalue進行監聽，一旦發生改變，向ElasticSearch發送JSON結構請求；②ElasticSearch返回請求結果，將其結果綁定options；③選中結果，將其與文本輸入框值selectedvalue進行綁定。
2.5.2JavaScript設計流程 聯想框流程見圖6。
2.5.3JavaScript函數設計 聯想框效果如圖7所示。
3結語 CSS與Javascript技術的出現，給網站設計與開發帶〖CM（24*4/7〗來了活力 [9]。本設計使用主流前端技術Bootstrap，
Angularjs，后端使用ElasticSearch分布式搜索引擎，極大提高了頁面的加載速度及后臺查詢索引速度。聯想搜索控件智能輸出與之相關聯且流量最大的關鍵詞，從而省去字詞輸入，大大提升了用戶體驗，具實用價值。
參考文獻：
[1]李沖，熊淑華，魏穎穎.基于CSS與JavaScript技術的Tab面板的設計與實現[J].計算機技術與發展，2011，21（3）：2830.
[2]DARWIN P B，KOZLOWSKI P.AngularJS web application development[EB/OL].https：//www.codeproject.com/articles/637430/angularjsexampleapplication.
[3][波蘭]RAFAT KUC MAREK ROGOZIN SKI.Elasticsearch[M].北京： 電子工業出版社，2015.
[4]俞詩源，程三軍.大數據工具在網絡攻擊監測中的應用[C].第30次全國計算機安全學術交流會論文集，2015.
[5]李紅.主流Javascript框架比較與分析[J].鞍山師范學院學報，2015（4）：4047.
[6]顧學海，胡牧，蔣厚明，等.基于HTML5的混合移動應用開發[J].計算機系統應用，2016，25（5）：237240.
[7]FELSENSTEIN J.Confidence limits on phylogenies：an approach using the bootstrap[J].Evolution，1985，39（4）：783791.
[8]ARI LERNER.AngularJS權威教程[M].趙望野，徐飛，何鵬飛，譯.北京：人民郵電出版社，2014.
[9]周廣田，陳愛婷.用JAVASCRIPT創建交互式Web頁面[J].信息技術，2001（2）：3536.〖ZK）〗〖BP（〗責任編輯〖HT6K〗〖JY〗（責任編輯：杜能鋼）
