如何使用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文件？

回答

相關問題