1. 前言
前端的数据分析一直是我们追求的目标，然而在实际操作上还是存在很多问题的。很多前端开发者大多靠兴趣驱动，通过手写脚本和 Excel 来实现数据分析的目的，这种方法的繁琐和效率低下仍然令人不满足。那么有什么解决方案可以更好地实现前端的数据分析呢？本文将介绍如何使用 Fastify 和 Elasticsearch 进行数据分析，需要的基础知识有 JavaScript 和 Elasticsearch。
2. Fastify 和 Elasticsearch 初步了解
2.1 Fastify
Fastify 是一个功能强大的 Node.js Web 框架，专注于提供高效的 HTTP 服务器和构建 Web 应用程序 API。Fastify 基于异步 I/O 模型，可以处理大量的连接请求，是构建高效、稳定、可扩展 Web 应用程序的极佳工具。相较于其他框架，Fastify 在性能和内存方面都有很好的表现，并且提供了社区强大的插件系统，以帮助开发者快速扩展。
2.2 Elasticsearch
Elasticsearch 是一个分布式文档存储和搜索引擎，具有快速、可靠、可扩展和高效检索等特点。它通过使用 Lucene 库进行全文搜索，可以处理海量数据的查询请求，是一款非常优秀的数据存储与分析利器。
3. Fastify 和 Elasticsearch 的数据分析使用示例
为了更好的方便大家学习，这里提供了一个简单的示例案例，使用 Fastify 和 Elasticsearch 来实现一个热门文章搜索的专题页面。
我们的目标是：实现一个可视化搜索页面，能够搜索出站点上访问量最大的文章，并配合数据可视化来呈现文章排行榜。
3.1 搭建 Fastify 后端服务
首先，我们需要使用 Fastify 搭建后端 API 服务器，我们采用下面的代码，搭建一个简单的 Fastify Hello World 应用。
-- -------------------- ---- -------
----- ------- - -------------------- ------- ---- --
---------------- ----- --------- ------ -- -
------ - -------- ------ ------ -
--
----- ----- - ----- -- -- -
--- -
----- --------------------
------------------------ --------- -- ----------------------------------
- ----- ------- -
------------------------
---------------
-
-
-------代码解析：
引入 fastify 模块，并创建 fastify 实例。
使用
fastify.get()方法定义一个 GET 接口，当访问 / 时，返回一个消息。使用
await fastify.listen()启动服务器，并监听 3000 端口。
3.2 配置 Elasticsearch 数据源
Fastify 是一个高效的 API 服务工具，但是我们要想实现更多功能，我们最好使用 Elasticsearch 存储数据。这里我们配置一下 Elasticsearch，导入数据源。
const { Client } = require('@elastic/elasticsearch')
const client = new Client({ node: 'http://localhost:9200' })
这里通过 Client 来实例化 Elasticsearch 客户端，并传递了 Elasticsearch 的节点信息。如果 Elastic 运行在本地提供的默认地址，则可以直接使用它。否则，可以根据实际情况对此进行修改。
3.3 创建 Elasticsearch 索引
接着，我们在 Elasticsearch 中创建一个索引，用于存储文章数据:
-- -------------------- ---- -------
----- ---- - -
--------- -
----------- -
------ - ----- ------ --
----- - ----- ------ --
------- - ----- --------- --
--
--
-
----- ------ - ----- ----------------------- ------ ----------- ---- --
------------------- --- - ----- ------ ----------- ---- -------- ----- - 在这段代码中，我们首先定义了 articles 索引的结构信息，其中包含三个字段，标题、标题别名和访问次数，它是声明在 mappings 属性中，这种结构定义非常轻松和灵活。
接着，我们使用 Elasticsearch 客户端，使用 indices.create API 创建了一个名叫 articles 的索引。当我们运行这段代码时，Elasticsearch 就可以创建一个 index，用于存储文章数据了。
3.4 写入数据到 Elasticsearch
下一步，我们需要将文章的标题、标题别名和每篇文章的访问次数写入 Elasticsearch 索引。
-- -------------------- ---- -------
----- -------- - -
- ------ -------- --- ------------- --- ---- ----------- ----- ----------------------------------------------- ------- --- --
- ------ ------ ----------- --- ---------- ----- -------------------------------- ------- --- --
- ------ ------ ---------- -- -------- -- ------- ----- ---------------------------------------- ------- --- --
- ------ -- --------- ----- -- --------- ----- ------------------------------ ------- --- --
- ------ --- --- --- ----- ------ --- ---- --------- ----- ------------------------------------------- ------- --- --
--
----- ---- - ---------------------- -- -- ------ - ------- ---------- - -- ------
----- ------ - ----- ------------- ---- ---在此代码示例中，我们创建了一个有限的数组，包含文章的标题、标题别名和每篇文章的访问次数。我们使用 bulk API 来将所有文章写入 Elasticsearch 中的索引。
3.5 定义搜索请求
让我们定义搜索请求，具体组成包括请求接口路由、调用 Elasticsearch 的搜索 API、将数据展示为标准的 JSON 格式返回给调用方。
-- -------------------- ---- -------
---------------------- ----- --------- ------ -- -
----- - - - - --------------
----- -------- - ----- ---------------
------ -----------
----- ---
----- -
------ -
------------ -
------ --
------- ----------- --------- -----------
--
--
----- -- -------- ------ ---
--
---
------ -
----- ---------------------------- -- -------------
------- --------------------------
--
---这段代码的实现基本上是本篇文章的核心了，其中：
使用
fastify.get方法来定义一个 HTTP GET 请求接口。处理了名称为
q的搜索请求字符串参数。使用
client.search方法在 Elasticsearch 中搜索文章信息。我们使用query来匹配关键词。此外，我们可以通过size参数限制返回的结果集大小，使用sort指定返回结果的排序规则。最后，将结果集映射到只包含 article 的数组中。
3.6 整合前端界面
最后，我们需要我们来创建一个非常简单的 HTML 页面，包括一个输入框和一个按钮。在这里我们使用 jQuery 作为 DOM 操作和 Ajax 请求的工具。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------- --------------
------- -----------------------------------------------------------
-------
------
----------- -----------
------ ----------- -------- --
-----------------------
---- -------------------
--------
-------------------- -- -
-------------------- -- -
----- ----- - -------------------------
------------------------------- ---------- -- -
----------------------
----------------------
------------------------------ ------------------ --------------
--------------------------- -- -
----------------------
---------------------
------------------
--------------------
---
---
---
---
---
---------
-------
-------这个页面中有一个简单的表单，其中包括输入查询词的输入框和用于响应搜索结果的 div 元素，一个按钮(click)，点击后会发送一个 Ajax 请求，并将结果渲染到结果列表。
4. 总结
到此结束了，我们已通过 Fastify 和 Elasticsearch 实现了一个简单的全文搜索引擎，并使用表格方式将数据可视化呈现。这个简单的示例让我们在实践中了解了它们的用途和相关工具，也可以应用于更复杂的应用程序中，让我们拥有更多高效的工具。
源代码：Fastify and Elasticsearch for data analytics project。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65aa5465add4f0e0ff3f2025