在现代化的前端研发中，数据处理是一个不可避免的环节。而 Elasticsearch 则是一个非常流行的搜索引擎，被广泛地应用在日志分析、商品搜索、用户行为分析等领域。在本文中，我们将介绍如何使用 @terrajs/mono-elasticsearch 这个 npm 包来快速搭建一个 Elasticsearch 的前端搜索引擎。
安装
首先，我们需要在项目中引入该包。可以通过 NPM 或者 Yarn 安装：
--- ------- --------------------------- - -- ---- --- ---------------------------
搜索
该包实现了一个 Elasticseach 搜索的简单接口。使用方式如下：
----- - ------ - - -------------------------------------- ----- ------ - --- -------- ----- ----------------- -- ------------- --- --- -- ------ ----------- -- ---- -- ----- ------ - ----- -------------------- ------- -------------------
其中，search.search 接受一个字符串作为搜索关键字，返回一个 Promise。当搜索完成后，将返回一个包含搜索结果的对象，它包含了你搜索的文本与对应的得分、文档对应的 ID 等信息，并以降序返回。
插入数据
该包也提供了插入数据的能力。用 search.index 方法可以插入一个文档：
----- -------------- ----- - -------- ------ ------ -- --- ------- --
其中，id 是为该文档指定的 ID。
更新数据
接下来，让我们看一下文档更新的实现方案。使用 search.update 方法可以更新一条文档：
----- --------------- ----- - -------- ------ --------- -- --- ------- --
注意，这里的 body 是用于更新的数据。
删除数据
另外，如果我们想删除一条文档，可以使用 search.delete 方法：
----- ----------------------
示例
最后，让我们来看一下这个包在实战场景中的使用举例。以下示例是一个基于 Vue.js 的搜索组件，可以从 Elasticsearch 中搜索出哈利波特书籍名称匹配关键字的结果：
----------
-----
------ --------------- --
----
--- ------------ -- ------- --------------- ----- -------
-----
------
-----------
--------
------ - ------ - ---- -----------------------------
------ ------- -
------ -
------ -
------ ---
------- ---
-
--
----- --------- -
----- -------------------- - - ----- ----------------- ------ -------------- -
----------- - --- ----------------------------
--
--------- -
-------------- -
------ ---------- --- --
--
--
------ -
----- ------- -
-- ------------------- -
------ ------------ - ---
-
----- -------- - ----- ------------------------------
----- ------ - ---------------------------- -- ------------------
----------- - ------
--
--
-
---------在这个示例中，首先我们需要为该组件实例化一个搜索实例。在 mounted 钩子中，我们创建了一个使用 localhost:9200 作为 Elasticsearch 服务器地址、harry-potter 作为索引名称的搜索实例。
接下来，我们定义了 query 和 titles 两个响应式数据。前者负责存储用户输入的关键字，后者用于存储搜索结果。
在这个组件中，我们观察 query 数据的变化，于是编写了一个具有搜索功能的 watch 钩子。当用户输入非空关键字时，该钩子立即搜索 Elasticsearch，并将搜索结果中的书籍标题赋值给 titles 数据。
最后，这个组件中包含了一个 input 输入框和一个用于显示搜索结果的 ul 列表，我们根据 titles 数据动态渲染出若干个 li 元素。
结语
本文中，我们介绍了如何使用 @terrajs/mono-elasticsearch 这个 npm 包来快速搭建一个 Elasticsearch 的前端搜索引擎，并提供了详尽的使用文档。Elasticsearch 是一个功能强大、灵活且性能强劲的搜索引擎，它在许多场景下都有着得天独厚的优势。希望读者在本次阅读过程中，能够了解到 Elasticsearch 和该 npm 包的运用，并学习到如何基于它搭建出自己所需要的前端搜索引擎。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562c981e8991b448e00ce