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

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 文件？

how can I populate html file with results from json while using express.js?

node.js

express

twitter-bootstrap

angularjs

mean-stack