通过 NodeJS 获取 JSON 数据时，如何通过 ExpressJS 更新我的 EJS 模板？

Posted 2023-03-07

【中文标题】通过 NodeJS 获取 JSON 数据时，如何通过 ExpressJS 更新我的 EJS 模板？

【英文标题】：When getting JSON data via NodeJS, how would I update my EJS template via ExpressJS?

【发布时间】：2017-05-07 11:12:25

【问题描述】：

我正在使用 NodeJS 调用一些 API，并使用以下代码通过 ExpressJS 将它们传递给我的 EJS 模板：

app.get('/', function (req, res) 
res.render('routes/index', 
    plLoopTimes: plLoopTimes,
    pl54Times: pl54Times
)
);

在本例中，plLoopTimes 和 pl54Times 是由我从 API 获得的 JSON 填充的数组。在我的 EJS 模板中，我可以通过在两个数组上运行 forEach 来简单地获取数据。我面临的问题是当我第一次启动节点服务器时，我从 API 获取新数据，并且新数据被输入 EJS 模板，但我想每分钟轮询 API 并获得新数据数据。现在，我确实在我的服务器端脚本上使用setInterval() 每分钟调用一次 API，但我不知道如何在不刷新整个页面的情况下将新数据传递到 EJS 模板中，这是我不想要的去做。我试图创建一个客户端脚本来更改要显示数据的元素的innerhtml，但是如果我在脚本文件中输入 EJS 语法并将其传递给innerHTML，则 EJS 模板不表达该语法，相反，我的脚本只是将 EJS 字符串输出到页面中。那么，对于如何将服务器端代码中的变量更新到客户端的 EJS 模板中，有人有什么建议吗？

【参考方案1】：

我认为你做错了。如果您需要实时行为，只需使用正确的工具即可。对于这个需要，我会使用SocketIO。如果你需要旧的浏览器支持，你也可以通过简单的 ajax 来实现，但是 web sockets 相对于 ajax 的好处是很大的。

Socket.io

这是一个简单的 SocketIO 服务器，每 1 分钟向所有客户端发送数据。

import socketio from 'socket.io';
import  DataRepository  from 'repositories';


const server = http.createServer();
const io = socketio(server);

io.on('connection', (client) => 
  ((interval = 60000, io) => 
    setInterval(() => 
      const data = DataRepository.fetch();
      client.emit('new', data);
    , interval);
  )();
);

所有客户端只需要创建一个SocketIO实例并监听new：

const socket = io('http://yoursite.com:port');
socket.on('emit', data => 
  updateView(data);
);

function updateView ( plLoopTimes, pl54Times) 
  plLoopTimes.forEach(t => 
    // update things
  );
  pl54Times.forEach(t => 
    // update things
  );

---

后备

另一种方法 - 更经典 - 是在客户端而不是服务器上定义间隔。因此，每次客户端请求视图的新版本时，服务器将视图呈现为字符串并发送回客户端。

这里我们只需要定义一个简单的路线来指向一个视图：

router
  .get('/looptimes', (req, res) => 
    const  plLoopTimes, pl54Times  = DataRepository.fetch();
    // render the file 'looptimes.ejs' to string
    const view = ejs.render('looptimes', 
      plLoopTimes, pl54Times
    );
    res.type('.html');
    res.send(view);
  );

在前端你只需要更新 HTML。

【讨论】：

我是否必须在 Python 中创建 SocketIO 应用程序？或者我可以在 Node 中编写它，这将是服务器端？

你可以。 Python 中有一个用于 SocketIO 的package。还有一个用于 Flask 和 SocketIO 集成的包。

【参考方案2】：

假设您没有遇到竞争条件，即当您收到页面请求时，json 实际上还没有准备好。要访问模板中的 plLoopTimes 和 pl54Times，如果您将它们传递给 res.render()，您只需要执行以下操作：

<%= pl54Times.some.property %>

或者，如果您想遍历该 json 中的一组项目，您可以这样做：

<% for(var i=0; i < arrayName.length; i++)  %>
    <div><%= arrayName[i].some.property.to.display %></div>
<%  %>

希望这会有所帮助！

【讨论】：

对不起.. 完全错过了问题的重点.. 如果你想像这样实时更新代码，你要么需要使用像 guzgarcia 建议的东西来将数据推送到客户端或在客户端使用 AJAX 从您的服务器请求新数据。