在nodejs中从客户端向浏览器发送html答案

【问题标题】：Sending html to browser from client in nodejs在nodejs中从客户端向浏览器发送html
【发布时间】：2021-03-01 09:06:47
【问题描述】：

来自：书 - Getting MEAN with Mongo, Express..

视图：HTML 响应您可能希望响应许多通过向您的应用程序发送一些 HTML 到浏览器。到现在为止，Express 制作的产品对您来说已经不足为奇了这比在本机 Node.js 中更容易。 Express 提供支持许多不同的模板引擎，使构建更容易以智能方式使用可重用组件以及来自您的应用程序的数据。 Express 将这些编译在一起并提供服务它们以 HTML 格式发送到浏览器。

他们说 Express 支持许多模板引擎，可以轻松地将 html 发送到浏览器。
我的问题是，如果我们使用 MEAN，这意味着 Angular 被用作前端，这也意味着在浏览器上显示数据应该是 Angular 的责任。

Nodejs 应该向 Angular 发送数据，而 Angular 应该在浏览器上显示它。如果这个理解是正确的，那为什么还需要 Express 的模板引擎呢？

这个引用的段落是否假设没有 Angular，因此 html 必须从 nodejs 直接发送到浏览器？

【问题讨论】：

标签： javascript node.js angular

【解决方案1】：

您可以通过多种方式使用快速服务器。

一种方式，也是最常见/传统的方式是使用将 js 表达为普通的 Web 服务器，控制器获取用户请求然后 Models 处理数据并最终将该数据传递给 View（即 MVC ）呈现完整的 html 页面并将其发送回客户端。

所以不管你的前端是什么，天气都是 Angular， React 或 Vanilla，express 不在乎。对于快递，所有 3 种类型（Angular、React、Vanilla）都是一堆 JS 文件和 Html 文件/秒。因此，您可以直接将这些静态文件作为 html 提供文件，否则，您还可以使用 模板引擎 为这些文件提供服务文件。考虑一下您想要附加一些数据的情况数组 到 Angular/ React 或 Vanilla 的 <script></script> 标记 html 文件。现在你必须使用模板引擎来做到这一点。
第二种方法是使用 express 服务器作为 CRUD / RESTfull 或 Graphql API 来提供 JSON 数据。在这种情况下，我们将静态文件（HTML、css、js）保存在 separate 快递服务器中，该服务器仅用于将这些文件提供给客户端。并且单独的 express Data API 用于与数据库交互。因此，一旦静态文件呈现给浏览器，客户端 JS 就会向 express API 发送请求，以获取完成应用程序所需的额外数据。
第三种方法是使用 express js 来服务器端渲染 (SSR) Angular / React。很久以前，我创建了一个快速服务器来在服务器上渲染 React JS，然后再发送到客户端。通过这种方式，我能够管理良好的 SEO 并在管理单页功能的同时尽快为客户提供视觉效果（类似于 NextJS 的工作方式）。有了这个渲染服务器，我有单独的 RESTapi 可以访问数据库。

Nodejs 应该将数据发送到 Angular 并且 Angular 应该将其显示在浏览器。如果这种理解是正确的，那么为什么要进行模板化需要 Express 引擎吗？

正如我在上面所说的，如果你想在发送到客户端之前将一些数据（或其他东西）从数据库附加到 Angular html 文件，

<script>
  window.__MY_DATA__ = dataFromDb
</script>

您需要使用模板引擎。（但并非适用于所有用例。大多数情况下，使用 Angular/React 时不需要）

【讨论】：

【解决方案2】：

是的，你是对的。

如果有Angular，所有的模板都将建立在Angular上，所以传递使用APIs显示的数据就足够了。 如果没有，你需要渲染完整的HTML View，所以Template Engine会有帮助。

在段落中，在MVC 中占大约VIEW，所以他们假设没有front-end frameworks + API calls。

【讨论】：

【解决方案3】：

这个引用的段落是否假设不存在 Angular 因此html必须从nodejs直接发送到浏览器？

你说得对。 Express 可以在响应中发送 HTML 文件，但如果您的应用程序有一个单独的后端（许多应用程序都有），那么 Express 会将数据发送到您的前端，而 Angular 会处理该数据的显示方式。

这是 Express 在路由请求中发送文件的示例。

const express = require('express');
const app = express();
const path = require('path');

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.listen(8080);

【讨论】：