使用Node、express和axios来拉API，想要将结果字符串发送到我的index.html，但有问题。要么覆盖我的页面并只显示字符串，要么我无法访问我的变量。
server.js
const express = require('express');
const axios = require('axios');
const app = express();
const PORT = process.env.PORT || 3001;
app.use(express.static('public'));
app.get('/', async (req, res) => {
try {
const response = await axios.get('https://api.chucknorris.io/jokes/random');
console.log(response.data.value);
let quote = response.data.value;
res.send('index', quote);
} catch (error) {
console.error(error);
}
});
app.listen(PORT, () => {
console.log(`Server listening on: http://localhost: ${PORT}`);
});
index.html
<!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>
<!-- How to access "quote" here so I can format it how I want -->
</p>
<script src="assets/js/script.js"></script>
</body>
</html>
正在获取正确的数据，但无法对其进行格式化。欢迎提出任何建议。
不要使用静态index.html，而是在htmlTemplate:等函数中创建它
function htmlTemplate(quote) {
return `
<!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>`
}
然后，在响应中调用它：
// …
const quote = response.data.value;
res.send(htmlTemplate(quote));
如果您需要使用静态HTML，请在其中添加一些唯一的可替换标记。在服务器上读取时，搜索并替换，例如：myHtml.replace('__QUOTE__', quote)
安全性，只有当您信任外部API响应时才执行此操作。换句话说，他们将能够在你的网站上注入他们想要的任何东西。