ExpressJs沒有在某些路由上加載CSS

Question

我一直在使用MEAN堆棧，我遇到了這個問題，我的CSS無法在某些頁面上正確加載。 嘗試以下兩個鏈接進行比較/理解：

https://edmtl.herokuapp.com/song

https://edmtl.herokuapp.com/song/

Layout.jade：

doctype html
html
  head
    title= title
    meta(name="viewport" content="width=device-width, initial-scale=1.0")
    link(rel='stylesheet', href='css/bootstrap.css')
    link(rel='stylesheet', href='css/style.css')

app.js：

var song = require('./routes/addSong');
app.use('/song', song);

路線/ addSong.js：

var express = require('express');
var router = express.Router();
var db = require('mongoose-simpledb').db;
/* GET home page. */
router.get('/', function(req, res) {
    res.render('addSong', {title: 'Add A Song'});
});

router.post('/createNew', function(req,res){
    var song = new db.Post({
        name: req.body.songname,
        artist: req.body.artist.split(","),
        remix: req.body.remix,
        genre: req.body.genre,
        url: req.body.url,
        description: req.body.description,
        blogger: req.body.blogger
        });
    song.save(function (err,song){
        if(err) return console.error(err);
        res.send(song);
    });
});

router.get('/:songid', function(req,res){
    db.Post.find({_id: req.param('songid')}, function(err, song){
        if (err) return console.error(err);
        res.render('song', {title: song.name,
                            songInfo: [song]});
    });
});

module.exports = router;

addSong.jade：

擴展布局

block content
    center
        div(style="text-align: left; width: 600px")
            form(method='POST' action='/song/createNew')
                div
                    label(for='songname') Song Name:
                    input(type='text' name='songname')
                div
                    label(for='artist') Artist:
                    input(type='text' name='artist')
                div
                    label(for='remix') Remixed By:
                    input(type='text' name='remix')
                div
                    label(for='genre') Genre:
                    ul
                        li
                            input(type="checkbox" name="genre" value="Dubstep") 
                            span Dubstep
                        li
                            input(type="checkbox" name="genre" value="Chill Out") 
                            span Chill Out
                        li
                            input(type="checkbox" name="genre" value="Progressive House") 
                            span Progressive House
                        li
                            input(type="checkbox" name="genre" value="Deep House") 
                            span Deep House
                        li
                            input(type="checkbox" name="genre" value="Electro House") 
                            span Electro House
                        li
                            input(type="checkbox" name="genre" value="Trap") 
                            span Trap
                        li
                            input(type="checkbox" name="genre" value="Drum and Bass") 
                            span Drum and Bass
                        li
                            input(type="checkbox" name="genre" value="Big Room") 
                            span Big Room
                        li
                            input(type="checkbox" name="genre" value="Funk") 
                            span Funk
                div
                    label(for='url') URL:
                    input(type='url' name='url')
                div
                    label(for='description') Description:
                    br
                    textarea(rows="4" cols="80" name='description')
                div
                    label(for='blogger') Blogger:
                    input(type='text' name='blogger')
                div
                    input(type='submit' value='Create!')

Answer 1

我找到了你的問題。

改變這些：

link(rel='stylesheet', href='css/bootstrap.css')
link(rel='stylesheet', href='css/style.css')

對此：

link(rel='stylesheet', href='/css/bootstrap.css')
link(rel='stylesheet', href='/css/style.css')

您總是希望在標記相對路徑中使用前面的斜杠。 使用斜杠前面的相對路徑始終引用應用程序根目錄。 如果省略斜杠，則會嘗試查看相對於您所在頁面的路徑。

看看這個：

因為您在link標記中省略了前面的斜杠，所以它試圖查找相對於“歌曲”的電子表格，而不是應用程序根目錄。 省略URL中的尾部斜杠會使頁面上的相對路徑看起來處於相同的相對路徑（恰好是您的情況下的應用程序根目錄，因此它可以正常工作）。

如果您的網址是https://edmtl.herokuapp.com/song/something那么它將再次在https://edmtl.herokuapp.com/song/css/bootstrap.css查找bootstrap.css 。 將尾部斜杠添加到頁面URL將使其在https://edmtl.herokuapp.com/song/something/css/bootstrap.css查找。 在頁面URL中包含前面的斜杠將始終確保它在https://edmtl.herokuapp.com/的應用程序根目錄中查找

PS - 適用於所有網絡應用，不僅僅是快遞/ MEAN應用。