基于ElasticSearch的Angularjs联想框功能实现
2017-06-20 13:42江婷
软件导刊 2017年4期
摘要：基于ElasticSearch实现Angularjs联想控件，可改善用户使用体验，让用户更快更准确地输入内容。结合ElasticSearch达到实时快速、稳定、可靠的搜索目的。ElasticSearch支持HTTP使用JSON数据进行数据索引，使用当前主流的Angularjs框架和bootstrap实现输入框联想控件，可靠性高。
关键词： ElasticSearch；Angularjs；联想框；Javascript；用户体验
中图分类号： TP319
文献标识码： A
文章编号： 16727800（2017）004017403
0引言 随着互联网的发展，网页开发与设计从注重功能化发展到更关注效果尤其是用户体验。用户交互式体验，功能应该更人性化[1]。目前主流MVC Javascript框架有：Angularjs、ReactJS。AngularJS[2]弥补了HTML在构建应用方面的不足。ElasticSearch[3]是一个开源的分布式搜索引擎，具有高可靠性，支持非常多的企业级搜索用例[4]，它对外提供一系列基于java和http的API，用于索引、检索、修改配置。 本文基于ElasticSearch提供的RESTful API，结合Angularjs框架及bootstrap实现了联想框功能。1相关技术综述1.1ElasticSearch ElasticSearch是一个基于Lucene构建的开源、分布式、RESTful搜索引擎，是优秀的全文检索和分析引擎。ElasticSearch基于高性能数据存储系统构建，集海量异构数据分析处理、元数据提取、索引数据统一构建管理、通用化检索接口于一体，系统由分布式的全文搜索引擎和海量数据索引服务组成。针对海量异构数据进行预处理解析后形成构建索引的元数据，对元数据分析后，根据其特性形成索引映射机制，提取构建索引结构数据，并提供持久化机制。以统一的索引资源池为基础，屏蔽异构数据的复杂性，提供统一检索服务。数据索引系统架构如图1所示。
ElasticSearch提供基于http的Restful风格API接口，帮助用户实现索引构建、海量数据检索、索引管理等功能。客户端使用网络请求工具，如curl、Javascript、.NET、PHP、Ruby、python的http库等，都可以对索引系统软件发起访问请求，通过通信端口与检索集群进行通信。1.2Angularjs框架 Angualarjs是Google开源的一款JavaScript MVC 。指令（directives）结构是Angularjsjs丰富HTML控件，开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加简洁、容易。Angularjs具有以下特点：①实现数据双向绑定，从而大大减少js的代码冗余，使得view和controller数据实时同步；②代码模块化。Angularjs对Web应用进行归类，每个Web应用都离不开Controller、Directives、Factories、Filters、Services和Views；③提供依赖注入。每个Module都可以通过依赖注入来调整不同类别，每个类别都有自己的功能，如View实现UI，Controller实现UI背后的业务功能等，从而大大降低模块之间的耦合度；④支持测试驱动开发。 Angularjs处理模板 [5]：带有标记的HTML→DOM→Angularjs模板引擎。Angualarjs的出现使得网页应用或移动应用在高效率、跨平台和安全性等方面得到了显著提升[6]，该框架适合单页应用，其交互方式如图2所示。
1.3搜索联想框 互联网时代用户体验至关重要。在搜索过程中，提供可靠有效的搜索提示对提升用户体验作用较大。用户每输入一个字或一个单词，搜索引擎会相应智能输出与之相关联且权重较高的关键词，省去输入全部字词的耗时，从而节省搜索时间，提升了用户体验。搜索联想框如图3所示。
目前各大搜索引擎网站都有相应的智能搜索联想框，本文基于ElasticSearch、Angularjs，设计实现搜索联想框。2设计与实现2.1后台设计 ElasticSearch使用基于HTTP协议，以JSON为数据交互的RESTful API。前端通过端口与ElasticSearch通信，也可通过curl命令与ElaticSearch通信。 RESTful请求格式为： curl–X
2.2构建HTML布局 使用bootstrap[7]构建文本输入框，用于用户填写搜索信息。该文本框下，显示联想结果列表，在多个列表中选取用户需要的信息，其值即可同文本输入框绑定。点击“HIK一下”按钮即触发搜索功能。 建立一个大
区块容器，设置两个小
区块容器：一块用于用户输入搜索信息，另一块用于实时显示联想结果，代码如下： 2.3Watch監听 Angularjs具有脏值检查策略[8]，检查输入值是否发生变化。Angularjs持续跟踪当前监控的值，同时遍历$watch列表。如果从旧值更新后的值没有发生变化，则继续遍历监控列表。如果值发生了变化，则启用新值并继续遍历$watch列表，如图5所示。
- {{opt.text}}
$watch方法会对angular事件的每一个$digest调用进行检查。如果在表达式上检测到变化，Angular会返回$digest循环。$watch函数接受两个必要参数，分别为watchExpression、listener/callback。前者可以是一个函数或一个作用域对象属性，后者作为回调的监听函数，只有在watchExpression发生改变时调用。监听函数会在初始化时调用一次，而此时newValue和oldValue的值都为undefined。 $scope.$watch（'selectedvalue'，function（newValue，oldValue）{ // newValue表示selectedvalue的新值 // oldValue表示selectedvalue的旧值 }）； 由于Angularjs具有数据双向绑定性能，当view中数据发生变化时将反馈至scope中，scope中的模型会动态更新。scope内置$watch函数监控model变化。当数据模型某部分发生变化时，$watch函数会快速发出通知。2.4联想结果 ElasticSearch提供REST API和简单查询，POST、GET请求搜索数据。无论操作是更改映射还是文档索引，都需要使用REST API向ElasticSearch发送JSON结构数据。一旦监听数据发生变化，便立即向ElasticSearch发出请求，以实时获取最新的联想结果。2.5JavaScript设计
2.5.1JavaScript函数①对文本输入框selectedvalue进行监听，一旦发生改变，向ElasticSearch发送JSON结构请求；②ElasticSearch返回请求结果，将其结果绑定options；③选中结果，将其与文本输入框值selectedvalue进行绑定。
2.5.2JavaScript设计流程 联想框流程见图6。
2.5.3JavaScript函数设计 联想框效果如图7所示。
3结语 CSS与Javascript技术的出现，给网站设计与开发带〖CM（24*4/7〗来了活力 [9]。本设计使用主流前端技术Bootstrap，
Angularjs，后端使用ElasticSearch分布式搜索引擎，极大提高了页面的加载速度及后台查询索引速度。联想搜索控件智能输出与之相关联且流量最大的关键词，从而省去字词输入，大大提升了用户体验，具实用价值。
参考文献：
[1]李冲，熊淑华，魏颖颖.基于CSS与JavaScript技术的Tab面板的设计与实现[J].计算机技术与发展，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].北京： 电子工业出版社，2015.
[4]俞诗源，程三军.大数据工具在网络攻击监测中的应用[C].第30次全国计算机安全学术交流会论文集，2015.
[5]李红.主流Javascript框架比较与分析[J].鞍山师范学院学报，2015（4）：4047.
[6]顾学海，胡牧，蒋厚明，等.基于HTML5的混合移动应用开发[J].计算机系统应用，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创建交互式Web页面[J].信息技术，2001（2）：3536.〖ZK）〗〖BP（〗责任编辑〖HT6K〗〖JY〗（责任编辑：杜能钢）
