Node Express失败加载CSS和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 /显示我的日志时,如下所示:

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 ...?

蓬德

好的。该错误是由以下事实引起的:您的show路线具有额外的路径成分/:id,并且视图中的路线是相对的,因此它们是从当前URL中搜索的,这是不同的:

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Node.js 加载 css

来自分类Dev

node.js-参数express.js太长时无法加载CSS

来自分类Dev

带有Express,Jest和SuperTest的Node.js永远不会失败

来自分类Dev

node.js(express)链接CSS / JS

来自分类Dev

CSS 和 JS 未加载到 Node.js 服务器上

来自分类Dev

在node.js + express + ejs上包括CSS和js文件

来自分类Dev

Node.js Javascript和Express

来自分类Dev

Node.js / Express和并行队列

来自分类Dev

Node.js和Express错误

来自分类Dev

Node.js Javascript和Express

来自分类Dev

使用 Node.JS 加载 .ejs 文件失败

来自分类Dev

获取 URL 时 Node Js Express 静态文件失败

来自分类Dev

Node js抓取失败

来自分类Dev

脚本和CSS文件未随Jade + Node JS一起加载

来自分类Dev

JavaScript文件未在express / node.js中加载

来自分类Dev

使用node.js express更新加载的值

来自分类Dev

Node JS:Express入门

来自分类Dev

更少的CSS和Node JS麻烦

来自分类Dev

使用require和node.js加载远程js文件

来自分类Dev

使用Node JS和React js的文件加载问题

来自分类Dev

使用require和node.js加载远程js文件

来自分类Dev

使用Node JS和Express JS的HTTPS请求缓慢?

来自分类Dev

Node.js + express.js和线程安全

来自分类Dev

Node.js框架和Express.js

来自分类Dev

Node.js + express.js和线程安全

来自分类Dev

在Express中加载CSS和JS文件

来自分类Dev

如何使用node,express和ejs包含CSS文件?

来自分类Dev

CSS未加载到node.js生成的链接上

来自分类Dev

CSS覆盖Node.js Express引导程序