基于ElasticSearch的Angularjs聯(lián)想框功能實現(xiàn)

摘要：基于ElasticSearch實現(xiàn)Angularjs聯(lián)想控件，可改善用戶使用體驗，讓用戶更快更準確地輸入內容。結合ElasticSearch達到實時快速、穩(wěn)定、可靠的搜索目的。ElasticSearch支持HTTP使用JSON數(shù)據(jù)進行數(shù)據(jù)索引，使用當前主流的Angularjs框架和bootstrap實現(xiàn)輸入框聯(lián)想控件，可靠性高。

關鍵詞： ElasticSearch；Angularjs；聯(lián)想框；Javascript；用戶體驗

中圖分類號： TP319

文獻標識碼： A

文章編號： 16727800（2017）004017403

0引言 隨著互聯(lián)網的發(fā)展，網頁開發(fā)與設計從注重功能化發(fā)展到更關注效果尤其是用戶體驗。用戶交互式體驗，功能應該更人性化[1]。目前主流MVC Javascript框架有：Angularjs、ReactJS。AngularJS[2]彌補了HTML在構建應用方面的不足。ElasticSearch[3]是一個開源的分布式搜索引擎，具有高可靠性，支持非常多的企業(yè)級搜索用例[4]，它對外提供一系列基于java和http的API，用于索引、檢索、修改配置。 本文基于ElasticSearch提供的RESTful API，結合Angularjs框架及bootstrap實現(xiàn)了聯(lián)想框功能。1相關技術綜述1.1ElasticSearch ElasticSearch是一個基于Lucene構建的開源、分布式、RESTful搜索引擎，是優(yōu)秀的全文檢索和分析引擎。ElasticSearch基于高性能數(shù)據(jù)存儲系統(tǒng)構建，集海量異構數(shù)據(jù)分析處理、元數(shù)據(jù)提取、索引數(shù)據(jù)統(tǒng)一構建管理、通用化檢索接口于一體，系統(tǒng)由分布式的全文搜索引擎和海量數(shù)據(jù)索引服務組成。針對海量異構數(shù)據(jù)進行預處理解析后形成構建索引的元數(shù)據(jù)，對元數(shù)據(jù)分析后，根據(jù)其特性形成索引映射機制，提取構建索引結構數(shù)據(jù)，并提供持久化機制。以統(tǒng)一的索引資源池為基礎，屏蔽異構數(shù)據(jù)的復雜性，提供統(tǒng)一檢索服務。數(shù)據(jù)索引系統(tǒng)架構如圖1所示。

ElasticSearch提供基于http的Restful風格API接口，幫助用戶實現(xiàn)索引構建、海量數(shù)據(jù)檢索、索引管理等功能?？蛻舳耸褂镁W絡請求工具，如curl、Javascript、.NET、PHP、Ruby、python的http庫等，都可以對索引系統(tǒng)軟件發(fā)起訪問請求，通過通信端口與檢索集群進行通信。1.2Angularjs框架 Angualarjs是Google開源的一款JavaScript MVC 。指令（directives）結構是Angularjsjs豐富HTML控件，開發(fā)者可以使用HTML來聲明動態(tài)內容，從而使得Web開發(fā)和測試工作變得更加簡潔、容易。Angularjs具有以下特點：①實現(xiàn)數(shù)據(jù)雙向綁定，從而大大減少js的代碼冗余，使得view和controller數(shù)據(jù)實時同步；②代碼模塊化。Angularjs對Web應用進行歸類，每個Web應用都離不開Controller、Directives、Factories、Filters、Services和Views；③提供依賴注入。每個Module都可以通過依賴注入來調整不同類別，每個類別都有自己的功能，如View實現(xiàn)UI，Controller實現(xiàn)UI背后的業(yè)務功能等，從而大大降低模塊之間的耦合度；④支持測試驅動開發(fā)。 Angularjs處理模板 [5]：帶有標記的HTML→DOM→Angularjs模板引擎。Angualarjs的出現(xiàn)使得網頁應用或移動應用在高效率、跨平臺和安全性等方面得到了顯著提升[6]，該框架適合單頁應用，其交互方式如圖2所示。

1.3搜索聯(lián)想框 互聯(lián)網時代用戶體驗至關重要。在搜索過程中，提供可靠有效的搜索提示對提升用戶體驗作用較大。用戶每輸入一個字或一個單詞，搜索引擎會相應智能輸出與之相關聯(lián)且權重較高的關鍵詞，省去輸入全部字詞的耗時，從而節(jié)省搜索時間，提升了用戶體驗。搜索聯(lián)想框如圖3所示。

