基于Web系統的大數據搜索技術的實現和優化

綦慧　徐曉慧

摘 要：基于Web平臺開發背景，提出了以Axios和Element-UI組件庫為關鍵技術實現大數據的快速搜索。通過Axios技術跨域請求后臺數據，將獲得的數據保存在Web內存中。Web平臺用戶搜索組件界面通過Element-UI組件庫搭建，將從后臺獲取到的數據渲染到Web界面中，根據KMP算法進行字符串匹配實現關鍵字搜索。在此基礎上結合Vue技術棧自定義指令懶加載實現快速精準搜索。經實驗表明該種基于Web系統的大數據搜索框架能夠實現大數據的準確快速搜索。

關鍵詞：大數據;搜索;Web系統;Axios技術

中圖分類號：TP311?????? 文獻標識碼：A

Realization and Optimization of Big Data Search

Technology Based on Web System

QI Hui，XU Xiao-hui

（Faculty of Information Technology，Beijing University of Technology， Beijing 100124，China）

Abstract：Based on the development background of Web platform， this paper proposes to realize fast search of big data with Axios and Element-Ui component library as key technologies.By using Axios technology to request background data across domains， the obtained data is stored in Web memory.The user search component interface of the Web platform is built through the element-ui component library， the data obtained from the background is rendered into the Web interface， and the keyword search is realized by string matching according to KMP algorithm.On this basis， Vue technology stack custom instruction lazy load to achieve fast and accurate search.Experiments show that the big data search framework based on Web system can realize accurate and fast search of big data.

Key words：big data;search;Web system;Axios

數據，已經滲透到當今每一個行業和業務職能領域，成為重要的生產因素。IBM研究表明，僅過去兩年，人類就創造了世界上90%的數據[1]。IDC研究顯示，未來十年的數據存儲量將增長50倍[2]。信息技術的迅猛發展使得數據處理容量從TB轉換為ZB。而正因為數據量的增多，數據搜索面臨巨大的挑戰。

大數據不僅是定義為數據量多，而且數據格式和種類較為復雜。基于大數據的生命周期，大數據搜索主要包括將數據提取到系統中、將數據保存到存儲中、操作搜索數據、可視化數據等四個流程。對于大數據搜索技術，國內外的研究者也提出了很多方法和模型。文獻[3]提出了一種基于遺傳算法的大數據搜索技術，并對其方法進行改進仿真分析。文獻[4]在Lucene的基礎上，提出了改進的分詞算法和改進的相關度排序算法。文獻[5]基于Lucene，利用XML的數據存儲設計并實現了一個Web搜索引擎。文獻[6]提出了一種優化的web搜索模型，基于識別用戶意圖查詢的智能化搜索。

基于Web平臺開發為背景，提出了以Axios和Element-UI組件庫為關鍵技術搭建大數據搜索的平臺。主要介紹了基于Web系統的大數據搜索的實現框架，然后詳述了實現Web平臺大數據搜索的關鍵技術原理和實現過程。通過Axios技術跨域請求后臺數據，將獲得的數據保存在Web內存中。Web界面搜索組件通過Element-UI組件庫搭建，將從后臺獲取到的數據渲染到Web界面中，根據KMP算法實現關鍵字搜索。在此基礎上，還結合了Vue框架，通過自定義Vue指令，實現了平臺的快速搜索。通過實驗分析，發現不僅能通過關鍵字準確的搜索到數據，并且在大數據的實驗背景下能夠快速的通過關鍵字搜索到數據，Web頁面性能不會因數據量過大而產生搜索數據遲緩現象。

概括起來，主要貢獻是：

1）提出了基于Web系統結合Axios技術和Element-UI關鍵技術實現大數據的搜索。

2）針對特殊大數據屬性名無明顯差異化，實現明顯搜索過濾問題，提出運用KMP算法實現了關鍵字的準確搜索。

3）基于Web系統，針對大數據數據量大對頁面渲染遲緩的性能問題，提出結合Vue技術棧，自定義Vue指令的方法實現大數據搜索的頁面性能優化。

1 系統框架

首先介紹基于Web系統的大數據搜索的基本拓撲結構框架，如圖1所示：

從拓撲結構框架分析，大數據搜索框架分為Web平臺和后臺數據庫兩部分。Web平臺是大數據搜索技術實現的主要依托，后臺數據庫是負責存儲數據，供數據搜索獲取數據。從這個框架可以看出，大數據搜索技術的實現實現以下部分：數據請求、數據獲取、關鍵字輸入、關鍵字搜索、搜索數據結果渲染。

