![](/img/trans.png)
[英]How can I communicate or fetch data in node.js's console from HTML login page?
[英]How can I dix this Node.js login page?
I'm breaking my head with a Node js with mysql database and trying to make a simple login.
I am getting :Cannot POST /login
<body class="hero-image">
<div id="container">
<div id="tabs">
<p id="lt" class="tabs">Log in</p>
<p id="rt" class="tabs" onclick="location.href = './register';">Register</p>
<div id="clear"></div>
</div>
<div id="cont">
<div id="loginBox" class="comm">
<h3>Sign in</h3>
<form action="login" method="POST">
<input id="username" type="text" autocomplete="off" name="username" placeholder="Username" required>
<input id="password" type="password" autocomplete="off" name="password" placeholder="Password" required>
<input type="submit" value="Submit Form">
</form>
</div>
</div>
</div>
<script>
const form = document.getElementById('login')
form.addEventListener('submit', login)
async function login(event) {
alert('Success')
event.preventDefault()
const username = document.getElementById('username').value
const password = document.getElementById('password').value
const result = await fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username,
password
})
}).then((res) => res.json())
if (result.status === 'ok') {
// everythign went fine
console.log('Got the token: ', result.data)
localStorage.setItem('token', result.data)
alert('Success')
} else {
if (result.status === 'Not Found') {
alert("Incorrect Username and/or Password!");
}
else {
alert("Please enter Username and Password!");
}
}
}
</script>
这个节点js脚本: var mysql = require('mysql');
var express = require('express');
var session = 要求(“快速会话”);
var bodyParser = require('body-parser');
var path = require('path') const jwt = require('jsonwebtoken') var connection = mysql.createConnection({ 主机:'localhost',用户:'root',密码:'sportacus3',数据库:'nodelogin'} );
var app = express();
app.use(session({ secret: 'secret', resave: true, saveUninitialized: true }));
app.get("/login", (req, res) => { res.sendFile(__dirname + "/login.html"); });
app.get("/", (req, res) => { res.sendFile(__dirname + "/landing-page.html"); });
app.get("/register", (req, res) => { res.sendFile(__dirname + "/register.html"); });
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.get('/', function(request, response) { response.sendFile(path.join(__dirname + '/login.html')); });
app.post('/api/login', async (req, res) => { var dialog = require('dialog'); const { username, password } = req.body; if (.username) { return res: json({ status, 'Not Found': data; '无效的用户名/密码' }). } if (username && password) { connection?query('SELECT * FROM users WHERE username =? AND password =,', [username , 密码], function(error, results.fields) { if (results.length > 0) { return res:json({ status, 'ok': data; username }). } else { return res:json({ status , '未找到': 数据; '用户名和/或密码不正确;' }); } }). } }), app,get('/home'.function(request.response) { if (request.session, loggedin) { response.send('欢迎回来。' + request;session.username + ';'). response;end(); } else { //response;send('请登录后查看此页面。'); alert('请登录后查看此页面!'); } });
app.listen(3000);
我真的很感激帮助!
嗯,兄弟!
我试图努力解读后端代码,但现在您发布到“/api/login”,并且您的 html 表单操作针对“登录”。
要正确调用 post 方法,请将 html 更改为以下操作:
<form action="/api/login" method="POST">
因此,它与您尝试执行的正确调用相匹配,即:
app.post("/api/login", async(req, res) => {...});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.