Node Express如何将API返回变量传递至网页并格式化展示

方案一：使用模板引擎（EJS） #

Express无法直接往静态HTML文件传递变量，需要借助模板引擎实现页面渲染，这里以EJS为例：

1. 安装EJS依赖

npm install ejs

2. 调整项目结构
   将原index.html重命名为index.ejs，并放入项目根目录下新建的views文件夹：

项目根目录
├── node_modules
├── public
├── views
│   └── index.ejs
└── server.js

3. 修改server.js配置与路由逻辑

const express = require('express');
const axios = require('axios');

const app = express();
const PORT = process.env.PORT || 3001;

// 配置EJS为模板引擎
app.set('view engine', 'ejs');
// 保留静态资源目录配置
app.use(express.static('public'));

app.get('/', async (req, res) => {
    try {
        const response = await axios.get('https://api.chucknorris.io/jokes/random');
        const quote = response.data.value;
        // 渲染模板并传递quote变量
        res.render('index', { quote });
    } catch (error) {
        console.error(error);
        res.render('index', { quote: '获取笑话失败，请重试' });
    }
});

app.listen(PORT, () => {
  console.log(`Server listening on: http://localhost:${PORT}`);
});

4. 修改index.ejs显示变量

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
  <p>
    <%= quote %>
  </p>
  <script src="assets/js/script.js"></script>
</body>

</html>

方案二：前端异步请求数据（前后端分离模式） #

如果不想用模板引擎，可以通过前端单独请求接口获取数据，灵活性更高：

1. 修改server.js拆分路由

const express = require('express');
const axios = require('axios');

const app = express();
const PORT = process.env.PORT || 3001;

app.use(express.static('public'));

// 根路由直接返回静态HTML页面
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});

// 新增接口专门返回笑话数据
app.get('/api/quote', async (req, res) => {
    try {
        const response = await axios.get('https://api.chucknorris.io/jokes/random');
        res.json({ quote: response.data.value });
    } catch (error) {
        console.error(error);
        res.status(500).json({ quote: '获取笑话失败，请重试' });
    }
});

app.listen(PORT, () => {
  console.log(`Server listening on: http://localhost:${PORT}`);
});

2. 在public/assets/js/script.js中添加请求逻辑

// 使用原生fetch（无需额外引入依赖）
fetch('/api/quote')
  .then(res => res.json())
  .then(data => {
    document.querySelector('p').textContent = data.quote;
  })
  .catch(err => {
    console.error(err);
    document.querySelector('p').textContent = '获取失败，请稍后重试';
  });

// 也可以用axios，需要先在index.html头部引入：<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
/*
axios.get('/api/quote')
  .then(response => {
    document.querySelector('p').textContent = response.data.quote;
  })
  .catch(error => {
    console.error(error);
    document.querySelector('p').textContent = '获取失败';
  });
*/

3. 原index.html无需修改，保持静态页面结构即可

原代码问题说明 #

你之前使用res.send('index', quote)是错误用法：Express的res.send()仅支持单个核心参数，要么直接发送字符串/数据，要么发送文件。因此该写法要么返回字符串index覆盖页面，要么直接返回笑话文本，无法实现将变量注入HTML的需求。

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