在nodejs中从客户端将html发送到浏览器

Question

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

视图：HTML 响应 您可能希望通过向浏览器发送一些 HTML 来响应对应用程序的许多请求。 到目前为止，Express 使这比在原生 Node.js 中更容易，这对您来说并不奇怪。 Express 提供对许多不同模板引擎的支持，这些引擎可以使用可重用的组件以及应用程序中的数据，以智能方式更轻松地构建 HTML 页面。 Express 将这些编译在一起，并将它们作为 HTML 提供给浏览器。

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

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

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

Answer 1

这段引用的段落是否假设不存在 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);

Answer 2

是的，你是对的。

如果角度是存在的，所有的模板将建立在Angular ，因此，这足以通过已使用要显示的数据APIs 。 如果没有，您需要呈现完整的HTML View ，因此Template Engine会有所帮助。

在 Paragraph 中，正在考虑MVC VIEW ，因此他们假设没有front-end frameworks + API calls 。

Answer 3

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

1. 一种方法也是最常见/最传统的方法是使用 express js 作为普通的 web 服务器，控制器获取用户请求，然后模型处理数据，最后将该数据传递给 View（即MVC ）以呈现完整的 html页面并将其发送回客户端。

   所以你的前端是什么并不重要，它是Angular、React 还是 Vanilla ，express 并不关心它。 对于 express，所有 3 种类型（ Angular、React、Vanilla ）都是一堆JS文件和Html文件。 因此，您可以直接将这些静态文件作为 html 文件提供，或者也可以使用模板引擎来提供这些文件。 考虑一种情况，您希望将一些数据数组附加到Angular/React 或 Vanilla html文件的<script></script>标签。 现在你必须使用模板引擎来做到这一点。

2. 第二种方法是使用 express 服务器作为CRUD/RESTfull 或 Graphql API来提供 JSON 数据。 在这种情况下，我们将静态文件（HTML、css、js）保存在单独的快速服务器中，该服务器仅将这些文件提供给客户端。 和单独的express Data API用于与数据库交互。 因此，一旦静态文件呈现给浏览器，客户端 JS 就会向 express API 发送请求以获取完成应用程序所需的额外数据。

3. 第三种方法是使用 express js 来服务器端渲染(SSR) Angular / React。 很久以前，我创建了一个快速服务器来在发送到客户端之前在服务器上呈现 React JS。 通过这种方式，我能够管理良好的 SEO 并在管理单页功能的同时尽快为客户提供视觉效果（类似于NextJS 的工作方式）。 使用这个渲染服务器，我有单独的 RESTapi 可以访问数据库。

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

正如我在上面所说的，如果您想在发送到客户端之前将一些数据（或其他内容）从数据库附加到 Angular html 文件，该怎么办，

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

您需要使用模板引擎。（但并非适用于所有用例。使用 Angular/React 时大部分时间不需要）