如何合并端点实现API响应数据在HTML中的高效展示？

当然可以合并两个端点，直接在后端把API数据注入HTML后返回，避免前端额外的请求。下面提供两种实用方案：

方案一：使用模板引擎（推荐，适合复杂页面） #

Express支持多种模板引擎，这里以EJS为例（语法接近原生HTML，学习成本低）：

1. 安装EJS

npm install ejs

2. 配置Express使用EJS
   修改你的后端代码，添加模板引擎配置：

const path = require('path');
// rest of the code

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views')); // 指定模板文件存放目录

// rest of the code

3. 将HTML改为EJS模板
   在项目根目录创建views文件夹，把原home.html改名为home.ejs，并将需要填充数据的位置替换为EJS占位符：

<!DOCTYPE html>
<html>
<head>
    <title>天气信息</title>
</head>
<body>
    <div id="test"><%= weatherData.resolvedAddress %></div>
    <div id="test1"><%= weatherData.description %></div>
    <div id="test2"><%= weatherData.days[0].temp %></div>
    <div id="test3"><%= weatherData.days[0].tempmax %></div>
    <div id="test4"><%= weatherData.days[0].tempmin %></div>
    <div id="test5"><%= weatherData.days[0].description %></div>
</body>
</html>

4. 合并端点，渲染模板并传数据
   删除原来的两个端点，替换为单个端点：

// rest of the code

app.get("/", async(req, res) => {
    const weatherData = await fetchData();
    res.render('home', { weatherData }); // 渲染模板并传入数据
});

// rest of the code

用户访问根路径时，后端会先获取API数据，再渲染EJS模板生成带数据的HTML返回，前端无需额外发请求。

方案二：直接读取HTML并替换占位符（适合简单场景，无需额外依赖） #

如果不想用模板引擎，可以直接读取HTML文件，手动替换数据占位符：

1. 修改HTML文件，添加占位符
   在public/home.html中，把需要填充数据的位置替换为自定义占位符：

<!DOCTYPE html>
<html>
<head>
    <title>天气信息</title>
</head>
<body>
    <div id="test">{{resolvedAddress}}</div>
    <div id="test1">{{description}}</div>
    <div id="test2">{{temp}}</div>
    <div id="test3">{{tempmax}}</div>
    <div id="test4">{{tempmin}}</div>
    <div id="test5">{{dayDescription}}</div>
</body>
</html>

2. 合并端点，处理HTML并返回
   修改后端代码，读取HTML文件后替换占位符：

const fs = require('fs').promises;
const path = require('path');

// rest of the code

app.get("/", async(req, res) => {
    const weatherData = await fetchData();
    // 读取HTML文件内容
    let htmlContent = await fs.readFile(path.join(__dirname, 'public/home.html'), 'utf8');
    // 替换所有占位符
    htmlContent = htmlContent
        .replace('{{resolvedAddress}}', weatherData.resolvedAddress)
        .replace('{{description}}', weatherData.description)
        .replace('{{temp}}', weatherData.days[0].temp)
        .replace('{{tempmax}}', weatherData.days[0].tempmax)
        .replace('{{tempmin}}', weatherData.days[0].tempmin)
        .replace('{{dayDescription}}', weatherData.days[0].description);
    // 返回处理后的HTML
    res.send(htmlContent);
});

// rest of the code

方案对比 #

• 模板引擎方案：代码更易维护，适合有大量动态内容的页面，支持循环、条件判断等逻辑。
• 占位符替换方案：无需额外安装依赖，适合简单页面，但数据量大时替换逻辑会变得繁琐。

内容的提问来源于stack exchange，提问作者harrnui