So, I'm new to Javascript (and coding in general). To suppliment my education on Javascript, I thought I'd fool around with Node.js. Thinking I'd need a project I thought that I'd try to make a Dungeons & Dragons character creator. There are some out there already, but I'm needing a project, right?
So I made a form that takes the character name, and then instead of putting it to the console and/or displaying it on the page, I get a 404. I must be botching something simple here, so after a couple hours of trying to figure out what has to be a simple thing by myself and doing lots of search engine work, I thought I'd take it to the community.
Right now I have the base framework that you get from:
express --css myapp
Nothing fancy added. Here is my app.js (note the final lines with app.post:
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 users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// 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(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
// 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;
app.post('/', function(req, res) {
console.log(req.body);
console.log('Character: ' + req.body.charactername);
res.send('Character Name: ' + req.body.charactername);
});
And finally, my jade file with the form.
extends layout
block content
h1= title
p Welcome to #{title}
form(method='post',action='/')
input(type='text',name='charactername')
input(type='submit')
Like I said, it is certainly something simple, but it's been driving me nuts and I can't seem to find that one document, webpage, howto, or tutorial that explains what I'm doing wrong here.
app.post('/', function(req, res) {});
is after your 404 error handling route. Move it so that it is before:
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
This will work as long as there is nothing conflicting in your other routes (app.use('/', routes)
).