req.body 未定义或为空

Question

我必须有两个控制器和两个独立的路由器。 bookController.js 完美运行。现在我创建了 userControllers 来处理注册和登录逻辑，但 req.body 是空的。我试图通过 console.log 查看表单是否正在传递。但我得到空或未定义

我不知道我在做什么或我做错了什么

谢谢

这是 app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
//const csurf = require('csurf');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var methodOverride = require('method-override')
//const multer = require('multer'); 

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var bookRouter = require('./routes/book');


//Cross site request forgery
//const csrfMiddleware = csurf({cookie: true});

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use(cookieParser());
//app.use(csrfMiddleware);
app.use(methodOverride('_method'))
//app.use(multerConfig );

app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/', bookRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

usersControllers.js

const knex = require('../model/connection');

exports.register = function(req, res)
{
    //REGISTER USER FORM PAGE
    res.render('user/register');

}

exports.registeruser = function(req, res, next)
{
    //REGISTER USER HANDLE
    console.log(req.body.username);
    console.log(req.body.email);
    console.log(req.body.password);
    console.log(req.body.password1);
    res.render('user/dashboard');
}

这是路由/users.js

var express = require('express');
var router = express.Router();
var usersControllers = require('../controllers/usersControllers');

/* GET users listing. */
router.get('/dashboard', usersControllers.index); 
router.get('/register', usersControllers.register); 
router.get('/login', usersControllers.login); 
router.post('/registeruser', usersControllers.registeruser); 


module.exports = router;

这是表格

<%- include('../includes/layout'); %>
<div class="container">
    <div class="row">
        <div class="col-lg-3"></div>
<div class="col-lg-6">
        <div class="card">
          <div class="card-header bg-primary"> Create User </div>
           <form id="c_form-h" class="" method="post" action="/users/registeruser" enctype="multipart/form-data" style="padding: 5px;">  


          <div class="form-group row">
               <label for="username" class="col-6 col-form-label">Username</label>
           <div class="col-12">
              <input type="text" class="form-control" name="username" placeholder="Add UserName"> 
          </div>
          </div>

          <div class="form-group row">
                <label for="email" class="col-6 col-form-label">Email</label>
            <div class="col-12">
               <input type="email" class="form-control" name="email" placeholder="Add Email"> 
           </div>
           </div>

           <div class="form-group row">
                <label for="password" class="col-6 col-form-label">Password</label>
            <div class="col-12">
               <input type="password" class="form-control" name="password" placeholder="Enter Password"> 
           </div>
           </div>

           <div class="form-group row">
                <label for="password1" class="col-6 col-form-label">Password</label>
            <div class="col-12">
               <input type="password" class="form-control" name="password1" placeholder="Enter Password Again"> 
           </div>
           </div>
           <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
    <div class="col-lg-3"></div>
</div>
</div>
      <%- include('../includes/footer'); %>

Answer 1

让我们尽量保持技术含量最低。

假设您正在向 node-js 服务器发送一个 html 表单数据，即您向服务器发出请求。服务器文件将在请求对象下接收您的请求。现在按逻辑，如果您在服务器文件中控制台记录此请求对象，您应该会在其中的某个位置看到您的表单数据，然后可以提取这些数据，但是哇！你实际上没有！

那么，我们的数据在哪里？如果它不仅出现在我的请求中，我们将如何提取它。

对此的简单解释是，http 将您的表单数据以零碎的形式发送，这些零碎数据旨在在到达目的地时进行组装。那么你将如何提取数据。 使用一种叫做“body-parser”的东西可以为你做这件事。

body-parser 解析您的请求并将其转换为您可以轻松提取您可能需要的相关信息的格式。 首先在你的 app.js 文件中需要以下内容。

var bodyParser = require('body-parser')

并添加以下行以使其工作

app.use(bodyParser.urlencoded({extended: true}));

Answer 2

简短回答：虽然您有来自 URL 的数据，但您无法使用该数据。使用 bocy-parser 包来解决这个问题。

npm install body-parser --save

这会安装 body-parser 包。它的作用是将发回的响应数据绑定在一起，以便您实际访问并使用它。没有它，您只是将数据发送到端点，而没有任何使用方式。

像这样使用正文解析器：

var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({extended: true}));

然后在您尝试使用数据的函数内部执行类似的操作

console.log(req.body.username);
console.log(req.body.email);
console.log(req.body.password);
console.log(req.body.password1);

我了解到您已经尝试按照上面所说的那样实现正文解析器。尝试为此创建一个单独的端点。而不是 /users/registeruser，尝试在单独的 /registeruser 端点中执行此操作，看看是否可行。如果是，请再试一次，了解端点设置，如果不是，请进一步评论。