2 關鍵技術

大數據的核心技術涵蓋了數據收集、存取、基礎框架構建、處理、統計分析、挖掘、模型預測與結果呈現幾方面[7]。基于Web系統的大數據搜索技術主要是包含數據的獲取、處理、搜索、顯示這四個方面。如何獲取數據，并把處理搜索后的數據結果準確的渲染在界面中是實現大數據搜索的關鍵點。運用axios技術和基于Element-UI組件中select解決此問題。下面對Axios技術和Element-UI組件select下拉列表遠程搜索原理作簡要介紹。

2.1 Axios技術介紹概要

Axios是基于promise的HTTP庫，用在瀏覽器和node.js中。主要介紹Axios在瀏覽器中的應用。在Web開發框架中，Vue技術棧請求服務器數據主要是通過vue-resource和Axios兩種技術與服務器通信并獲取數據，由于Vue的升級，vue-resource 提供的價值和其維護成本相比并不劃算，尤雨溪決定在以后取消對 vue-resource 的官方推薦，不再對vue-resource進行升級，所以越來越多的開發者用Axios插件進行服務器數據的請求。

Ajax實現了頁面的局部數據刷新，而Axios是對Ajax的封裝。相較于Ajax，Axios有以下新特性：

1）從瀏覽器中創建XMLHttpRequest

2）從node.js中創建http請求。

3）支持Promise API

4）攔截請求和響應

5）轉換請求數據和響應數據

6）取消請求

7）自動轉換JSON數據

8）客戶端支持防御XSRF

Ajax的核心是XMLHttpRequest，Axios請求是使用promise來實現XMLHttpRequest的。下面通過封裝XMLHttpRequest的代碼對比來說明Axios發送請求回調的簡要原理。

var Ajax={get： function（url， fn） {

/*XMLHttpRequest對象用于在后臺與服務器交換數據*/

var xhr = new XMLHttpRequest（）;

xhr.open（'GET'， url， true）;

xhr.onreadystatechange = function（） {

/* readyState == 4說明請求已完成*/

if（xhr.readyState==4&&xhr.status == 200） {

/* 從服務器獲得數據 */

fn.call（this， xhr.responseText）;

}

};

xhr.send（）;

}

}

var Axios = {

get： function（url） {

return new Promise（（resolve， reject） => {

var xhr = new XMLHttpRequest（）;

xhr.open（'GET'， url， true）;

xhr.onreadystatechange = function（） {

/* readyState == 4說明請求已完成*/

if （xhr.readyState == 4 && xhr.status == 200）

{ /*從服務器獲得數據 */

resolve（xhr.responseText）

}

};

xhr.send（）;

}）

}

}

從對比中可以看到，axios的返回值是promise 對象，從而使得axios可以異步處理請求獲取的數據。由于返回值是promise對象，所以對于返回結果同promise的返回處理相同，用then處理success callback的數據，用catch捕獲error callback的錯誤并處理。

Axios發送請求的整體流程如圖2所示：

1.2 ELEMENT組件下拉列表遠程搜索原理概要

Element-UI是一套為開發者準備的VUE2.0的組件庫，具有一致性、反饋、效率、可控等優秀性能。組件設計上與現實生活的流程、邏輯保持一致性，并且能反饋在界面上，讓用戶清晰感知自己的操作。簡化的流程、清晰明確的操作幫助用戶快速操作。該組件庫中包含很多組件，主要著重分析在大數據搜索時用到的select組件。并從代碼角度重點分析El-Select組件和El-Option組件遠程搜索功能的實現原理。

Element使用div標簽模仿select。select組件HTML的代碼結構如下所示：

從上面的代碼框架中可以看出select中有兩個input標簽。其作用是一個用來查詢搜索，一個用來回顯查詢搜索。如何在input中實現搜索功能，其方法是在input標簽中存在

@input=″e=>handleQueryChange（e.targ et.value）″輸入綁定。

在輸入查詢搜索中，綁定一個handleQueryChange函數方法，函數的參數是input的搜索參數，目的是當搜索框中的內容發生變化時，響應的input搜索結果的回顯相應的發生變化。該函數的關鍵代碼如下所示：

