Question

我的网页上有一个小index.html页：

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

它位于我的应用的/public文件夹中，并且感谢以下server.js文件 - 它有效：

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？

Answer 1

为您的应用配备模板引擎：

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()使用所需数据呈现模板：

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集合并打印出来：

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

请注意，您的index.html应位于./views/index.html路径中;因为我们为观点设定了这条路径。

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

1 个答案: