如何在 Node.js + React on Redis 中构建事件管理应用程序
你可能在想,等等,我没看错标题吧?用 Node.js 构建一个事件管理器,并使用 Redis 作为数据库?跟着我一起,我会带你踏上一段旅程,解答你脑海中可能存在的许多问题。
在本文中,我们将基于 Redis 构建一个功能齐全的事件管理平台。但首先,为什么有人会想在应用程序中使用 Redis 作为唯一的数据库?一个显而易见的原因是 Redis 速度超快,而快速的数据库会直接影响应用程序的性能,进而影响应用程序用户的体验。话虽如此,让我们开始吧。
先决条件
为了能够遵循本教程,您需要在计算机上安装以下软件:
Node.js
npm
代码编辑器(VSCode)
Web 浏览器/Postman RedisInsight -如果您还没有安装,请在此处
在您的计算机上安装一个。
最后,您需要为 Redis 云数据库创建一个 Redis Enterprise 帐户。如果您还没有,可以前往他们的网站创建一个免费帐户。
入门
首先,我们将安装应用程序所需的依赖项,因此打开终端(Windows 上的命令提示符)并输入以下命令
cd desktop && mkdir event-manager && cd event-manager
通过运行以下命令初始化目录以创建 package.json 文件
npm init -y
安装依赖项
让我们通过运行以下命令来安装用于开发此应用程序的各种软件包:
npm install express dotenv redis-om ulid jsonwebtoken bcrypt
最后,让我们通过运行以下命令安装 nodemon 作为开发依赖项来帮助我们的开发流程:
npm install -D nodemon
在您选择的代码编辑器中打开新创建的应用程序事件管理器目录(我将在这里使用 VSCode),它应该与下面的类似。
打开生成的“package.json”文件,并在顶级对象中输入一个键“type”,其值为“module”,因为我们将使用 es 模块选项编写我们的开发代码。
现在让我们创建一个简单的 Express 服务器,以确保所有设置都正确。为此,请在项目根目录下创建一个名为“src”的新目录,并在其中创建一个名为 app.js 的新文件,并将以下代码粘贴到该文件中。
import express from 'express'; | |
import { config } from 'dotenv'; | |
config(); | |
const app = express(); | |
app.use(express.json()); | |
const port = process.env.PORT ?? 3000; | |
app.get('/api/v1', (req, res) => { | |
res.send('Welcome to the event management platform built on redis'); | |
}); | |
app.listen(port, () => { | |
console.log(`Server running on: http://localhost:${port}`); | |
}); |
在 package.json 文件的脚本部分中,通过添加以下键和值来设置服务器的启动脚本
“start”: “node src/app.js”,
“dev”: nodemon src/app.js”
现在通过在终端中运行以下命令来启动您的 node.js 服务器:
npm run dev
您应该看到以下内容记录到您的终端:
每次对应用程序代码进行更改时,服务器都应自动重新启动以选择新的更改。
现在我们确定我们的服务器已正确设置,接下来我们需要做的是设置我们的 Redis 数据库来处理我们的事件数据的存储。
Redis 企业数据库设置
要设置您的 Redis 数据库,请点击此处登录您的 Redis 企业帐户。如果您尚未创建帐户,请前往Redis 网站创建一个免费帐户。您可以使用注册页面上的免费优惠券,探索 Redis 的免费套餐以外的功能。
在您的 Redis 企业控制面板上,单击“新订阅”按钮,选择“固定套餐”,然后选择 100MB 存储空间选项。您可以选择任何云服务提供商,但为了本教程的目的,我们将使用默认云服务提供商 (AWS),并确保您的设置与以下屏幕截图一致。
不用担心,由于您使用了200 美元的优惠券,所以您可以放心地添加您的卡,所以您选择的套餐不会被扣款。我们需要这个套餐来激活 Redis 数据库的数据持久性,因为如果一个事件管理平台每次访问时都显示为空,那会很奇怪 😀。
但如果您仍然持怀疑态度,您可以选择免费(30MB)选项,但您的数据不会被保留,但您仍然可以使用该选项继续本教程。
现在,在您的订阅信息中心上,点击“新建数据库”按钮。为您的数据库命名,并在“类型”部分下选择“Redis”选项,具体选择所需的 Redis 模块,在本例中为 RediSearch。确保您也选择了所需的数据持久性选项,但在本例中,我们将使用每小时运行一次的快照选项。完成数据库配置后,点击“激活数据库”按钮。之后,您应该会看到类似下图的数据库配置屏幕。
可视化您的数据
现在我们已经正确设置了数据库,我们需要一些东西来可视化存储在 Redis DB 中的数据,这就是RedisInsight 的作用所在。现在启动 RedisInsight 并单击“添加 Redis 数据库”按钮,然后复制并粘贴到 Redis 企业数据库连接字符串中。
它在 Redis 企业数据库配置页面上被称为“公共端点”。然后,在同一数据库配置页面上,您将看到您的默认用户名和密码,复制它们并粘贴到 RedisInsght 连接对话框中,然后点击“添加 Redis 数据库”按钮连接到您的 Redis 企业数据库。您将在下一页看到数据库摘要,该摘要为空,因为您的 Redis 数据库中目前没有数据。
从应用程序连接您的 Redis DB
接下来要做的是从事件管理器应用程序内部建立与 Redis 数据库的连接。为此,请在“src”目录中创建一个名为 db 的新目录,并在新创建的 db 目录中创建一个名为 index.js 的新文件。将以下代码复制并粘贴到该文件中。
在我们的事件管理器应用程序中构建用户身份验证
虽然我们希望公众能够查看平台上的活动,但我们只希望注册用户能够创建活动。因此,让我们在系统中构建一些身份验证。在src目录中创建四个文件夹,分别是routes、controller、utils和middleware。这样做是为了在一定程度上保持简洁明了。
现在,在控制器目录中,创建一个名为“auth.js”的新文件并将以下代码粘贴到其中。
在代码库的createAccount()函数部分,我们将用户帐户信息保存在 Redis 哈希数据结构中,并使用用户的电子邮件作为键,因为它在整个数据库中是唯一的。我们借助 ulid 包为用户生成用户 ID,ulid 包是 uuid 的绝佳替代方案。我们借助“redis-om”客户端,通过之前设置的数据库连接与 Redis 企业数据库进行交互。
我们需要做的最后一件事是创建这里导入的 jwt 帮助文件,因此在 utils 目录下创建一个名为“jwtHelper.js”的新文件,然后将以下代码复制并粘贴到文件中。
接下来要做的是将控制器连接到路由。在 routes 目录中,创建一个名为“authRouter.js”的文件,然后将以下代码复制并粘贴到其中。
现在,让我们最终将路由器连接到 Express 服务器。在 app.js 文件中,导入“authRouter”模块,并将其传递给 use() 函数,添加到服务器中间件堆栈中,如下所示。
app.use('/api/v1/auth', authRouter);
最后,让我们在项目根目录下创建一个名为 .env 的新文件,以便将所有机密信息添加到其中。记住,我们在整个项目中一直在使用它们,因此请将以下环境变量复制并粘贴到您的 .env 文件中,并进行相应的填充。您将从 Redis 企业数据库配置页面获取所有与 Redis 相关的变量值。
PORT=
REDIS_DB_URL=
REDIS_DB_USER=
REDIS_DB_PASS=
TOKENEXPIRATIONTIME=
JWTSECRET=
现在,启动服务器,然后通过 Postman 或您选择的任何 HTTP 客户端测试新创建的身份验证流程。创建几个用户并使用您的凭据登录。
构建事件模块
事件模块是本应用的核心,也是 Redis 数据库强大功能的充分展现。在此之前,在 Redis 中执行类似 SQL 的查询非常麻烦。除了按键搜索之外,还必须遵循或设计许多非常规的方法来搜索已保存的数据。
RediSearch 模块自开发以来,在这方面带来了翻天覆地的变化。现在,各种搜索操作变得更加便捷,例如全文搜索、搜索结果聚合、排序等等。
这就是为什么我们在设置数据库时将 RediSearch 模块添加到我们的数据库中,以便能够通过各种参数搜索事件,所以让我们开始吧。
首先要做的是对要执行搜索的数据进行建模,并创建索引。索引越好,搜索性能就越高。
数据建模和索引创建
在“src”下创建一个名为repository的新目录,并在其中创建一个名为event.js的新文件,将以下代码粘贴到该文件中。
在上面的代码中,我们再次导入了在 db 目录中创建的 Redis 连接,因为这是我们通往 Redis 企业数据库的网关。现在我们来讨论一下分配给不同字段的不同“redis-om”数据类型。这里我们使用的数据类型主要有四种:字符串、文本、日期和点。
- 字符串:字符串数据类型通常应分配给我们想要执行精确匹配搜索的任何字段,例如具有明确值列表的字段,例如类别、类型、类型等。此类型映射到底层 RediSearch 类型中的TAG
- 文本:字符串和文本字段之间的主要区别在于,您可以在文本字段上执行全文搜索,而这在指定为字符串的字段上是不可能的。
- Point:此字段用于存储经纬度位置值,因此如果您打算执行基于位置的搜索,则应在此字段上使用 point 类型。此类型在底层 RediSearch 类型中映射到GEO
- 日期字段的意思就是与日期有关的。
有时,我们希望先查看最新的条目,反之亦然。为此,我们需要将字段标记为“可排序”,以便我们根据各种条件对搜索结果进行排序。您可以在此处
了解有关如何在 redis-om 中创建模式/实体的更多信息。
请注意,Schema 中的“dataStructure”字段有一个值为“HASH”,这告诉 Redis 我们希望使用哈希数据结构。这是必要的,因为 redis-om 默认使用RedisJSON数据结构,而我们在设置数据库时没有将其添加到数据库中,否则会抛出错误。
RedisJSON 是另一个 Redis 模块,它更适合存储类似 JSON 的数据,就像我们这里提到的那样,但我决定使用 HASH 数据结构,以便在本文中更专注于 RediSearch 模块。更多信息请点击此处
最后,要创建索引,您将在模式存储库上调用 createIndex() 方法。
现在我们已经掌握了完成这个神奇应用程序所需的所有拼图,让我们将它们拼凑在一起。
在 Redis 上构建事件管理平台
在controllers目录中,创建一个文件并将其命名为“event.js”,并将以下代码粘贴到文件中。
“createEvent()”控制器函数中没有发生太多事情,我们只是在将用户事件对象传递到导出的事件模式存储库后调用“createAndSave()”方法。
RediSearch 模块的真正强大之处从“getAllEvents()”控制器函数开始显现。在这里,我们可以使用 redis-om 库公开的一些便捷方法来获取所有事件,并对其进行排序以确保最新事件优先显示,同时还可以进行分页。是不是感觉很简洁呢?😉。
在基于 SQL 的数据库中,此查询将类似于以下内容SELECT * FROM table_name ORDER BY field DESC LIMIT limit OFFSET offset;
在 Redisearch 模块出现之前,所有这些在 Redis 中都并非易事。请注意,我们在 createdAt 字段上调用了“sortDescending”方法,这就是为什么我们在定义模式时将其标记为可排序。
这就是为什么我说搜索的性能取决于索引的质量。
这里另一个有趣的控制器函数是“getEventsNearMe()”函数。该函数使用用户提供的位置及其设置的距离,如果未提供距离,则在 10 公里半径范围内搜索。我们之所以能够做到这一点,是因为我们在创建架构时将“locationPoint”字段标记为“point”。
最后,还有一个“searchEvents”控制器函数,它基于两个条件搜索活动:活动类别和标题。当然,如果我们按类别搜索活动,那么搜索整个类别(例如会议、音乐会等)会更容易。但如果我们打算按标题搜索活动,那么期望用户记住活动的确切标题就不合理了。
这就是我们将标题字段指定为“文本”数据类型的原因,以便我们可以对其进行全文搜索,这意味着,如果用户记住他们正在寻找的事件标题中的特定短语,他们就可以通过该短语进行搜索,并且具有相似短语的各种事件将返回给他们。
好了,说得够多了,让我们完成应用程序的其他部分。你可能已经注意到,我们在事件控制器文件中使用了一些目前不存在的依赖项,所以让我们把缺失的部分补上。
在 utils 目录中创建一个名为“pagination.js”的新文件,并将以下代码复制并粘贴到其中。这只是为了处理结果分页。
还记得之前创建的中间件目录吗?现在在该目录中创建一个名为 index.js 的新文件,并将以下代码粘贴到该文件中。这将确保只有正确的用户才能访问应用程序的各个部分。
现在让我们将控制器插入到适当的路由中,以便以正确的方式处理用户请求。在 routes 目录中创建一个名为 event.js 的新文件,并将以下代码粘贴到其中。
最后,通过在 app.js 文件中导入事件路由模块,让服务器知道事件路由的存在。现在,你的 app.js 文件应该如下所示:
现在我们已经完成了,让我们测试一下事件管理应用程序的各种端点。启动 Postman 或你正在使用的任何其他 HTTP 客户端,创建一些事件、获取所有事件,并使用各种参数搜索事件。以下是我个人测试的一些截图。
我建议您打开 RedisInsight 来可视化您一直保存的一些数据。
使用 React 构建我们的事件管理应用程序的前端。
事件管理器应用程序的前端代码可以在这里找到,只需克隆代码库,按照设置指南操作,然后启动服务器和前端应用程序即可。您应该能够看到一些您创建的事件。使用各种参数执行一些搜索。
还有很多可以改进的地方,如下所示:
- 按日期范围搜索事件
- 按国家/地区搜索事件(我知道我们没有国家/地区字段,您只需使用该字段更新架构即可。不用担心您的索引,当您重新启动服务器时它将被重建)
- 修改活动信息,例如活动日期
- 删除事件...
恭喜你完成了这么多!你刚刚在 Redis 数据库上完全构建了你的事件管理应用程序👏🏼。
请在评论部分告诉我你的感受。
如果您希望探索 Redis 超出本文范围的内容,以下是一些有用的链接:
警告
Redis-om 仍处于预览阶段,在撰写本文时,其稳定性尚不足以用于生产环境。如果您打算在生产环境中使用 Redis,可以使用其他 Redis 客户端。您可以从此处推荐的其他客户端中进行选择。
这篇文章是与 Redis 合作撰写的。
文章来源:https://dev.to/imchaelowolabi/how-to-build-an-event-management-application-in-nodejs-react-on-redis-165如果您和我们一样喜欢与我们合作,并且希望继续为我们撰写文章,我们现在正在接受更多博客的申请。您可以点击此处申请