2016-11-18 119 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

好吧會做。當然! –