Question

这是我的文件夹：

/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 ......？

Answer 1

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

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

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

<% layout('layout') -%>
<% script('/js/bootstrap.js') -%>
<% stylesheet('/css/bootstrap.css') -%>

Node Express失败加载css和js

1 个答案: