NodeJS Express req.body 返回空字符串对象

Question

我对 nodeJS 和 express 还很陌生。我遇到了一个似乎无法解决的问题。

这个app.js

var express         = require("express"),
    app             = express(),
    mongoose        = require("mongoose"),
    bodyParser      = require("body-parser");

mongoose.connect("mongodb://localhost/to_do_app", {useNewUrlParser: true, useUnifiedTopology: true});
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));

// MODEL TODO
var todoSchema = new mongoose.Schema({
    title: String,
    created: {type: Date, default: Date.now}
});
var Todo = mongoose.model("Todo", todoSchema);

// Todo.create({
//     title: "Database To-Do Entry",
// });

// ROUTES
app.get("/", function(req, res){
    Todo.find({}, function(err, todos){
        if(err){
            console.log(err);
        } else {
            res.render("index", {todos: todos});
        }
    })
});

//CREATE ROUTE
app.post("/", function (req, res){
    Todo.create(req.body.todo, function(err, newToDo){
        if(err){
            console.log(err);
        } else {
            console.log("added" + newToDo)
        }
        console.log(req.body.todo);
    });
});

// START
app.listen(3000, function(){
    console.log("Server has started!");
});

index.ejs

<%- include("partials/header") %>

<div class="container my-5">
    <div class="row justify-content-center">
            <div class="card bg-dark" style="width: 18rem;">
                <div class="card-header text-white">
                    To-Do List
                    <a href="#collapseToDo" data-toggle="collapse"><i class="fas fa-plus ml-auto"></i></a>
                </div>

                <ul class="list-group list-group-flush">
                    <div class="collapse" id="collapseToDo">
                        <form action="/" method="POST">
                            <input class="list-group-item bg-light rounded-0" name="todo[title]" type="text" placeholder="Enter To-Do">
                        </form>
                    </div>
                    <% todos.forEach(function(todos){ %>
                    <li class="list-group-item"><%= todos.title %><span><i class="far fa-trash-alt"></i></span></li>
                    <% }) %>
                </ul>
            </div> 
    </div>
</div>

<%- include("partials/footer") %>

每次我运行这段代码，我都会尝试向数据库中添加一些新内容 req.body.todo returns {Title:""}。字符串完全是空的。我找不到解决这个问题的方法。提前致谢。

Answer 1

你的错误是这一行<input class="list-group-item bg-light rounded-0" name="todo[title]" type="text" placeholder="Enter To-Do">

输入字段的名称是 todo[title]，但在您的服务器上您尝试使用 req.body.todo 获取待办事项标题。

我认为您需要更新您的 ejs 文件，将输入名称设置为 todo:

<input class="list-group-item bg-light rounded-0" name="todo" type="text" placeholder="Enter To-Do">

我知道了 CREATE ROUTE 在创建待办事项后没有做任何事情。我认为，重定向到 / 路由会很好。

并且，如果你使用mongoose，那么Todo.create需要一个object而不是一个字符串，我客一个Todo只需要title字段，最后是route将变成：

app.post("/", function (req, res){
    Todo.create({title: req.body.todo}, function(err, newToDo){ // object Todo
        if(err){
            console.log(err); // return to error page like res. render('error', {erro})
        } else {
            console.log("added" + newToDo)
            res.redirect('/') // reload the page
        }
        console.log(req.body.todo);
    });
});

NodeJS Express req.body 返回空字符串对象

NodeJS Express req.body returning empty string object

node.js

express

body-parser