这是一个基本的网页形式，但我有问题。我花了好几个小时做这件事，但似乎还是找不到问题。
我得到错误信息Cannot destructure property 'email' of 'req.body' as it is undefined。完整的源代码可以在这里找到:https://github.com/SophalLee/project_06_sophal_lee。下面是我的代码片段:
index.js
app.post('/login', (req, res) => {
const { email, password } = req.body;
console.log(email);
})
login-form.js
import { checkName, numbersAndSpaceCheck, emailCheck } from '/js/validation.js';
const loginForm = document.getElementById('login');
const email = document.getElementById('email');
const password = document.getElementById('password');
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
if(checkInputs()) {
loginForm.submit();
}
});
/* Validate input from form */
function checkInputs() {
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
let emailSuccess = false;
let passwordSuccess = false;
if(emailValue === '') {
setErrorFor(email, "Email cannot be blank");
emailSuccess = false;
}
else if(!emailCheck(emailValue)) {
setErrorFor(email, "Invalid email");
emailSuccess = false;
}
else {
setSuccessFor(email);
emailSuccess = true;
}
if(passwordValue === '') {
setErrorFor(password, "Password cannot be blank");
passwordSuccess = false;
}
else {
setSuccessFor(password);
passwordSuccess = true;
}
return (emailSuccess & passwordSuccess);
}
/* Display error message and error icon */
export function setErrorFor(input, message) {
const formControl = input.parentElement;
const error = formControl.querySelector('.error-message');
error.className = 'error-message error';
error.innerText = message;
formControl.className = 'form-control error';
}
/* Display success icon and remove any error message */
export function setSuccessFor(input) {
const formControl = input.parentElement;
const error = formControl.querySelector('.error-message');
error.className = 'error-message';
formControl.className = 'form-control success';
}
login.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/cf53bba659.js" crossorigin="anonymous"></script>
<link href="/css/forms.css" rel="stylesheet" type="text/css"/>
<script type="module" src="/js/login-form.js" defer></script>
<title>Locations - Login</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>Login</h1>
</div>
<form class="form" id="login" action="/login" method="POST" novalidate>
<div class="form-control">
<label for="email">Email</label>
<input name="email" id="email" type="text" required>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<div class="error-message"> </div>
</div>
<div class="form-control">
<label for="password">Password</label>
<input name="password" id="password" type="password" required>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<div class="error-message"> </div>
</div>
<button>Submit</button>
</div>
</form>
</div>
</body>
</html>
我只需要index.js文件中的下面一行:
app.use(express.urlencoded({ extended: true }));