綦慧　徐曉慧

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

關鍵詞：大數(shù)據(jù);搜索;Web系統(tǒng);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

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

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

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

概括起來，主要貢獻是：

1）提出了基于Web系統(tǒng)結合Axios技術和Element-UI關鍵技術實現(xiàn)大數(shù)據(jù)的搜索。

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

3）基于Web系統(tǒng)，針對大數(shù)據(jù)數(shù)據(jù)量大對頁面渲染遲緩的性能問題，提出結合Vue技術棧，自定義Vue指令的方法實現(xiàn)大數(shù)據(jù)搜索的頁面性能優(yōu)化。

1 系統(tǒng)框架

首先介紹基于Web系統(tǒng)的大數(shù)據(jù)搜索的基本拓撲結構框架，如圖1所示：

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

2 關鍵技術

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

2.1 Axios技術介紹概要

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

Ajax實現(xiàn)了頁面的局部數(shù)據(jù)刷新，而Axios是對Ajax的封裝。相較于Ajax，Axios有以下新特性：

1）從瀏覽器中創(chuàng)建XMLHttpRequest

2）從node.js中創(chuàng)建http請求。

3）支持Promise API

4）攔截請求和響應

5）轉換請求數(shù)據(jù)和響應數(shù)據(jù)

6）取消請求

7）自動轉換JSON數(shù)據(jù)

8）客戶端支持防御XSRF

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

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

/*XMLHttpRequest對象用于在后臺與服務器交換數(shù)據(jù)*/

var xhr = new XMLHttpRequest（）;

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

xhr.onreadystatechange = function（） {

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

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

/* 從服務器獲得數(shù)據(jù) */

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）

{ /*從服務器獲得數(shù)據(jù) */

resolve（xhr.responseText）

}

};

xhr.send（）;

}）

}

}

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

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

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

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

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

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

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

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

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'）;}

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

2 快速搜索技術的實現(xiàn)

2.1 基于Axios的數(shù)據(jù)獲取與存儲

Axios獲取數(shù)據(jù)的代碼流程如圖3所示：

結果的獲取實現(xiàn)如圖4所示：

2.2 基于el-select組件的數(shù)據(jù)快速搜索

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

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

KMP（Knuth-Morris-Pratt）算法[8]的主要思想是：目標字符串和模式字符串進行字符串匹配。每當一次匹配過程中出現(xiàn)字符不匹配時，不需要進行指針回溯[9]。而是利用最長相同真前綴和真后綴的相同長度即next[j]所得值將模式字符串右移，繼續(xù)匹配。直到在目標字符串中找到與模式字符串相同的字符串，并返回該字符串的下標值;若未找到，返回值為-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）的匹配過程中匹配不成功，即出現(xiàn)Si≠Pj時，i不變，j=nextj。

nextj=-1當j=00當0

優(yōu)化后的搜索界面如圖5所示：

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

3 快速搜索技術的優(yōu)化

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

滾動監(jiān)聽的實現(xiàn)原理[10]如圖6所示：

由圖6看出：

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

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

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

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

scrollHeight-scrollTop<=clientHeight（2）

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

Data=currentPagePage_Size+Math.min （allData_length-currentPage

Page_Size，Page_Size）

（3）

其中，Data：已經加載的數(shù)據(jù)和將要被懶加載的數(shù)據(jù);

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

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

allData_length：需要回顯在option中所有的數(shù)據(jù)的個數(shù)。

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

通過以上兩步實現(xiàn)了大數(shù)據(jù)快速搜索的回顯，優(yōu)化了瀏覽器性能。

代碼實現(xiàn)流程如圖7所示：

優(yōu)化效果圖如圖8所示：

優(yōu)化后的界面在瀏覽器的檢查界面滾動鼠標每瀏覽50條數(shù)據(jù)可在控制臺打印more標志。

從數(shù)據(jù)庫獲取所有數(shù)據(jù)的時間如圖9所示：

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

4 結 論

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

回顯數(shù)據(jù)渲染優(yōu)化后時間表對比圖如圖10所示：

參考文獻

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

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

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

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

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

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

[7] 羅新曼.大數(shù)據(jù)技術在計算機網絡信息管理中的應用[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.