ExpressJs 不在某些路由上加载 CSS

Posted 2023-02-22

【中文标题】ExpressJs 不在某些路由上加载 CSS

【英文标题】：ExpressJs not loading CSS on certain routes

【发布时间】：2015-02-09 09:36:44

【问题描述】：

我一直在使用 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!')

【问题讨论】：

我修改了你的标签，让这个问题更容易被看到。给我一分钟看一下，但我已经可以告诉你，这与你的路线和相对路径中的尾部斜杠有关。

您介意包含静态内容中间件的代码吗？

【参考方案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 中的尾部斜杠会使页面上的相对路径看起来在相同的相对路径中（在您的情况下恰好是应用程序根目录，所以它可以工作）。

如果您的 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 - 这适用于所有网络应用，而不仅仅是 express/MEAN 应用。

【讨论】：

感谢亚历克斯的快速回答，这确实是问题所在，我很傻！当然，这甚至不是特定的应用程序，希望标题不会对其他用户产生太大的误导。