在Express / nodejs中参数化路由URL之后添加静态文件

Question

I am trying to get the details based on two parameters included after /details . Parameters I have passed are getting in the url. But my static folder /others is added after the /details/id/others/filenames.js or css . So I am not getting the page view perfectly. I tried to print the passed url data in html page. But they are also not showing. I am not getting the problem in my code as i am newbie to nodejs.

Here is the app.js file.

 var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var connection = require('express-myconnection'); var mysql = require('mysql'); var routes = require('./routes/index'); var search = require('./routes/search'); var urlencodedParser = bodyParser.urlencoded({ extended: false }) var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); app.use('/others', express.static('others')); // uncomment after placing your favicon in /public //app.use(favicon(__dirname + '/public/favicon.ico')); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(require('stylus').middleware(path.join(__dirname, 'public'))); app.use(express.static(path.join(__dirname, 'public'))); //app.use(express.json()); // to support JSON-encoded bodies //app.use(express.urlencoded()); app.use( connection(mysql, { host: 'localhost', user: 'root', password: '', port: 3306, //port mysql database: 'archive' }, 'request') ); //routes for pages from index.js app.get('/', routes.index); app.get('/details', routes.details); app.get('/list', routes.list); //posting the form app.post('/list', urlencodedParser, function (req, res) { //console.log(req.body); //res.render('list', {data: req.body}); req.getConnection(function (err, con) { con.query('select * from arc_book WHERE title like "%' + req.body.title + '%" or isbn like "%' + req.body.title + '%" or description like "%' + req.body.title +'%" order by title asc', function (err, rows) { if (err) console.log("Error in solution : %s ", err); //else // console.log(rows); res.render('list', { data: rows }); }); }); }); app.get('/details/:book_id/:uploaded_by',function (req, res) { req.getConnection(function (err, con) { con.query("SELECT * FROM arc_book b,arc_user u where b.uploaded_by=u.id and u.id='" + req.params.uploaded_by + "' and b.id='" + req.params.book_id + "'", function (err, rows) { if (err) return console.log("Error in solution : %s ", err); else { // console.log(rows); res.render('details', { data: rows }); } }); }); }); // catch 404 and forward to error handler app.use(function (req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); // error handlers // development error handler // will print stacktrace if (app.get('env') === 'development') { app.use(function (err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked to user app.use(function (err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); module.exports = app; 

Here is the HTML list file portion, from where i am generating the URL to pass data to /details page .

 <div class="col-sm-9" style=" padding-bottom: 20px;"> <table id="myTable" class="table-striped table-hover custom-table" cellspacing="0" width="100%"> <thead style="background-color: #191D3D; color: #fff; font-weight: 100;"> <tr> <th>Title</th> <th>Uploaded BY</th> <th>Upload Date</th> <th class="hidden-xs">Size</th> </tr> </thead> <tbody> <% for(var key in data) { %> <tr> <td><a href="/details/<%= data[key].id %>/<%= data[key].uploaded_by %>" style="color: #000;"><%= data[key].title %></a></td> <td><%= data[key].uploaded_by %></td> <td><%= data[key].upload_date %></td> <td class="hidden-xs"><%= data[key].file_size %> Kb</td> </tr> <% } %> </tbody> </table> </div> 

And Finally here's the details page i am trying to show my data.

 <% include header.ejs %> <section class="container-fluid" style="background-color: #ffffff; padding: 0px 0px 50px 0px;"> <div class="container-fluid"> <div class="col-sm-12"> <div class="col-sm-12"> <p style="color: #000000; font-size: 20px; padding: 15px 0px 20px 0px;"></p> <div class="col-sm-3 filter" style="min-height: 500px;" id="filter-div"> <p class="filter_head1">AUTHOR</p> <p style="border-top: 3px solid #cdcdcd; position: relative; top: -30px;;"></p> <div class=""> <div class="image-wrapper3"> <img src="others/uploads/users/client/John-01685456525_avatar04.png"> </div> <p class="name_title"> <%= data.first_name %> </p> <p class="des_title"> Content Maker at Optinfer limited <%= data.first_name %> </p> </div> <div class="" style="margin-top: 50px"> <div class="details_title"> <p> <b>START </b><span>08:00 AM - 22 Aug, 2017</span> </p> <p> <b>END </b><span>08:00 AM - 22 Dec, 2017</span> </p> <p> <i class="fa fa-map-marker" aria-hidden="true"></i> <span>Dhaka, Bangladesh</span> </p> <p> <i class="fa fa-phone" aria-hidden="true"></i> <span>+88017XXXXXXX</span> </p> <p> <i class="fa fa-envelope" aria-hidden="true"></i> <span>contact@optinfer.com</span> </p> </div> </div> </div> <div class="col-sm-9" style=" padding-bottom: 20px;"> <p class="title_head">HTML Tutotial</p> <article class="article-meta"> <div class="image-wrapper2"> <img src="others/coveruploads/event/rawa_camera-art-wallpaper-1.jpg"> </div> <p> Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. </p> <p> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p> <p> The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p> <p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. </p> </article> </div> </div> </div> </div> </section> </br> <% include footer.ejs %> 

Finally the output i am getting in console while tried to request is added here

GET /details/86/others/js/dataTables.bootstrap.js 404 0.712 ms - 88

The others folder is in root. but it's getting added after details. How can I solve this problem and How can I show the passed data in view page ? THanks in advance for helping

Answer 1

Your problem is caused by wherever in your html templates you include "others/js/dataTables.bootstrap.js" You are probably specifying a relative path just as you see here. Try "/others/js/dataTables.bootstrap.js" instead.