Node Express失败加载css和js(Node Express fail load css and js)

Node Express失败加载css和js(Node Express fail load css and js)

这是我的文件夹：

/app └── models └── ... └── node_module └── ... └── routes └── ... └── public └── css └── js └── views └── unites └── new.js └── show.js └── edit.js

所以，当我继续// mysiteweb / new时，我的日志看起来像这样：

GET /maitre-unites-new 304 4ms GET /css/bootstrap.css 304 3ms GET /js/bootstrap.js 304 2ms

但当我继续// mysiteweb / show我的日志看起来像这样：

GET /maitre-unites-show/52b46d81ddd1086615000001 304 2ms GET /maitre-unites-show/css/bootstrap.css 404 2ms GET /maitre-unites-show/js/bootstrap.js 404 1ms GET /maitre-unites-show/images/unites/batiment1.jpeg 404 2ms

我不明白为什么，我的语法是一样的：

/* * GET New unit. */ app.get('/maitre-unites-new', ensureAuthenticated, function (req, res){ Unites.find({}, function (err, unites) { res.render('unites/new', { unites: unites, user : req.user, title : ' Que voulez vous créer Maitre Du Jeu' }); }); }); /* * GET show unit. */ app.get('/maitre-unites-show/:id', ensureAuthenticated, function (req, res){ Unites.findById(req.params.id, function (err, unites) { res.render('unites/show', { unites: unites, user : req.user, title : ' Que voulez vous créer Maitre Du Jeu' }); }); });

我的观点news.js：

<% layout('layout') -%> <% script('js/bootstrap.js') -%> <% stylesheet('css/bootstrap.css') -%> <!-- Jumbotron --> <div class="jumbotron"> <h1><%= title + ' ' %><code><%= user.username %></code></h1> <p style="text-align:center;">Ho Créateur ! Inventez-nous comme toutes choses en cet univers.</p> <p> <a href="/maitre-aide" class="btn btn-primary btn-lg">aide &raquo;</a> <a href="/maitre-de-jeu" class="btn btn-primary btn-lg">retour &raquo;</a> </p> </div> <div class="row"> <div class="col-md-12"> <h3>Créez une Unité:</h3> <form method='post' action='/maitre-unites-new'> <div> <label>Nom:</label> <input type="text" name="name"/><br/> </div> <div> <label>Avatar:</label> <input type="text" name="avatar"/><br/> </div> <div> <label>Description:</label> <textarea name="description" row="5" cols="50"></textarea> </div> <hr> <%= unites.name %> <h2>Inclure d'autres unités dans celle-ci:</h2> <% if (unites && unites.length !=0) { %> <div> <% for (var index in unites) { %> <input type="checkbox" name="<%= unites[index].unit %>" value="<%= unites[index]._id %>"> <%= unites[index].name %> | <% } %> </div> <% } else { %> <div> no document exist </div> <% } %> <hr> <h2>Inclure cette unité dans d'autres unités:</h2> <% if (unites && unites.length !=0) { %> <div> <% for (var index in unites) { %> <input type="checkbox" name="<%= unites[index].unit %>" value="<%= unites[index]._id %>"> <%= unites[index].unit %> | <% } %> </div> <% } else { %> <div> no document exist </div> <% } %> <input type="submit" value="Save"> </form> </div> </div> <!-- Site footer --> <div class="footer"> <p>&copy; Company 2013</p> </div> </div> <!-- /container -->

我的观点show.js：

<% layout('layout') -%> <% script('js/bootstrap.js') -%> <% stylesheet('css/bootstrap.css') -%> <!-- Jumbotron --> <div class="jumbotron"> <h1><%= title + ' ' %><code><%= user.username %></code></h1> <p style="text-align:center;">Ho Créateur ! Inventez-nous comme toutes choses en cet univers.</p> <p> <a href="/maitre-aide" class="btn btn-primary btn-lg">aide &raquo;</a> <a href="/maitre-de-jeu" class="btn btn-primary btn-lg">retour &raquo;</a> </p> </div> <div class="row"> <div class="col-md-12"> <%= unites.name %> <img src="images/unites/<%= unites.avatar %>.jpeg"> <%= unites.description %> </div> </div> <!-- Site footer --> <div class="footer"> <p>&copy; Company 2013</p> </div> </div> <!-- /container -->

这是我的repo.git为什么我得到这个/ maitre- unites -show / images ....而不是/ images ......？

this is my folders:

/app └── models └── ... └── node_module └── ... └── routes └── ... └── public └── css └── js └── views └── unites └── new.js └── show.js └── edit.js

So, when I go on //mysiteweb/new my logs look like this:

GET /maitre-unites-new 304 4ms GET /css/bootstrap.css 304 3ms GET /js/bootstrap.js 304 2ms

