基于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的代码结构如下所示：

class="el-select_tags">      <！--放置多选时的选中的tag，以tag展现-->

    <！--搜索功能-->

v-if="filterable" @input="e=>handleQueryChange

（e.target.value）"/>    <！--单选的时候选中的值回显-->

：clsaa="{'is-focus'：visible}">

  <！--下拉框-->

v-show="options.length>

0&&！loading">

<！--选项内容-->

v-if="showNewOption">

   <！-- options为空显示的默认文字或者select处于loading的情况 -->

从上面的代码框架中可以看出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.