Question

我有一个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} `;
   });
});

但是，我不想让客户端每次都调用以获取包含相同数据的文件。我研究了SSR框架，但与此同时，我不希望服务器一遍又一遍地渲染相同的.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>

Answer 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内容。让我知道我的回答是否完全没有帮助。

Answer 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？

2 个答案: