Javascript 不从登录表单获取数据的简单教程代码(express js)
因此,我正在关注一个关于如何设置简单登录服务器的YouTube教程(频道名称:WebdevSimplified,视频:“Node.jsPassport登录系统教程”) 该代码(在视频中我处于@14:12标记的阶段)假设是控制台在终端上记录一个新注册用户的数组 但是我得到了一个空数组。尽管有相同的代码(我一步一步地跟着他),但我没有得到新用户。我做错了什么Javascript 不从登录表单获取数据的简单教程代码(express js),javascript,node.js,express,Javascript,Node.js,Express,因此,我正在关注一个关于如何设置简单登录服务器的YouTube教程(频道名称:WebdevSimplified,视频:“Node.jsPassport登录系统教程”) 该代码(在视频中我处于@14:12标记的阶段)假设是控制台在终端上记录一个新注册用户的数组 但是我得到了一个空数组。尽管有相同的代码(我一步一步地跟着他),但我没有得到新用户。我做错了什么 const path = require('path'); const fs = require('fs'); const express =
const path = require('path');
const fs = require('fs');
const express = require('express');
const app= express();
const bcrypt = require('bcrypt');
const session = require('express-session');
// Get express ready to setup server
var users =[];
//{id:"", name:"", email:"", password:"",}
app.set('view-engine', 'ejs')
app.use(express.urlencoded({ extended: false }));
// Sets up main page
app.get('/', (req, res) => {
res.render('index.ejs', {name: 'Moe'})
})
////////////////Sets up login page////////////////////////
app.get('/login', (req, res) => {
res.render('login.ejs')
})
///////////////Sets up register page////////////////////////
app.get('/register', (req, res) => {
res.render('register.ejs')
})
///////////////////// Recieves date from register /////////////////
app.post('/register', async (req, res) => {
try {
const hashedPassword = await bcrypt.hash(req.body.password, 10)
users.push({
id: Date.now().toString(),
name: req.body.name,
email: req.body.email,
password: hashedPassword
})
res.redirect('/login')
} catch {
res.redirect('/register')
}
console.log(users);
});
///////////////////////////////////////////////////////
// Setup Server
app.listen(5000);
用于登录的html
<h1>Login</h1>
<form action="register" method="post">
<div>
<label for="name">username</label>
<input type="text" id="name" name="name" required>
</div>
<br>
<div>
<label for="name">password</label>
<input type="text" id="password" password="password"required>
</div>
<br>
<button type="submit">Login</button>
<br>
<a href="register">Register</a>
</form>
<br>
back to <a href="/">Homepage</a>
登录
用户名
密码
登录
回到
用于注册的html
<h1>register</h1>
<form action="register" method="POST">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<br>
<div>
<label for="email">email</label>
<input type="email" id="email" name="email" required>
</div>
<br>
<div>
<label for="password">password</label>
<input type="password" id="password" password="password"required>
</div>
<br>
<button type="submit">Register</button>
<br>
<a href="login">Login</a>
</form>
<br>
back to <a href="/">Homepage</a>
寄存器
名称
电子邮件
密码
登记
回到
需要解析请求正文。将此添加到您的路线上方:
app.use(express.json())代码>
^^^把这部分擦掉。它只需要一个JSON负载^^^
在html中,密码输入元素使用password=“password”而不是name=“password”。对不起,我刚刚看了视频。我本以为它是以表单数据的形式发送的,在这种情况下,它应该在没有express.json()中间件的情况下工作。谢谢,但是为什么它返回一个空数组而不是一个只有名称和电子邮件的数组呢?它从来没有将对象添加到用户数组中。如果将底部部分替换为:catch(error){console.log(error);res.redirect('/register')}好的,谢谢。这真的很有帮助。你能为你的表单分享html吗?是的,刚刚分享过。注册和登录我更新了下面的答案。密码的输入元素缺少name属性。