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

1、基于ElasticSearch的Angularjs聯(lián)想框功能實現(xiàn)摘要：基于ElasticSearch實現(xiàn)Angularjs聯(lián)想控件，可改善用戶使用體驗，讓用戶更快更準(zhǔn)確地輸入內(nèi)容。結(jié)合ElasticSearch到達(dá)實時快速、穩(wěn)定、可靠的搜索目的。ElasticSearch支持 使用JSON數(shù)據(jù)進(jìn)展數(shù)據(jù)索引，使用當(dāng)前主流的Angularjs框架和bootstrap實現(xiàn)輸入框聯(lián)想控件，可靠性高。關(guān)鍵詞： ElasticSearch；Angularjs；聯(lián)想框；Javascript；用戶體驗中圖分類號： TP319文獻(xiàn)標(biāo)識碼： A文章編號： 1672780020210040174030引言 隨著互聯(lián)

2、網(wǎng)的開展，網(wǎng)頁開發(fā)與設(shè)計從注重功能化開展到更關(guān)注效果尤其是用戶體驗。用戶交互式體驗，功能應(yīng)該更人性化1。目前主流MVC Javascript框架有：Angularjs、ReactJS。AngularJS2彌補(bǔ)了HTML在構(gòu)建應(yīng)用方面的缺乏。ElasticSearch3是一個開源的分布式搜索引擎，具有高可靠性，支持非常多的企業(yè)級搜索用例4，它對外提供一系列基于java和 的API，用于索引、檢索、修改配置。 本文基于ElasticSearch提供的RESTful API，結(jié)合Angularjs框架及bootstrap實現(xiàn)了聯(lián)想框功能。1相關(guān)技術(shù)綜述1.1ElasticSearch Elastic

3、Search是一個基于Lucene構(gòu)建的開源、分布式、RESTful搜索引擎，是優(yōu)秀的全文檢索和分析引擎。ElasticSearch基于高性能數(shù)據(jù)存儲系統(tǒng)構(gòu)建，集海量異構(gòu)數(shù)據(jù)分析處理、元數(shù)據(jù)提取、索引數(shù)據(jù)統(tǒng)一構(gòu)建管理、通用化檢索接口于一體，系統(tǒng)由分布式的全文搜索引擎和海量數(shù)據(jù)索引效勞組成。針對海量異構(gòu)數(shù)據(jù)進(jìn)展預(yù)處理解析后形成構(gòu)建索引的元數(shù)據(jù)，對元數(shù)據(jù)分析后，根據(jù)其特性形成索引映射機(jī)制，提取構(gòu)建索引構(gòu)造數(shù)據(jù)，并提供持久化機(jī)制。以統(tǒng)一的索引資源池為根底，屏蔽異構(gòu)數(shù)據(jù)的復(fù)雜性，提供統(tǒng)一檢索效勞。數(shù)據(jù)索引系統(tǒng)架構(gòu)如圖1所示。ElasticSearch提供基于 的Restful風(fēng)格API接口，幫助用戶實

4、現(xiàn)索引構(gòu)建、海量數(shù)據(jù)檢索、索引管理等功能。客戶端使用網(wǎng)絡(luò)懇求工具，如curl、Javascript、.NET、PHP、Ruby、python的 庫等，都可以對索引系統(tǒng)軟件發(fā)起訪問懇求，通過通信端口與檢索集群進(jìn)展通信。1.2Angularjs框架 Angualarjs是Google開源的一款JavaScript MVC 。指令directives構(gòu)造是Angularjsjs豐富HTML控件，開發(fā)者可以使用HTML來聲明動態(tài)內(nèi)容，從而使得Web開發(fā)和測試工作變得更加簡潔、容易。Angularjs具有以下特點：實現(xiàn)數(shù)據(jù)雙向綁定，從而大大減少js的代碼冗余，使得view和controller數(shù)據(jù)實時同

