Javascript ExpressJs未在某些路由上加载CSS
我一直在使用MEAN stack,但遇到了这个问题,我的CSS在某些页面上无法正常加载。请尝试以下两个链接进行比较/了解: Layout.jade:Javascript ExpressJs未在某些路由上加载CSS,javascript,express,routes,url-routing,Javascript,Express,Routes,Url Routing,我一直在使用MEAN stack,但遇到了这个问题,我的CSS在某些页面上无法正常加载。请尝试以下两个链接进行比较/了解: 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')
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);
routes/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!')
我发现了你的问题
改变这些:
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')
您总是希望在标记相对路径中使用前面的斜杠。在相对路径前面加一个斜杠总是指应用程序根。如果省略斜杠,则它会尝试查看相对于当前页面的路径
请查看:
因为您在链接
标记中遗漏了前面的斜杠,所以它试图查找与“歌曲”相关的电子表格,而不是应用程序根目录。省略URL中的尾随斜杠会使页面上的相对路径看起来是相同的相对路径(在您的情况下,它恰好是应用程序根,所以它可以工作)
如果您的URL是https://edmtl.herokuapp.com/song/something
然后它将再次在https://edmtl.herokuapp.com/song/css/bootstrap.css
。将尾部斜杠添加到页面URL将使其在https://edmtl.herokuapp.com/song/something/css/bootstrap.css
。在页面URL中包含前面的斜杠将始终确保它在应用程序根目录中的https://edmtl.herokuapp.com/
:)
PS-这适用于所有web应用程序,而不仅仅是express/MEAN应用程序。我修改了您的标签,以提高此问题的可见性。给我一分钟看一下,但我已经可以告诉你,这与路由和相对路径中的尾随斜杠有关。你介意包括静态内容中间件的代码吗?感谢Alex的快速回答,这确实是问题所在,我很傻!当然,这甚至不是特定于应用程序,希望这个标题不会对其他用户造成太大的误导。