Javascript 当通过NodeJS获取JSON数据时,如何通过ExpressJS更新我的EJS模板?
我正在使用NodeJS调用一些api,并通过ExpressJS将它们传递给我的EJS模板,代码如下:Javascript 当通过NodeJS获取JSON数据时,如何通过ExpressJS更新我的EJS模板?,javascript,json,node.js,express,ejs,Javascript,Json,Node.js,Express,Ejs,我正在使用NodeJS调用一些api,并通过ExpressJS将它们传递给我的EJS模板,代码如下: app.get('/', function (req, res) { res.render('routes/index', { plLoopTimes: plLoopTimes, pl54Times: pl54Times }) }); 在本例中,plLoopTimes和pl54Times是由我从API获得的JSON填充的数组。在我的EJS模板中,我可以通过在两个数组上运行for
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模板中,有人有什么建议吗?我认为您做得不对。如果您需要实时行为,只需使用适当的工具即可。对于这种需要,我会使用。如果您需要旧的浏览器支持,也可以通过简单的ajax来实现,但是websockets相对于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。假设您没有遇到竞争条件,当您收到页面请求时,json实际上还没有准备好,那么大部分内容都是正确的。要访问模板中的plLoopTimes和PL54次,如果要将它们像这样传递给res.render(),只需执行以下操作:
<%= pl54Times.some.property %>
或者,如果您想循环该json中的项目数组,可以执行以下操作:
<% for(var i=0; i < arrayName.length; i++) { %>
<div><%= arrayName[i].some.property.to.display %></div>
<% } %>
希望这有帮助 对不起。。完全没有抓住问题的要害。。如果你想像那样实时更新代码,你要么需要使用guzgarcia建议的方法将数据推送到客户端,要么在客户端使用AJAX从服务器请求新数据。我需要用Python创建SocketIO应用程序吗?或者我可以把它写在节点中,也就是服务器端吗。Python中有一个用于SocketIO的函数。还提供了用于Flask和SocketIO集成的软件包。