if （this.previousQuery === val） return;if （? this.previousQuery === null &&? （typeof this.filterMethod === 'function' || typeof this.remoteMethod === 'function'）） {? this.previousQuery = val;? return;}

if （this.remote && typeof this.remoteMethod === 'function'） {? this.hoverIndex = -1;? this.remoteMethod（val）;} else if （typeof this.filterMethod === 'function'） {? this.filterMethod（val）;? this.broadcast（'ElOptionGroup'， 'queryChange'）;}

在關鍵代碼中。當查詢搜索的數據與搜索顯示的數據不一樣時，會重現搜索。而且搜索分為filterMethod和remoteMethod兩種搜索方法：本地搜索和遠程搜索。當在使用遠程搜索時，需要在select標簽中設置remote和remote-method屬性來獲取遠程的數據。當開發者在使用select標簽時，需要自己定義remote-method方法。remote-method方法最終將數據返回并賦值給option的v-mod el綁定數組數據將結果顯示出來。

2 快速搜索技術的實現

2.1 基于Axios的數據獲取與存儲

Axios獲取數據的代碼流程如圖3所示：

結果的獲取實現如圖4所示：

2.2 基于el-select組件的數據快速搜索

在上述過程中，由于數據量多，進而搜索后匹配的數據量也有很多，并且很多數據的子字段具有相似性。在select輸入框中搜索關鍵字進行搜索，回顯在el-option中的數據與原始數據在數量上并無太大差異。如何讓搜索返回的數據具有明顯搜索過濾的特征，對于該問題的解決，本文采用在el-select組件中添加remote遠程搜索的屬性，同時傳入一個remote-method。remote-method為一個Function，在該Function中運用KMP算法解決該問題。

首先在remote-method中，用String（）構造函數將搜索關鍵字轉化成原始字符串。用/[^＼＼x00-＼＼xff]/g正則表達式匹配非雙字節的字符，匹配的字符用單字節字符進行替換，并自己計算替換后字符串的長度。當字符串的長度大于4時，則可進行搜索。然后采用KMP算法進行字符串匹配搜索。

KMP（Knuth-Morris-Pratt）算法[8]的主要思想是：目標字符串和模式字符串進行字符串匹配。每當一次匹配過程中出現字符不匹配時，不需要進行指針回溯[9]。而是利用最長相同真前綴和真后綴的相同長度即next[j]所得值將模式字符串右移，繼續匹配。直到在目標字符串中找到與模式字符串相同的字符串，并返回該字符串的下標值;若未找到，返回值為-1。

算法過程：假設目標字符串S為[s0，s2，…，sn-1]，長度為n。模式字符串P為[p0，p2，…，pm-1]，長度為m，并且n>m。

1）當Si=P0，S[i+1]=P[1]，…S[i+m-1]=P[m-1]，則模式字符串在目標字符串中匹配成功。匹配結果下標為i。

2）當在1）的匹配過程中匹配不成功，即出現Si≠Pj時，i不變，j=nextj。

nextj=-1當j=00當0

優化后的搜索界面如圖5所示：

當輸入一個漢字相當于兩個字節時，無法搜索。輸入兩個漢字即四個字節時則可以在數據中搜索，并且可以滾動選擇相應的數據。

3 快速搜索技術的優化

解決思路是實現option顯示的懶加載。首先在下拉框中先預覽50條數據，然后滾動滾動條，當滾動到元素底部時，再加載50條數據，依次加載。具體方法分為兩步：第一步：創建自定義指令，在自定義指令中，添加DOM監聽事件，綁定滾動監聽。首先簡要介紹vue自定義指令概念和結構。在vue中，由于MVVM模式，實現數據的雙向綁定，經常用到v-model和v-on指令。但當自身指令無法滿足開發者時，又仍需要對底層DOM進行操作，這時就會用到自定義指令。自定義指令的基本代碼結構如下所示：vue.directive（'指令名'，{鉤子函數}）。vue自定義指令的目的是實現當搜索數據多時回顯性能無影響，所以指令名為'loadmore'，鉤子函數選用bind。在bind鉤子函數中，參數為el和binding。其中el是指自定義指令綁定的元素，用來操作DOM中元素;binding是一個對象，有value、name等屬性，也是用來操作DOM中的元素。在loadmore指令中獲取select標簽的CSS選擇器中表示鼠標滾動的第一個元素，在此指定元素上添加滾動事件監聽。

