如何使用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?
装备您的应用模板引擎:
在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
路径;因为我们为我们的观点设定了这条道路。
谢谢你,当然它的工作原理:)但有一个问题 - 现在,当用户在域名后面提供任何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
您可能想查看[模板引擎](http://expressjs.com/de/guide/using-template-engines.html),例如[pug](https://pugjs.org/api/ getting-started.html)例如 –