静的ファイル（bower_components）のnodejs_express_Pathが「/ user /：idパスへのGET要求」のために変更されました

Question

問題：私の問題は、ルート変換により静的ファイルのパスが変更されるということです。それらは 'bower_components'に依存ファイルを格納しています。

これらの依存ファイルは、インデックスページでうまく機能します。他の言葉では、 'localhost：3000/product/id'では動作しませんでしたが、 'localhost：3000'ではうまく動作しませんでした。

私はこのミスをミドルウェアの結果と考えて、app.get（）の代わりにapp.use（）を使用しようとしていました。残念ながら、より多くのエラーが出ました。

click it: The image explain the wrong path when I use app.get()

私のディレクトリシステムは、次のようになります。

shop 
    -/bower_components 
     -/bootstrap 
     -/jquery 
    -/views 
     -/includes 
     -head.jade 
     -header.jade 
     -/pages 
     -admin.jade 
     -detail.jade 
     -index.jade 
     -list.jade 
     -layout.jade 
    -app.js 

マイapp.js：

var express = require('express'); 
var serveStatic = require('serve-static'); 
var port = process.env.PORT || 3000; 
var app = express(); 
var path = require('path'); 

app.set('views',path.join(__dirname,'./views/pages')); 
app.set('view engine','jade'); 
app.use('/bower_components',express.static(path.join(__dirname,'bower_components/'))); 
app.listen(port); 
console.log('shop is start on port'+ port); 
//index.page 
app.get('/',function(req,res){ 
    res.render('index',{ 
     title: 'Home', 
     productes:[{ 
     title:'SWISSE', 
      _id:1, 
     poster:'http://p5.img.ymatou.com/upload/productdes/baee6566fd7545ef8fb0efd94af97a8d.jpg', 
    }, 
    { 
     title:'SWISSE', 
     _id:3, 
     poster:'http://p5.img.ymatou.com/upload/productdes/baee6566fd7545ef8fb0efd94af97a8d.jpg', 
    }, 
    { 
     title:'SWISSE', 
     _id:2, 
     poster:'http://p5.img.ymatou.com/upload/productdes/baee6566fd7545ef8fb0efd94af97a8d.jpg', 
    }] 
    }) 
}); 

//detail.page 
app.use('/product/:id',function(req,res){ 
res.render('detail',{ 
    title: 'Detail', 
    product: { 
     title:'swiss', 
     poster:'http://www.pharmacyonline.com.au/media/catalog/product/cache/6/image/9df78eab33525d08d6e5fb8d27136e95/3/7/379352.jpg', 
     price:'110', 
     place:'nz', 
     description:'whatever', 
    } 
})}); 

私の頭は次のようになります。

link(href='bower_components/bootstrap/dist/css/bootstrap.min.css', rel='stylesheet') 

script(src='bower_components/jquery/dist/jquery.min.js') 

script(src='bower_components/bootstrap/dist/js/bootstrap.min.js') 

マイレイアウトこのようなものです：

doctype 
    html 
    head 
     meta(charset='utf-8') 
     title #{title} 
     include ./includes/head 
    body 
    include ./includes/header 
    block content 

私の詳細ページには、このようなものです：

extends ../layout 

block content 
.container 
    .row 
    .col-xs-12.col-md-7 
     img(src='#{product.poster}',alt='#{product.title}',width='720',height='600',align='middle') 
    .col-xs-12.col-md-5 
     dl.dl-horizontal 
     dt Name 
     dd #{product.title} 
     dt Price 
     dd #{product.price} 
     dt Production place 
     dd #{product.place} 
     dt Description 
     dd #{product.description} 

Answer 1

あなたのJS/CSSファイルのパスを変更してください。

link(href='/bower_components/bootstrap/dist/css/bootstrap.min.css', rel='stylesheet') 

script(src='/bower_components/jquery/dist/jquery.min.js') 

script(src='/bower_components/bootstrap/dist/js/bootstrap.min.js') 

これは、相対パスを使用しているためです。