Express.js 라우터가 요청을 반환 함 404

Question

html 형식의 요청을 보내려고하면 익스프레스 서버가 404 오류를 반환합니다. 그러나 요청을 잘 작동합니다. 서버와 경로에 대한 파일을 분리했습니다. app.js에서 요청을 할 수 없습니다. 다른 페이지에 너무 많은 요청이 있기 때문입니다. DB에 post-insert 요청을 만들고 싶습니다. 그러나 폼에서 어떤 정보도 얻을 수 없습니다.

누락 된 것이 있습니까?

내 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'엔드 포인트로 보내서이 문제를 해결하려면 양식의 action prop를 '/ events/add'로 변경하거나 '/ add'엔드 포인트를 다음과 같이 자신의 경로로 이동하십시오.

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

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