如何使用express.js填充json结果的HTML文件？

我有一个网页的小index.html页：如何使用express.js填充json结果的HTML文件？

... 
<body> 
    <div id="photos"> 
    </div> 
</body> 
...

它被放置在我的应用程序，并感谢以下server.js文件的/public文件夹 - 它的工作原理：

mongoose.connect(properties.get('db.path')); 

app.use(express.static(__dirname + '/public')); 
app.use('/bower_components', express.static(__dirname + '/bower_components')); 
app.set('trust proxy'); 

app.get('/:hashtag', function(req, res){ 
    var query = Photo.find({"hashtags":{$in: [req.params.hashtag]}}); 
     query.exec(function(err, photos) { 
      if(err) { 
       sendError(res, err); 
       return; 
      } 
      res.json(photos); 
    }); 
}); 

console.log('App listening on port ' + port); 
server.listen(port);

当用户进入到mydomain.com，他看到那个空的html文件。现在，您在我的server.js中看到，我可以在我的查询中添加＃标签，因此用户可以输入mydomain.com/test。目前，当他这样做，他所看到的是一个JSON文件，该文件是空的：

[]

或有一些内容：

[{"_id":"some_id","photo_url":"some_url","hashtags":["photo","test"]}, 
{"_id":"some_id2","photo_url":"some_url2","hashtags":["photo2","test"]}]

我怎样才能让我的嵌入这些图像的网页，而不是向用户显示普通的json？

来源

2017-11-18 user3766930

您可能想查看[模板引擎]（http://expressjs.com/de/guide/using-template-engines.html），例如[pug]（https://pugjs.org/api/ getting-started.html）例如 –

装备您的应用模板引擎：

在

app.get('/:hashtag', function(req, res){ 
    var query = Photo.find({"hashtags":{$in: [req.params.hashtag]}}); 
     query.exec(function(err, photos) { 
      if(err) { 
       sendError(res, err); 
       return; 
      } 
      // res.json(photos); 
      res.render('index', { title: 'my photos', photos: photos }) 
    }); 
});

index.html环比photos收集并打印时间了：

app.use(express.static(__dirname + '/public')); 
app.use('/bower_components', express.static(__dirname + '/bower_components')); 
app.set('trust proxy'); 
// config views ============================================= 
app.set('views', './views') // specify the views directory 
app.set('view engine', 'ejs') // register the template engine 
=============================================================

使用res.render()，而不是res.json()与所需的数据使您的模板：

... 
<body> 
    <div id="photos"> 
     <% photos.forEach(function(photo) { %> 
      <img src=<% photo.photo_url %> > 
     <% }); %> 
    </div> 
</body> 
...

请注意，您的index.html应驻留在./views/index.html路径;因为我们为我们的观点设定了这条道路。

来源

2017-11-18 10:00:24 dNitro

谢谢你，当然它的工作原理:)但有一个问题 - 现在，当用户在域名后面提供任何hashtag时，它就起作用。我怎样才能使它工作，以便它运行查询'var query = Photo.find（）;'当用户不提供任何hashtag？例如，当他转到“mydomain.com/hashtag”时，它现在会查找具有特定hashtag的所有照片，但我应该如何修改server.js文件以支持'mydomain.com'上的条目？ – user3766930

@ user3766930定义一个根路由：'app.get（'/'，...'就像'app.get（'/：hashtag'，...'并运行'var query = Photo.find（）; '查询，而不是获取所有照片和服务，就像我们用** hashtag ** ed版本所做的一样，并查看[express]（http://expressjs.com/en/4x/api.html）文档; ） – dNitro

非常感谢@dNitro :) – user3766930

如何使用express.js填充json结果的HTML文件？

回答

相关问题