如何在没有客户端 JavaScript 的情况下使用 JSON 数据呈现静态 HTML？
Posted
技术标签:
【中文标题】如何在没有客户端 JavaScript 的情况下使用 JSON 数据呈现静态 HTML？【英文标题】：How to render static HTML with JSON data with no client-side javascript? 【发布时间】：2019-04-10 06:22:44 【问题描述】：我有一个 json 文件，其中包含我想在网站上显示的数据数组，目前，我只使用 javascript 并使用 fetch 作为：
fetch('file.json').then(response =>
return response.json();
).then(response =>
//response = list: [item: 1, item: 2, item: 3]
response.list.forEach(listItem =>
document.body.innerhtml += `$listItem.item `;
);
);
但是，我不想让客户端每次都调用来获取包含相同数据的文件。我研究了 s-s-r 框架，但同时，我不希望服务器一遍又一遍地呈现相同的 .html 文件。
我正在寻找的是一种使用来自此 .json 的数据呈现 .html 文件并将其作为静态页面托管的方法（首选 Node.js）。是否有一个节点模块或脚本可以将此页面呈现为 .html 文件而没有要求，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
1 2 3 4
</body>
</html>
【问题讨论】：
阅读这篇文章你可能会发现Awesome Universal Rendering Awesome 【参考方案1】：我可能错了，但我对您的问题的理解是您可能希望将 HTML 作为响应呈现。因此，如果您想将 HTML 作为响应呈现，我将编写以下代码：
const http = require('http');
const fs = require('fs');
const onRequest = (request, response) =>
response.writeHead(200,
'Content-Type': 'text/html',
);
fs.readFile('./index.html', null, (error, data) =>
if (error)
response.writeHead(404);
response.write('File Not Found.');
else
response.write(data);
response.end();
);
;
http.createServer(onRequest).listen(8000);
诀窍是将Content-Type 设置为text/html 以将index.html 呈现为网站页面。
您可以修改上面的代码来编辑 index.html 内容。
如果我的回答根本没有帮助，请告诉我。
【讨论】：
不，我想读取非 html 数据（JSON 或 .js 数组）并将它们转换为列表项。【参考方案2】：如果您强烈反对不使用客户端 javascript，而只想在服务器端呈现它，也许您应该研究类似 EJS 的东西。 使用客户端 javascript/jquery 渲染通常是“更好的做法”，因此更容易制作动态，但是...
有了这个很容易做到。 他们的网站上有关于如何使用它的示例，但是一旦你将它安装在服务器端，它实际上就像......
app.set('view engine', 'ejs');
// your server code
app.render('index.ejs', "foo": "bar" );
您的 index.ejs 语法类似于
<p> <%= foo %> </p>
哪个会渲染到
<p> bar </p>
【讨论】：
以上是关于如何在没有客户端 JavaScript 的情况下使用 JSON 数据呈现静态 HTML？的主要内容，如果未能解决你的问题，请参考以下文章
如何在没有合并提交或使用 CLI 的情况下使 GitHub 分叉保持最新？
VueJS - 如何在没有任何硬代码的情况下使组件完全动态化
如何在不需要任何重定向配置的情况下使 TCP 服务器在路由器 (NAT) 后面工作