随着面向服务器的开发的发展，当需要从服务器获取模板时，需要将 HTML 代码发送到客户端。在本文中，我们将考虑实现此目的的主要方法。所有这些方法都将使用 javascript，但它们的本质可以在其他编程语言中体现出来。

让我们直接转到代码，看看如何在项目中实现这一点。

后端

考虑到后端，值得注意的是，在客户端我们必须从某个地方接收模板。为此，我们可以创建一个 API 路由，通过该路由我们将从服务器获取 HTML。首先，让我们创建需要发送到客户端的 HTML 代码：

**表单.html**

Contact Us

  Name:
  



  Email:
  



  Message:

  



  Submit

这是一个简单的联系表单。如果可以在服务器上编辑，然后在客户端编辑，并且不仅可以在一个网站上编辑，还可以在多个相关网站上编辑，那就太酷了。

为此，让我们创建一个 API 路由，通过该路由我们将从服务器接收 HTML。对于后端部分，我们将使用 Node.js。我们将在其上执行此操作的框架是 Express.js。它是当今最流行的框架之一，非常适合我们正在解决的任务。首先，我们指定将处理 HTML 的控制器：

const express = require("express");
const expressRouter = express.Router();
const path = require("path");

const formController = (req, res) => {
  res.sendFile(path.join(__dirname, "../form.html"));
};

expressRouter.use("/getForm", formController);

然后，您需要将控制器连接到 `/api`，以免将常规站点路由与后端路由混淆。在 express.js 中有一个应用程序入口点，所有内容都在此初始化。这是我们需要导入控制器的地方：

**应用程序.js**

const express = require("express");
const path = require("path");
const bodyParser = require("body-parser");
const cors = require("cors");
const PORT = 8000;
const app = express();
const routes = require("./routes/formController");

app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors({ origin: true, credentials: true }));

app.set(express.static(path.join(__dirname, "src")));

app.use("/api", routes);

app.listen(PORT);

之后，我们应该在网站上有一个路由 `/api/getForm`，我们可以在那里发送 `GET` 请求。作为响应，我们将获得 HTML。

客户端

这里我们可以重点介绍几种从服务器获取 HTML 的方法。所有这些方法都基于向服务器发送请求。在 javascript 中，有一个 `fetch` 结构允许您执行类似操作（不考虑 `XMLHTTPRequest`，因为它已经很旧了。如果您不需要支持旧浏览器，那么我强烈建议不要使用它）。

1.使用第三方库

为了从服务器加载 HTML，我们可以使用 HMPL，这是一种用于从服务器向客户端显示 UI 的模板语言。它基于发送到服务器并处理成现成 HTML 的可定制请求。

为了使用它，让我们安装“hmpl-js”作为依赖项并创建一个脚本：

npm i hmpl-js

之后，我们导入“compile”函数：

import { compile } from "hmpl-js";

const templateFn = compile(
  `{{ src: "/api/getForm" }}`
);

const form = templateFn();

**结果：**

form = {
  response: