NodeJS，Express，Jade POST JSON到数据库

Question

I encountered a frustrating problem while following a tutorial based on NodeJS, Express, Jade and MongoDB. This issue has been discussed in other threads on this forum but even following the suggestions already posted, i am unable to get the POST command to work.

Don't think about the Jade indentation, it might be a little wrong in the copy+paste but correct in the actual code.

When i POST from my input.js page the site throws me a 404 error. I know it is not a DB problem because i can output data on other pages just fine.

My Jade template for input.js.

    extends head
    block content

    div(id="input_page_wrapper")
        div(id="input")
            form(id="input_form", name="addEntry", method="post" action="/addEntry")

            div(class="label_box")
                label(for="restname") Restaurant Name: 
            input(type="text", placeholder="Example: Soul Kitchen", name="restname")

            div(class="label_box")
                label(for="restdesc") Restaurant Description: 
            input(type="text", placeholder="Write a short description.", name="restdesc")

            div(class="label_box")
                label(for="restdesc") Restaurant Address: 
            input(type="text", placeholder="Example: Fleminginkatu 26", name="restadd")

            button(id="submit", name="submit", type="submit") submit

My input.js Route

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

    /* GET Input page. */
    router.get('/', function(req, res) {
    res.render('input', { title: 'Input to Database' });
    });

    /* POST to Add User Entry */
    router.post("/addEntry", function(req, res) {

    // Set our internal DB variable
    var db = req.db;

    // Get our form values. These rely on the "name" attributes
    var restName = req.body.restname;
    var restDesc = req.body.restdesc;
    var restAdd = req.body.restadd;
    console.log("post received: %s %s", restName, restDesc, restAdd);

    // Set our collection
    var collection = db.get('restaurants');

    // Submit to the DB
    collection.insert({
        "name" : restName,
        "desc" : restDesc,
        "address" : restAdd
    }, function (err, doc) {
        if (err) {
            // If it failed, return error
            res.send("There was a problem adding the information to the database.");
        }
        else {
            // And forward to success page
            res.redirect("/input");
        }
      });
    });

    module.exports = router;

My App.js file

    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 mongo = require('mongodb');
    var monk = require('monk');
    var db = monk('localhost:27017/nodetest1');

    var routes = require('./routes/index');
    var input = require('./routes/input');

    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')));

    // Make our db accessible to our router
    app.use(function(req,res,next){
        req.db = db;
        next();
    });

    app.use('/', routes);
    app.use('/input', input);

    /// catch 404 and forwarding 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;

Entire source code is also viewable in GitHub. https://github.com/ValterAndersson/DinnerApp

Answer 1

I think you need indent your tags in form, try this, and miss a ',' in form tag (after method="post"):

 extends head block content div(id="input_page_wrapper") div(id="input") form(id="input_form", name="addEntry", method="post", action="/input/addEntry") div(class="label_box") label(for="restname") Restaurant Name: input(type="text", placeholder="Example: Soul Kitchen", name="restname") div(class="label_box") label(for="restdesc") Restaurant Description: input(type="text", placeholder="Write a short description.", name="restdesc") div(class="label_box") label(for="restdesc") Restaurant Address: input(type="text", placeholder="Example: Fleminginkatu 26", name="restadd") button(id="submit", name="submit", type="submit") submit