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

时间:2017-07-10 14:12:51

标签: javascript mysql node.js express

我正在尝试根据 / details 之后的两个参数获取详细信息。我通过的参数都在url中。但我的静态文件夹 /其他 会在 /details/id/others/filenames.js或css 之后添加。所以我没有完美地获得页面视图。 我试图在html页面中打印传递的url数据。但他们也没有表现出来。我没有在我的代码中遇到问题,因为我是nodejs的新手。

这是app.js文件。



unsigned short




这是HTML列表文件部分,我将生成用于将数据传递到/详细信息页面的URL。



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;




最后,这里是我试图显示数据的详细信息页面。



<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>
&#13;
&#13;
&#13;

最后,我在试图请求时进入控制台的输出被添加到这里

  

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

其他文件夹位于root中。但它在细节之后得到了补充。 如何解决此问题?如何在视图页面中显示传递的数据? 提前帮助

1 个答案:

答案 0 :(得分:0)

您的问题是由您的html模板中的任何位置引起的“others / js / dataTables.bootstrap.js”您可能正如您在此处所指定的那样指定相对路径。请改为使用“/others/js/dataTables.bootstrap.js”。