组织后端（Node）进程和使用这些进程的一部分的前端（Vue / Nuxt）的最佳方式

Posted 2023-02-22

【中文标题】组织后端（Node）进程和使用这些进程的一部分的前端（Vue / Nuxt）的最佳方式

【英文标题】：Best way to organise back end (Node) processes and front end (Vue / Nuxt) that uses part of these processes

【发布时间】：2019-10-09 23:25:52

【问题描述】：

我有一些小型节点应用程序做一些基本的事情，比如检查和填充我的数据库（由 CRON 触发）。在我的 Nuxt 应用程序中，我需要使用这些 Node 应用程序内部的部分内容。组织它的最佳方式是什么，我是将它们分开还是将它们与我的 Nuxt 应用程序融合在一起？我是从这些节点应用程序中复制我需要的东西并在 Nuxt 中进行调整，我是使用服务器端中间件将这些节点应用程序添加到我的 Nuxt 项目中，还是我使用 express 创建我的 Nuxt 应用程序并使用 /server/index.js以某种方式添加我的节点应用程序？

让我们举个例子。您有一个节点应用程序，它会每小时检查一些数据并填充数据库。在 Nuxt 应用程序中，您有一个显示数据库内容的页面，但您首先要确保自上一小时以来无需在数据库中添加任何新内容。我必须在每个 Nuxt 页面中运行的代码与 Node 应用程序的代码相同（检查并填写数据库）。在两个地方有两次相同的代码看起来有点愚蠢（并且难以维护和更新）。但我不确定如何让这个节点应用程序在我的 Nuxt 应用程序中每小时运行一次。任何建议将不胜感激

【问题讨论】：

这是一个相当高级的问题。一般来说，将前端和后端解耦是最佳的，因为这样您的后端可以服务于其他前端（即移动端和桌面端）。就在两个地方有相同的代码而言，这是一个您将开发一个微服务来处理前端和后端的更改检测的场景。这使您可以遵循 DRY（不要重复自己）。因此，在 node 中，理解微服务是必不可少的。

这一切对我来说仍然很新，但我明白你说的话。我将学习更多关于微服务的知识，它看起来像是要走的路。如果我理解得很好，我将能够从我的服务器/CRON 和我的 Nuxt 应用程序启动我的微服务。微服务将检测来自哪里的请求并采取不同的行动......？我没有意识到微服务是 Node.js 中如此重要的一部分。尽管看起来可能并非如此，但您的回答非常有价值！

这听起来像是一个合适的配置。当你构建它时，试着用你的代码编辑这个问题，我会给出一些反馈。 Node 中并不总是需要微服务，具体取决于用例。但很多时候，这是处理多个组件需要相同功能的情况的最明智的方法。我的应用程序中的一个示例是我使用 Axios HTTP 处理程序，而不是在每个组件中初始化 Axios，我构建了一个可以为每个组件提供服务的 Axios 微服务，从而将我的 Axios 实例减少到 1 个。我将发布一些步骤。

【参考方案1】：

这里有一个控制流，可以帮助您思考设计这个 CRON 微服务。有很多方法可以做到这一点，这可能不是最好的方法，但我认为它适用于您的用例。

在您的服务器中有一个services 目录（也可以称为middleware）。 包括一个 cron.js 文件，其中包含任务运行器的逻辑。 在cron.js 内，从节点向Vue 发出预定响应，例如res.JSON(message: 'checkNewData') 之类的JSON 关键字。这将被称为“服务器发送事件”。服务器发送的事件只是在节点环境中按照定义的时间表自主发生的事件。 在 Vue 中，在根级别 App.vue，使用 created() 挂钩注册一个事件侦听器，该侦听器将侦听服务器发送的 "checkNewData" JSON 对象。当这个事件监听器听到 JSON 响应时，它应该触发 Vue 检查适当的组件，打包任何新数据，并通过 post 或 put http 调用将其发送到数据库，具体取决于您是否添加新数据，或用新数据替换旧数据。

此配置将为您提供自动更新的闭环系统。下一个挑战是让这个操作特定于客户端，但是一旦你开始工作，这是需要担心的事情。同样，其他人可能对此有不同的方法，但这是我处理流程的方式。

【讨论】：

没问题，如果您有任何问题，请告诉我