NodeJS、Express、Jade 将 JSON POST 到数据库

Question

我在学习基于 NodeJS、Express、Jade 和 MongoDB 的教程时遇到了一个令人沮丧的问题。此问题已在本论坛的其他主题中讨论过，但即使按照已经发布的建议，我也无法让 POST 命令工作。

不要考虑 Jade 缩进，在复制+粘贴时可能有点错误，但在实际代码中是正确的。

当我从我的 input.js 页面POST 时，该网站向我抛出 404 错误。我知道这不是数据库问题，因为我可以在其他页面上输出数据就好了。

用于 input.js 的 Jade 模板。

    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

我的 input.js 路线

    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;

我的 App.js 文件

    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;

整个源代码也可以在 GitHub 中查看。 https://github.com/ValterAndersson/DinnerApp

Answer 1

我认为你需要在表单中缩进你的标签，试试这个，然后在表单标签中错过一个'，'（在 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