滾動監聽的實現原理[10]如圖6所示：

由圖6看出：

clientHeight：指的是顯示內容的高度，在上圖中包含內容區高度和內邊距高度。

scrollHeight：指的是滾動的高度，在上圖中指的是需要顯示的元素內容的總高度。

scrollTop：指的是隱藏在顯示內容區域上方的高度，在圖中指的是滾動條滾動了的高度。

在滾動監聽事件中，通過下式判斷select的滾動條是否滾動到了底部。

scrollHeight-scrollTop<=clientHeight（2）

第二步：第一步完成滾動監聽，當監聽到滾動條滾動到元素底部時，需要加載下面50條數據。在第一步中實現自定義指令，把自定義的指令用v-loadmore的形式添加在el-select標簽中并綁定事件方法，在該事件方法中以每頁50條數據分頁加載。實現接下來50條數據懶加載的計算公式為式（3）：

Data=currentPagePage_Size+Math.min （allData_length-currentPage

Page_Size，Page_Size）

（3）

其中，Data：已經加載的數據和將要被懶加載的數據;

currentPage：當前懶加載的頁數。初始值為1，加載完50條數據后，該值加1。

Page_Size：每一頁需要加載的最大數據條數，本文設置為50條數據。

allData_length：需要回顯在option中所有的數據的個數。

然后從currentPagePage_Size的位置起，到Data所在的位置回顯在option中。

通過以上兩步實現了大數據快速搜索的回顯，優化了瀏覽器性能。

代碼實現流程如圖7所示：

優化效果圖如圖8所示：

優化后的界面在瀏覽器的檢查界面滾動鼠標每瀏覽50條數據可在控制臺打印more標志。

從數據庫獲取所有數據的時間如圖9所示：

從圖10可以看出，渲染速度從3.11 s優化為0.69 s，渲染速度增加了4.5倍。由此可見，優化后的界面渲染速度更快，性能更好。

4 結 論

基于Web系統，面對大數據快速搜索的需求，使用axios技術實現與后臺數據庫通信。不僅能防止CSRF攻擊保持數據獲取的安全性，而且還可以運用Promise，實現數據的異步處理。在此基礎上，運用Element-UI組件庫中的select組件，既能省去原生組件樣式和框架搭建，并且還能用關鍵字遠程搜索數據實現數據快速搜索的優化。在vue技術棧的背景下，自定義vue指令實現大數據的懶加載，這不僅大大減輕了瀏覽器渲染的壓力，更是使得用戶有更好的體驗效果，使得數據回顯明顯的優化。通過實驗實現表明，利用axios技術實現Web界面與數據庫的交互，并通過select關鍵字精準快速查詢需求信息，并把查詢到的數據快速渲染到web界面中具有很好的實用價值。

回顯數據渲染優化后時間表對比圖如圖10所示：

參考文獻

[1] 張萍，王建中.一種基于大數據的有效搜索方法的改進[J].計算機應用研究，2014，31（8）：2331-2334.

[2] 高興.最新歷史版本：全球大數據規模[EB/OL].http：∥www.techcn.com.cn/index.php？edition-view-185361-3.html，2012-05-01.

[3] 林志鴻.基于改進遺傳算法的大數據智能搜索研究[J].遼寧科技學院學報，2018，20（1）：18-20.

[4] 吳潔明，韓云輝，冀單單.基于Lucene的數字作品搜索引擎的研究與設計[J].計算機工程與科學，2013，35（5）：166-171.

[5] 孔伯煊，李祥.基于Lucene＼＼XML技術的Web搜索引擎設計與實現[J].航空計算技術，2006，36（4）：5-8.

[6] 楊藝，周元.基于用戶查詢意圖識別的Web搜索優化模型[J].計算機科學，2012，39（1）：264-267.

[7] 羅新曼.大數據技術在計算機網絡信息管理中的應用[J].電子技術與軟件工程，2019，20：150-151.

[8] KNUTH D E，MORRIS J H，PRATT V R.Fast pattern mtching in strings[J].SIAM Journal on Computing，1977，6（2）：323-350.

[9] 付聰，余敦輝，張靈莉.面向中文敏感詞變形體的識別方法研究[J].計算機應用研究，2019，36（4）：988-991.

[10]NICHOLAS C Z.Professional JavsScript for web developers[M].People's post publishing house：Beijing，2012：342.