2016-11-18 122 views
0

我刚开始在Express框架中使用node.js,并试图理解内置路由是如何工作的。我发现可以使用其他“子路由”来定义“主”路由器。目前,我的应用程序最初发出一个获取请求,从MySQL数据库加载下拉列表。我添加了一个演示按钮,该按钮应该在下拉列表中输入值,并将其作为查询参数发送给我的子路线。当点击子路径按钮,我得到一个404

我app.js:节点子路由返回404

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 routes = require('./routes/index'); 

var app = express(); 

// view engine setup 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'pug'); 

// uncomment after placing your favicon in /public 
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); 
app.use(logger('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); 
app.use(cookieParser()); 
app.use(express.static(path.join(__dirname, 'public'))); 

app.use('/', routes); 

// 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; 

我index.js(主要途径):

var express = require('express'); 
var router = express.Router(); 
var models = require('../models'); 

router.use('/savings', require('./savings.js')); 

/* GET home page with locations and their initial data collection dates */ 
router.get('/', function(req, res, next) { 
    models.Location.findAll({ 
    attributes: ['locationName', 'initializationDate'] 
    }).then(function(locations) { 
    res.render('index', { 
     title: 'Solar Data Savings', 
     locations: locations 
    }); 
    }); 
}); 

module.exports = router; 

savings.js (子路径):

var express = require('express'); 
var router = express.Router(); 
var models = require('../models'); 

/* GET calculate solar data savings and reroute */ 
router.get('/savings', function(req, res, next) { 
    req.param('locationID'); 
    models.Bank.findAll({ 
    attributes: ['bankID'], 
    include: [{ 
     model: Location, 
     where: { locationID: Sequelize.col('bank.locationID') } 
    }] 
    }).then(function(banks) { 
    res.render('index', { 
     title: 'Solar Data Savings', 
     banks: banks 
    }); 
    }); 
}); 

module.exports = router; 

index.pug:

extends layout 

block content 
    div(class="container-fluid") 
    h1= title 
    p This is the #{title} project website 
    form(action="/savings") 
     div(class="form-group") 
     label(for="locations") 
     div(class="col-sm-4") 
      select(id="locations" class="form-control") 
      -for(var i = 0; i < locations.length; i++) { 
       option(value="#{locations[i].dataValues.locationID") #{locations[i].getLocationName()} 
      -} 
     div(class="col-sm-4") 
      input(type="submit", value="Get Bank") 

我相信我误解了路由的细微差别,并且我没有运气就搜索到了这个特定问题的解决方案。帮助非常感谢

回答

0

您在服务器上的储蓄路线设置为/savings/savings,而您的表单正在呼叫/savings。要么改变形式或更改服务器端:

savings.js,改变

router.get('/savings', function(req.... 

router.get('/', function(req.... 

此外,您使用的get提交表单。也许你需要改变,要

router.post('/', function(req... 
+0

谢谢,我应该抓到了那个(: 也是我使用后o只是为了尝试和触发路线,我删除了表格(因为没有任何东西需要从用户身上持续下去),并用链接替换了提交按钮。 –

0

只是要以下更改index.pug

extends layout 
block content 
    div(class="container-fluid") 
    h1= title 
    p This is the #{title} project website 
    form(action="/savings/savings") 
    div(class="form-group") 
     label(for="locations") 
     div(class="col-sm-4") 
     select(id="locations" class="form-control") 
     -for(var i = 0; i < locations.length; i++) { 
      option(value="#{locations[i].dataValues.locationID") #{locations[i].getLocationName()} 
     -} 
     div(class="col-sm-4") 
     input(type="submit", value="Get Bank") 

其实你的路由是错误的:

目前你打电话的:your_url:port/savings

但应该是:YOUR_URL:端口/储蓄/储蓄

LINE需要更正

FROM:形式(动作= “/储蓄”)

TO:形式(行动=“/储蓄/储蓄”)

+1

我upvoted,因为这也有帮助,但因为我是新的它不会显示。谢谢! –

+0

你以后可以随时做,但你的诚实留下深刻的印象:) :) –

+0

好吧会做。当然! –