4CODE 4CODE - 5 months ago 12
Node.js Question

nodejs_express_Path of Static Files(bower_components) Changed due to 'GET requests to the /user/:id path'

Problem: My problem is that the route conversion will result in the path of static files changed. Those are dependence files store in 'bower_components'.

Those are dependence files work well on the index page. Others could not work due to the static files path changed.In other words, bootstrap could not work on 'localhost:3000/product/id',but well on 'localhost:3000'.

What I did: I thought this error result from middleware, thus, I was trying to use 'app.use()' instead of 'app.get()' . unfortunately, more error came out.

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

My directory system looks like this:

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


My 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',
}
})});


My head looks like this:

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')


My layout is like this:

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


My detail page is like this:

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

please change the path of your js/css files.

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')

it is because you use a relative path.