Express Router渲染和公共靜態文件

Question

我在index.js有以下代碼：

var express = require('express');
var app     = express();
var PORT    = 3000;
var routes = require('./scripts/routes/routes');

app.set('views', './views');

app.set('view engine', 'pug');

app.use(express.static('public'));

app.use('/', routes);

app.listen(PORT, function() {
  console.log('App running');
});

在我的routes.js ：

var express = require('express');
var router = express.Router();
var request = require('request');

router.get('/', function (req, res) {
  request('https://www.reddit.com/r/earthporn.json', function(error, response, body) {
    if (!error && response.statusCode == 200) {
      var data = JSON.parse(body);
      var items = data['data']['children'];
      var urls = items.map(function(item) {
        item_data = item['data'];
        item_preview = item_data['preview'];
        item_images = item_preview['images'];
        return item_images.map(function(image) {
          return image['source']['url'];
        });
      });

      res.render('index', { subReddit: 'earthporn', images: urls });
    }
  });
});

router.get('/subreddit/:subreddit', function (req, res) {
  var subreddit = '/r/' + req.params['subreddit'];
  request('https://www.reddit.com'+ subreddit +'.json', function(error, response, body) {
    if (!error && response.statusCode == 200) {
      var data = JSON.parse(body);
      var items = data['data']['children'];
      var urls = items.map(function(item) {
        item_data = item['data'];
        item_preview = item_data['preview'];
        item_images = item_preview['images'];
        return item_images.map(function(image) {
          return image['source']['url'];
        });
      });

      res.render('index', { subReddit: subreddit, images: urls });
    }
  });
});

module.exports = router;

在我的views/index.pug ：

html
  head
    link(href='app.css' rel="stylesheet")
    title Hello World!
  body
    div(class="container")
      h1= subReddit

      div(class="images_gird")
        each url in images
          div(class="image", style="background-image: url('"+ url +"')")

在我的瀏覽器中，如果我訪問localhost:3000 ，則一切正常，我看到了來自subreddit earthporn的圖像列表。

但是，例如，如果我訪問localhost:3000/subreddit/cute ，則會在日志中得到此信息：

express:router dispatching GET /subreddit/cute +2s
  express:router query  : /subreddit/cute +1ms
  express:router expressInit  : /subreddit/cute +1ms
  express:router serveStatic  : /subreddit/cute +0ms
  express:router router  : /subreddit/cute +5ms
  express:router dispatching GET /subreddit/cute +0ms
  express:view lookup "index.pug" +4s
  express:view stat ".../views/index.pug" +0ms
  express:view render ".../views/index.pug" +0ms
  express:router dispatching GET /subreddit/app.css +83ms !! <<--- Why is this happening?
  express:router query  : /subreddit/app.css +0ms
  express:router expressInit  : /subreddit/app.css +1ms
  express:router serveStatic  : /subreddit/app.css +0ms
  express:router router  : /subreddit/app.css +0ms
  express:router dispatching GET /subreddit/app.css +1ms

這使我無法呈現用戶在URL中輸入的subreddit的圖像。 我不知道為什么地球上用subreddit/app.css表示接收請求，這沒有任何意義。

在網絡標簽中的Chrome中，當我輸入localhost:3000/subreddit/cute我確實看到了兩個請求：

GET http://localhost:3000/subreddit/cute在GET http://localhost:3000/subreddit/app.css

所以也許這是Chrome中的問題，我真的不明白。 對於請求localhost:3000 ，一切正常，僅發出了一個請求。

Answer 1

這條線

express:router dispatching GET /subreddit/app.css +83ms

正在嘗試請求https ://www.reddit.com'+ app.css +'。json'，這是錯誤的，因此需要花費很長時間。

在index.pug中，嘗試將app.css的完整網址

Answer 2

感謝您的回答。 通過在我的index.pug執行/app.css來修復它