Question

我正在使用Express.JS创建一个Web应用程序，以便从两个不同的Web服务中提供一些数据并将其呈现在视图中（我使用EJS来呈现我的模板）。< / p>

GET / ws / breaches？index = [正整数]            - 此Web服务返回一个带有＆＃34;结果的对象＆＃34;包含的财产             最多20个违规站点的阵列，从该站点开始             提供索引（例如调用/ ws / breaches？index = 0将返回20             最后违反网站，/ ws / breaches？index = 20 20 next，等等）            - 违规站点对象包含以下信息：                - site：违规站点的域名                - 日期：违规的时间，以毫秒为单位                - 号码：泄露的帐户数量

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

app.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;

index.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请求以获取该数据是没有意义的（并且不可能）。您可以在＆＃34; router.get（＆＃39; /＆＃39;，函数（req，res）{＆＃34;函数中获取该数据，并将结果作为变量传递给您的视图，就像您正在做的那样使用侧栏var，但这似乎不是你要求的。

要回答您的具体问题，您要做的是 - 一旦html进入浏览器，您就会想要调用这两个端点并使用javascript更新dom。有很多方法可以做到这一点。为简单起见，您可以在div下添加一个脚本标记，在页面加载（Javascript that executes after page load）上发出ajax请求（How to make an AJAX call without jQuery?）到/ ws / breaches？index = [正整数]和/ ws / icon？site = [网站的域名]并使用结果更新dom（https://www.w3schools.com/js/js_htmldom_html.asp）

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

2 个答案: