如何使用 Express.JS 在来自 Web 服务的请求中显示/获取数据?

Question

我正在使用Express.JS创建一个Web应用程序来提供来自两个不同Web服务的一些数据并将其呈现在视图中(我正在使用EJS来呈现我的模板)。

GET/ws/breaches？index=[a positive integer] - 此 Web 服务返回一个具有"result"属性的对象，其中包含 最多 20 个被破坏站点的数组，从 提供的索引(例如调用/ws/breaches？index=0 将返回 20 上次被破坏的网站，/ws/breaches？index=20 20 下一个，等等) - 违反的站点对象包含以下信息： - 站点：被破坏站点的域 - 日期：违规时间，以毫秒为单位 - 数量：泄露的帐户数量

GET/ws/icon？site=[site 的域] - 此网络服务返回所提供站点的图标的 URL - 图标大小为58x36像素

应用.js

var express = require('express'),
reload = require('reload'),
app = express();
app.set('port', process.env.PORT || 8888);
app.use(require('./routes/index'));
app.use(express.static('app/public'))
app.set('view engine', 'ejs');
app.set('views', 'app/views');
var server = app.listen(app.get('port'), function(){
console.log('Listening on port ' + app.get('port'));
});
reload(server, app);
module.exports = app;

索引.js

var express = require('express');
router = express.Router(),
connect = require('connect'),
urlParse = require('url').parse,
fs = require('fs');
var iconList = fs.readFileSync('app/data/icons.list').toString().split('n').filter(function(site){
return site;
});
var random = function(max){
return Math.floor(Math.random() * max);
};
var icon2Site = function(icon){
var site = icon.replace(/_/g,'.').replace(/.png$/,'');
return site;
};
var breaches = [];
// breaches generation
(function(){
for(var i =0; i< 1000; i++){
var index = random(iconList.length);
breaches.push({
site : icon2Site(iconList[index]),
date : Date.now() - 432000000 + random(432000000),
number : random(100000)
});
}
})();
breaches.sort(function(a,b){
return a.date - b.date;
});
var jsonResponse = function(res, code, body){
res.writeHead(code, {
'Content-Type' : 'application/json',
'Content-Length' : Buffer.byteLength(body)
});
res.end(body);
};
var server = connect()
.use(connect.logger('dev'))
.use(function(req,res,next){
req.parsedUrl = urlParse(req.url, true);
next();
})
.use(function(req,res,next){
if(req.parsedUrl.pathname !== '/ws/breaches'){
return next();
}
var index = parseInt(req.parsedUrl.query.index, 10) || 0;
jsonResponse(res,200,JSON.stringify({
result : breaches.slice(index, index + 20)
}));
})
.use(function(req,res,next){
if(req.parsedUrl.pathname !== '/ws/icon'){
return next();
}
var site = req.parsedUrl.query.site || "";
console.log(req.parsedUrl.query.site);
site = site.replace(/./g,'_') + ".png";
jsonResponse(res,200,JSON.stringify({
result : "https://s3-eu-west-1.amazonaws.com/static-icons/" + site
}));
})
.use(connect.static(__dirname + '/public', {
maxAge : 1000 * 60 * 5 // Five minutes of cache
}));

router.get('/', function(req, res) {
res.render('index', {server : server, sidebar:['/images/vertbar.jpg']} );
console.log(breaches);
});
module.exports = router;

index.ejs

<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9 right-column-augment">
<ul>
<% /* %> <% for(var i=0; i<tbd.length;i++){%> <% */ %>
<li><img src="<%= sidebar %>"></li>
<% /* %> <%}%> <% */ %>
</ul>
</div>

本质上，我不清楚如何将这些功能公开到我的路由中，以便最终可以在我的模板中呈现。

提前感谢！

Answer 1

只需在路由中执行函数的所有逻辑，然后将结果存储在某个对象中，并将其传递给 EJS 视图

将违规数组传递到违规 (.ejs) 视图的示例：

var breaches = [];
// breaches generation
(function(){
for(var i =0; i< 1000; i++){
var index = random(iconList.length);
breaches.push({
site : icon2Site(iconList[index]),
date : Date.now() - 432000000 + random(432000000),
number : random(100000)
});
}
})();
breaches.sort(function(a,b){
return a.date - b.date;
}); 
res.render('breaches', { breaches: breaches });
return;

在此示例中，您将违规行为添加到数组中，然后进行排序，然后将它们传递给名为违规(.ejs)的视图

然后，您可以在违规(.ejs)视图中循环浏览它们：

<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9 right-column-augment">
<ul>
<% for(var i = 0; i < breaches.length; i++){ %>
<li><%= breaches[i].site %></li>
<% } %>
</ul>
</div>

Answer 2

因此，看起来您想通过 ajax 获取该数据客户端。 index.ejs 所做的只是在您的服务器上构建一个 html 响应，并将其传递给浏览器。 由于所有这些都发生在您的服务器上，因此从您的视图 (index.ejs) 发出 http 请求以获取该数据是没有意义的(也是不可能的)。 您可以在"router.get('/'， function(req， res) {" 函数中获取该数据，并将结果作为变量传递给您的视图，就像您使用侧边栏 var 所做的那样，但这似乎不是您想要的。

为了回答你的具体问题，你想做的是 - 一旦html到达浏览器，你需要调用这两个端点并使用javascript更新dom。 有很多方法可以做到这一点。 为了简单起见，您可以在div 下添加一个脚本标签，该标签在页面加载时(页面加载后执行的 Javascript)向/ws/breaches？index=[一个正整数] 和/ws/icon？site=[站点的域] 发出 ajax 请求(如何在没有 jQuery 的情况下进行 AJAX 调用？) 并用结果更新 dom (https://www.w3schools.com/js/js_htmldom_html.asp)