目前各大搜索引擎網站都有相應的智能搜索聯(lián)想框，本文基于ElasticSearch、Angularjs，設計實現(xiàn)搜索聯(lián)想框。2設計與實現(xiàn)2.1后臺設計 ElasticSearch使用基于HTTP協(xié)議，以JSON為數(shù)據(jù)交互的RESTful API。前端通過端口與ElasticSearch通信，也可通過curl命令與ElaticSearch通信。 RESTful請求格式為： curl–X'：///？'–d '' VERB：HTTP方法，包括GET，POST，PUT，HEAD，DELETE PROTOCOL：http或者https協(xié)議； HOST：集群中任何一個節(jié)點的主機名，本地的節(jié)點為locolhost； QUERY_STRING：可選的查詢請求參數(shù)； BODY：一個JSON格式的請求主體。 以統(tǒng)一的索引資源池為基礎，屏蔽用戶數(shù)據(jù)的復雜性，包括文件系統(tǒng)、小對象存儲系統(tǒng)和云數(shù)據(jù)庫的存儲空間差異，時間、地理、數(shù)值、字符串、全文本等數(shù)據(jù)結構差異，向上提供統(tǒng)一的檢索服務，為字段檢索提供詞條查詢和分析查詢，根據(jù)多種查詢條件提供復合檢索功能，通過匹配算法為檢索結果計算得分和排序，輔助海量查詢結果的篩選，此外還為上層應用提供過濾器和多種查詢統(tǒng)計等服務。數(shù)據(jù)檢索服務設計開發(fā)的目的是為海量數(shù)據(jù)管理提供支撐，提高數(shù)據(jù)的可管理性和可訪問性。數(shù)據(jù)檢索服務模塊如圖4所示。

2.2構建HTML布局 使用bootstrap[7]構建文本輸入框，用于用戶填寫搜索信息。該文本框下，顯示聯(lián)想結果列表，在多個列表中選取用戶需要的信息，其值即可同文本輸入框綁定。點擊“HIK一下”按鈕即觸發(fā)搜索功能。 建立一個大

$watch方法會對angular事件的每一個$digest調用進行檢查。如果在表達式上檢測到變化，Angular會返回$digest循環(huán)。$watch函數(shù)接受兩個必要參數(shù)，分別為watchExpression、listener/callback。前者可以是一個函數(shù)或一個作用域對象屬性，后者作為回調的監(jiān)聽函數(shù)，只有在watchExpression發(fā)生改變時調用。監(jiān)聽函數(shù)會在初始化時調用一次，而此時newValue和oldValue的值都為undefined。 $scope.$watch（'selectedvalue'，function（newValue，oldValue）{ // newValue表示selectedvalue的新值 // oldValue表示selectedvalue的舊值 }）； 由于Angularjs具有數(shù)據(jù)雙向綁定性能，當view中數(shù)據(jù)發(fā)生變化時將反饋至scope中，scope中的模型會動態(tài)更新。scope內置$watch函數(shù)監(jiān)控model變化。當數(shù)據(jù)模型某部分發(fā)生變化時，$watch函數(shù)會快速發(fā)出通知。2.4聯(lián)想結果 ElasticSearch提供REST API和簡單查詢，POST、GET請求搜索數(shù)據(jù)。無論操作是更改映射還是文檔索引，都需要使用REST API向ElasticSearch發(fā)送JSON結構數(shù)據(jù)。一旦監(jiān)聽數(shù)據(jù)發(fā)生變化，便立即向ElasticSearch發(fā)出請求，以實時獲取最新的聯(lián)想結果。2.5JavaScript設計

2.5.1JavaScript函數(shù)①對文本輸入框selectedvalue進行監(jiān)聽，一旦發(fā)生改變，向ElasticSearch發(fā)送JSON結構請求；②ElasticSearch返回請求結果，將其結果綁定options；③選中結果，將其與文本輸入框值selectedvalue進行綁定。

2.5.2JavaScript設計流程 聯(lián)想框流程見圖6。

2.5.3JavaScript函數(shù)設計 聯(lián)想框效果如圖7所示。

3結語 CSS與Javascript技術的出現(xiàn)，給網站設計與開發(fā)帶〖CM（24*4/7〗來了活力 [9]。本設計使用主流前端技術Bootstrap，

Angularjs，后端使用ElasticSearch分布式搜索引擎，極大提高了頁面的加載速度及后臺查詢索引速度。聯(lián)想搜索控件智能輸出與之相關聯(lián)且流量最大的關鍵詞，從而省去字詞輸入，大大提升了用戶體驗，具實用價值。

參考文獻：

[1]李沖，熊淑華，魏穎穎.基于CSS與JavaScript技術的Tab面板的設計與實現(xiàn)[J].計算機技術與發(fā)展，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].北京： 電子工業(yè)出版社，2015.

[4]俞詩源，程三軍.大數(shù)據(jù)工具在網絡攻擊監(jiān)測中的應用[C].第30次全國計算機安全學術交流會論文集，2015.

[5]李紅.主流Javascript框架比較與分析[J].鞍山師范學院學報，2015（4）：4047.

[6]顧學海，胡牧，蔣厚明，等.基于HTML5的混合移動應用開發(fā)[J].計算機系統(tǒng)應用，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創(chuàng)建交互式Web頁面[J].信息技術，2001（2）：3536.〖ZK）〗〖BP（〗責任編輯〖HT6K〗〖JY〗（責任編輯：杜能鋼）