Express.jsルータがリクエストを返す404

Question

私のエクスプレスサーバは、HTMLフォームからリクエストを送信しようとすると404エラーを返します。しかし、要求はうまく動作します。私はサーバーとルートのファイルを分離しています。 app.jsでリクエストを行うことはできません。なぜなら、ページ数が多すぎるためです。私はDBにポスト挿入要求をしたいが、私はちょうど私のフォームから情報を得ることができません。

何か不足していますか？

私のHTMLフォーム（EJSが正確に）

<form action="/add" method="POST"> 
    <input type="text" name="title" placeholder="Event name" /> 
    <input type="text" name="subcategory" placeholder="Category" /> 
    <input type="text" name="date" placeholder="Date" /> 
    <input type="text" name="place" placeholder="Place" /> 
    <input type="text" name="organisator" placeholder="Organisator" /> 
    <textarea name="description" placeholder="Description" onkeyup="adjust_textarea(this)"></textarea> 
    <input type="submit" value="Add" /> 
</form> 

私App.jsファイル（404ハンドラでエラー）

const express = require('express'); 
const path = require('path'); 
const logger = require('morgan'); 
const cookieParser = require('cookie-parser'); 
const bodyParser = require('body-parser'); 

var app = express(); 

app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'ejs'); 

//db connection 
var mysql = require("mysql"); 
app.use(function(req, res, next){ 
    res.locals.connection = mysql.createConnection({ 
     host  : 'localhost', 
     user  : 'root', 
     password : 'mypassword', 
     database : 'mydb' 
    }); 
    res.locals.connection.connect(); 
    next(); 
}); 

app.use(logger('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: true })); 
app.use(cookieParser()); 
app.use(express.static(path.join(__dirname, 'public'))); 

app.use('/', require('./routes/index')); 
app.use('/events', require('./routes/events')); 

//handling errors 
app.use(function(req, res, next) { 
    var err = new Error('Not Found'); 
    err.status = 404; 
    next(err); 
}); 

app.use(function(err, req, res, next) { 
    res.locals.message = err.message; 
    res.locals.error = req.app.get('env') === 'development' ? err : {}; 
    res.status(err.status || 500); 
    res.render('error'); 
}); 

//server init 
var http = require('http'); 

var server = http.createServer(app); 
server.listen(4000); 
if(server.listening){ 
    console.log('Server is listening on port 4000'); 
} 

module.exports = app; 

私./routes/events.jsが

const express = require('express'); 
const router = express.Router(); 

router.get('/', function (req, res, next) { 
    let query = '*select query*'; 
    res.locals.connection.query(query, function (error, results, fields) { 
     if (error) throw error; 
     res.render('index', { title: 'Events', data: results }); 
    }); 
}); 

router.post('/add', function (req, res) { 
    var obj = req.body.title; 

    console.log(obj); 
    res.redirect('/events'); 
}); 

を提出

What i see in browser

Answer 1

'routes/events.js'ファイルに 'add'エンドポイントが記載されています。これにより最終ルートの構造が '/ events/add'になります。あなたのフォームでは、 '/ add'エンドポイントに送信して問題を修正し、フォームのアクションpropを '/ events/add'に変更するか、 '/ add'エンドポイントを次のような独自のルートに移動します：

router.post('/add', function(req, res) { 
    var obj = req.body.title; 

    console.log(obj); 
    res.redirect('/events'); 
});