But when I go on //mysiteweb/show my logs look like this:

GET /maitre-unites-show/52b46d81ddd1086615000001 304 2ms GET /maitre-unites-show/css/bootstrap.css 404 2ms GET /maitre-unites-show/js/bootstrap.js 404 1ms GET /maitre-unites-show/images/unites/batiment1.jpeg 404 2ms

I don't understand why, my syntax is the same:

/* * GET New unit. */ app.get('/maitre-unites-new', ensureAuthenticated, function (req, res){ Unites.find({}, function (err, unites) { res.render('unites/new', { unites: unites, user : req.user, title : ' Que voulez vous créer Maitre Du Jeu' }); }); }); /* * GET show unit. */ app.get('/maitre-unites-show/:id', ensureAuthenticated, function (req, res){ Unites.findById(req.params.id, function (err, unites) { res.render('unites/show', { unites: unites, user : req.user, title : ' Que voulez vous créer Maitre Du Jeu' }); }); });

my views news.js:

<% layout('layout') -%> <% script('js/bootstrap.js') -%> <% stylesheet('css/bootstrap.css') -%> <!-- Jumbotron --> <div class="jumbotron"> <h1><%= title + ' ' %><code><%= user.username %></code></h1> <p style="text-align:center;">Ho Créateur ! Inventez-nous comme toutes choses en cet univers.</p> <p> <a href="/maitre-aide" class="btn btn-primary btn-lg">aide &raquo;</a> <a href="/maitre-de-jeu" class="btn btn-primary btn-lg">retour &raquo;</a> </p> </div> <div class="row"> <div class="col-md-12"> <h3>Créez une Unité:</h3> <form method='post' action='/maitre-unites-new'> <div> <label>Nom:</label> <input type="text" name="name"/><br/> </div> <div> <label>Avatar:</label> <input type="text" name="avatar"/><br/> </div> <div> <label>Description:</label> <textarea name="description" row="5" cols="50"></textarea> </div> <hr> <%= unites.name %> <h2>Inclure d'autres unités dans celle-ci:</h2> <% if (unites && unites.length !=0) { %> <div> <% for (var index in unites) { %> <input type="checkbox" name="<%= unites[index].unit %>" value="<%= unites[index]._id %>"> <%= unites[index].name %> | <% } %> </div> <% } else { %> <div> no document exist </div> <% } %> <hr> <h2>Inclure cette unité dans d'autres unités:</h2> <% if (unites && unites.length !=0) { %> <div> <% for (var index in unites) { %> <input type="checkbox" name="<%= unites[index].unit %>" value="<%= unites[index]._id %>"> <%= unites[index].unit %> | <% } %> </div> <% } else { %> <div> no document exist </div> <% } %> <input type="submit" value="Save"> </form> </div> </div> <!-- Site footer --> <div class="footer"> <p>&copy; Company 2013</p> </div> </div> <!-- /container -->

my views show.js:

<% layout('layout') -%> <% script('js/bootstrap.js') -%> <% stylesheet('css/bootstrap.css') -%> <!-- Jumbotron --> <div class="jumbotron"> <h1><%= title + ' ' %><code><%= user.username %></code></h1> <p style="text-align:center;">Ho Créateur ! Inventez-nous comme toutes choses en cet univers.</p> <p> <a href="/maitre-aide" class="btn btn-primary btn-lg">aide &raquo;</a> <a href="/maitre-de-jeu" class="btn btn-primary btn-lg">retour &raquo;</a> </p> </div> <div class="row"> <div class="col-md-12"> <%= unites.name %> <img src="images/unites/<%= unites.avatar %>.jpeg"> <%= unites.description %> </div> </div> <!-- Site footer --> <div class="footer"> <p>&copy; Company 2013</p> </div> </div> <!-- /container -->

This is my repo.git Why I get this /maitre-unites-show/images.... and not /images... ?

最满意答案

好的。 该错误是由于您的show route具有额外的路径component /:id ，并且您在视图中的路由是相对的，因此从当前URL搜索它们，这是不同的：

new -> / show -> /maitre-unites-show/

您需要做的就是在视图中使路径绝对：

<% layout('layout') -%>
<% script('/js/bootstrap.js') -%>
<% stylesheet('/css/bootstrap.css') -%>
Alright. The error is caused by the fact that your show route has extra path component /:id, and your routes in the views are relative, so they are searched from the current URL, which is different:
 
new     ->    /
show    ->    /maitre-unites-show/
 
All you need to do is to make your paths absolute in the view:
 
<% layout('layout') -%>
<% script('/js/bootstrap.js') -%>
<% stylesheet('/css/bootstrap.css') -%>