Как получить поля из запроса в Node.js с помощью экспресс-фреймворка?

Я пишу сценарий Node.js, и у меня проблемы с интеграцией формы "входа". Я могу сделать это, используя статическую HTML-страницу, однако использование динамической страницы ".ejs" вызывает проблемы ... мои поля формы помечаются как "undefined".

var helmet = require('helmet');
var bodyParser = require('body-parser')
//var cookieParser = require('cookie-parser');
//var csurf = require('csurf');
//Use Express module
var express = require('express');
var app = express();
var io = require("socket.io");  //web socket external module
var easyrtc = require("easyrtc");  //EasyRTC external module

app.use(helmet());

//Statically serve files in these directories
app.use("/js", express.static(__dirname + '/easyrtc/js'));
app.use("/images", express.static(__dirname + '/easyrtc/images'));
app.use("/css", express.static(__dirname + '/easyrtc/css'));

//For my homepage  
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs')  //set the view engine to ejs

app.use("/css", express.static(__dirname + '/public/css'));
app.use("/img", express.static(__dirname + '/public/img'));

//Needed to parse form data 
app.use(bodyParser()); 

//var csrfProtection = csurf({ cookie: true });  
//parse cookies...we need this because "cookie" is true in csrfProtection
//app.use(cookieParser());

//global variables 
var loggedIn = false,
    password = 'password';  
var title = 'This is a heading';
var message = 'Steve is NOT available';
var presenter = 'Username'
var passport = 'Password'    


//Temporary home page
app.get('/', function (req, res) {

var site = req.hostname;  //example returns "localhost"
var splits = site.split(".");  //"split" on "periods"

console.info("site is: " + site);
console.info("first split is: " + splits[0]);
console.info("second split is: " + splits[1]);

if (loggedIn == true) {
res.render('index', {title: 'available', message: 'Steve is available...'});
console.info("homepage -logged in");
}
else {
console.info("homepage -not logged in");
  res.render('login', {
    usr: {},
    pword: {},
    data: {},
    errors: {}//,
//        csrfToken: req.csrfToken()
  });
 }
});

//Respond to POST from login form
app.post('/login', function (req, res) {
console.info('post to /login');

var usr_STR = String(req.body.usr)
var pass_STR = String(req.body.pword)
console.info("req.body.usr: " + req.body.usr + " req.body.pword: " + req.body.pword);
console.info("usr_STR: " + usr_STR + " pass_STR: " + pass_STR);

if (loggedIn == true) {
    res.send("Already logged in.");
}
else {
    console.info("Posted data:" + JSON.stringify(req.body));
    console.info("req.body.pw:" + req.body.pw);
    console.info("req.body.pword:" + req.body.pword);
    console.info("req.body.usr:" + req.body.usr);
    if (req.body.pword == password) {
        loggedIn = true;
        res.send("You are logged in.");
        console.info("Logged in");

        // Start EasyRTC server
        var easyrtcServer = easyrtc.listen(app, socketServer);

    }
    else {

        res.render('login', {
          data: req.body,  //{ presenter, passport }
          errors: {
            presenter: {
            msg: 'Your username does not look right'
            },
            passport: {
            msg: 'Your password does not look right'
            }
          }//,
//              csrfToken: req.csrfToken()
        });

    }
 }
});

//Error Handling
app.use((req, res, next) => {
  res.status(404).send("Sorry can't find that!")
});

app.use((err, req, res, next) => {
console.error(err.stack)
res.status(500).send('Something broke!')
});


// Start server on port 8080
var webServer = app.listen(8080);
console.info('Listening on port ' + 80);

// Start Socket.io so it attaches itself to Express server
var socketServer = io.listen(webServer);

Я вижу, как моя консоль сообщает мне следующее:

Posted data:{}

req.body.pword:undefined

req.body.usr:undefined

Я все еще новичок в работе с Node.Js, и, очевидно, у меня есть некоторая путаница в том, как передавать параметры из моей (.ejs) формы в мой обработчик маршрута в req.body ... любые советы были бы ОЧЕНЬ признательны , Я действительно изо всех сил пытаюсь понять это. Заранее спасибо. С Уважением.

ПРИМЕЧАНИЕ. Как видно из моего кода, я удалил ссылки на «csurf» и «cookieparser», поскольку в моих предыдущих запусках эта информация БЫЛА возвращена в «req.body» ... поэтому я подумал, что они каким-то образом мешают .. . однако кажется, что происходит что-то еще.

Вот соответствующий HTML-код для формы входа:

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
</head>
<body>

<div class = "form-header">
  <% if (Object.keys(errors).length === 0) { %>
  <h2>Login Form</h2>
  <% } else { %>
  <h2 class = "errors-heading">Oops, please correct the following:</h2>
  <ul class = "errors-list">
   <% Object.values(errors).forEach(error => { %>
    <li><%= error.msg %></li>
   <% }) %>
   </ul>
   <% } %>
</div>


<form method = "post" action = "/login" novalidate>
<div class = "imgcontainer">
<img src = "img_avatar2.png" alt = "Avatar" class = "avatar">
</div>

<div class = "container">
<label for = "usr"><b>Username</b></label>
<input type = "text" placeholder=<%= data.presenter %> name = "usr" required>

<% if (errors.presenter) { %>
  <div class = "error"><%= errors.presenter.msg %></div>
<% } %>

<label for = "pword"><b>Password</b></label>
<input type = "password" placeholder=<%= data.passport %> name = "pword" required>

<% if (errors.passport) { %>
  <div class = "error"><%= errors.passport.msg %></div>
<% } %>

<button type = "submit">Login</button>

</div>

<div class = "container" style = "background-color:#f1f1f1">
<button type = "button" class = "cancelbtn">Cancel</button>
<span class = "psw">Forgot <a href = "#">password?</a></span>
</div>
</form>

</body>
</html>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
1 276
1

Ответы 1

Вам нужно использовать body-parser, просто импортировать не получится. Также оформить заказ документы body-parser

// configure the app to use bodyParser()

// parse urlencoded data type as JSON
app.use(bodyParser.urlencoded({
    extended: true
}));

// parse various different custom JSON types as JSON
app.use(bodyParser.json({ type: 'application/*+json' }));

// parse some custom thing into a Buffer
app.use(bodyParser.raw({ type: 'application/vnd.custom-type' }));

// parse an HTML body into a string
app.use(bodyParser.text({ type: 'text/html' }));

Спасибо за ввод, я думал, что использую его ... моя строка здесь: «// Требуется для анализа данных формы app.use (bodyParser ());». ...нет?

Pangit 25.08.2018 14:51

Здравствуйте ... Мне не удалось заставить ваше решение работать на меня ... Я не заметил разницы в поведении. После 2 дней биться головой о стену и, по сути, начать с нуля, я смог решить свои проблемы ... Я благодарю вас за ваш ответ и время ... Я ценю ваши усилия.

Pangit 26.08.2018 08:06

Другие вопросы по теме