5、步；代碼模塊化。Angularjs對Web應(yīng)用進(jìn)展歸類，每個Web應(yīng)用都離不開Controller、Directives、Factories、Filters、Services和Views；提供依賴注入。每個Module都可以通過依賴注入來調(diào)整不同類別，每個類別都有自己的功能，如View實現(xiàn)UI，Controller實現(xiàn)UI背后的業(yè)務(wù)功能等，從而大大降低模塊之間的耦合度；支持測試驅(qū)動開發(fā)。 Angularjs處理模板 5：帶有標(biāo)記的HTMLDOMAngularjs模板引擎。Angualarjs的出現(xiàn)使得網(wǎng)頁應(yīng)用或挪動應(yīng)用在高效率、跨平臺和平安性等方面得到了顯著提升6，該框架適宜單頁應(yīng)用，其交互方

6、式如圖2所示。1.3搜索聯(lián)想框 互聯(lián)網(wǎng)時代用戶體驗至關(guān)重要。在搜索過程中，提供可靠有效的搜索提示對提升用戶體驗作用較大。用戶每輸入一個字或一個單詞，搜索引擎會相應(yīng)智能輸出與之相關(guān)聯(lián)且權(quán)重較高的關(guān)鍵詞，省去輸入全部字詞的耗時，從而節(jié)省搜索時間，提升了用戶體驗。搜索聯(lián)想框如圖3所示。目前各大搜索引擎網(wǎng)站都有相應(yīng)的智能搜索聯(lián)想框，本文基于ElasticSearch、Angularjs，設(shè)計實現(xiàn)搜索聯(lián)想框。2設(shè)計與實現(xiàn)2.1后臺設(shè)計 ElasticSearch使用基于 協(xié)議，以JSON為數(shù)據(jù)交互的RESTful API。前端通過端口與ElasticSearch通信，也可通過curl命令與ElaticS

7、earch通信。 RESTful懇求格式為： curlCX'：/？'Cd '' VERB： 方法，包括GET，POST，PUT，HEAD，DELETE PROTOCOL： 或者 s協(xié)議； HOST：集群中任何一個節(jié)點的主機(jī)名，本地的節(jié)點為locolhost； QUERY_STRING：可選的查詢懇求參數(shù)； BODY：一個JSON格式的懇求主體。 以統(tǒng)一的索引資源池為根底，屏蔽用戶數(shù)據(jù)的復(fù)雜性，包括文件系統(tǒng)、小對象存儲系統(tǒng)和云數(shù)據(jù)庫的存儲空間差異，時間、地理、數(shù)值、字符串、全文本等數(shù)據(jù)構(gòu)造差異，向上提供統(tǒng)一的檢索效勞，為字段檢索提供詞條查詢和分析查詢，根據(jù)多種查詢

8、條件提供復(fù)合檢索功能，通過匹配算法為檢索結(jié)果計算得分和排序，輔助海量查詢結(jié)果的挑選，此外還為上層應(yīng)用提供過濾器和多種查詢統(tǒng)計等效勞。數(shù)據(jù)檢索效勞設(shè)計開發(fā)的目的是為海量數(shù)據(jù)管理提供支撐，進(jìn)步數(shù)據(jù)的可管理性和可訪問性。數(shù)據(jù)檢索效勞模塊如圖4所示。2.2構(gòu)建HTML布局 使用bootstrap7構(gòu)建文本輸入框，用于用戶填寫搜索信息。該文本框下，顯示聯(lián)想結(jié)果列表，在多個列表中選取用戶需要的信息，其值即可同文本輸入框綁定。點擊“HIK一下按鈕即觸發(fā)搜索功能。 建立一個大區(qū)塊容器，設(shè)置兩個小區(qū)塊容器：一塊用于用戶輸入搜索信息，另一塊用于實時顯示聯(lián)想結(jié)果，代碼如下：HIK一下$watch方法會對angula

9、r事件的每一個$digest調(diào)用進(jìn)展檢查。假設(shè)在表達(dá)式上檢測到變化，Angular會返回$digest循環(huán)。$watch函數(shù)承受兩個必要參數(shù)，分別為watchExpression、listener/callback。前者可以是一個函數(shù)或一個作用域?qū)ο髮傩?，后者作為回調(diào)的監(jiān)聽函數(shù)，只有在watchExpression發(fā)生改變時調(diào)用。監(jiān)聽函數(shù)會在初始化時調(diào)用一次，而此時newValue和oldValue的值都為undefined。 $scope.$watch'selectedvalue'，functionnewValue，oldValue / newValue表示selectedv

10、alue的新值 / oldValue表示selectedvalue的舊值 ； 由于Angularjs具有數(shù)據(jù)雙向綁定性能，當(dāng)view中數(shù)據(jù)發(fā)生變化時將反響至scope中，scope中的模型會動態(tài)更新。scope內(nèi)置$watch函數(shù)監(jiān)控model變化。當(dāng)數(shù)據(jù)模型某部分發(fā)生變化時，$watch函數(shù)會快速發(fā)出通知。2.4聯(lián)想結(jié)果 ElasticSearch提供REST API和簡單查詢，POST、GET懇求搜索數(shù)據(jù)。無論操作是更改映射還是文檔索引，都需要使用REST API向ElasticSearch發(fā)送JSON構(gòu)造數(shù)據(jù)。一旦監(jiān)聽數(shù)據(jù)發(fā)生變化，便立即向ElasticSearch發(fā)出懇求，以實時獲取最

11、新的聯(lián)想結(jié)果。2.5JavaScript設(shè)計 2.5.1JavaScript函數(shù)對文本輸入框selectedvalue進(jìn)展監(jiān)聽，一旦發(fā)生改變，向ElasticSearch發(fā)送JSON構(gòu)造懇求；ElasticSearch返回懇求結(jié)果，將其結(jié)果綁定options；選中結(jié)果，將其與文本輸入框值selectedvalue進(jìn)展綁定。2.5.2JavaScript設(shè)計流程 聯(lián)想框流程見圖6。2.5.3JavaScript函數(shù)設(shè)計 聯(lián)想框效果如圖7所示。3結(jié)語 CSS與Javascript技術(shù)的出現(xiàn)，給網(wǎng)站設(shè)計與開發(fā)帶CM24*4/7來了活力 9。本設(shè)計使用主流前端技術(shù)Bootstrap，Angularjs

12、，后端使用ElasticSearch分布式搜索引擎，極大進(jìn)步了頁面的加載速度及后臺查詢索引速度。聯(lián)想搜索控件智能輸出與之相關(guān)聯(lián)且流量最大的關(guān)鍵詞，從而省去字詞輸入，大大提升了用戶體驗，具實用價值。參考文獻(xiàn)：1李沖，熊淑華，魏穎穎.基于CSS與JavaScript技術(shù)的Tab面板的設(shè)計與實現(xiàn)J.計算機(jī)技術(shù)與開展，2021，213：2830.2DARWIN P B，KOZLOWSKI P.AngularJS web application developmentEB/OL. s：/ codeproject /articles/637430/angularjsexampleapplication.3

13、波mRAFAT KUC MAREK ROGOZIN SKI.ElasticsearchM.北京： 電子工業(yè)出版社，2021.4俞詩源，程三軍.大數(shù)據(jù)工具在網(wǎng)絡(luò)攻擊監(jiān)測中的應(yīng)用C.第30次全國計算機(jī)平安學(xué)術(shù)交流會論文集，2021.5李紅.主流Javascript框架比較與分析J.鞍山師范學(xué)院學(xué)報，20214：4047.6顧學(xué)海，胡牧，蔣厚明，等.基于HTML5的混合挪動應(yīng)用開發(fā)J.計算機(jī)系統(tǒng)應(yīng)用，2021，255：237240.7FELSENSTEIN J.Confidence limits on phylogenies：an approach using the bootstrapJ.Evolution，