我有一個登錄組件，我向服務器發送了一個包含用戶名和密碼的 post 請求，然后在后端收到資料后，我會將它與后端的 SELECT 查詢結果進行匹配，然后我想向客戶端發送資料從服務器...
這是我的登錄代碼：
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import Axios from 'axios'
function Login() {
const [account, setAccount] = useState({
username: "",
password: ""
})
function handleClick(event) {
Axios.post("http://localhost:3001/login", {
username: account.username,
password: account.password
}).then(() => {
console.log("Account Logged In");
})
event.preventDefault();
}
function handleChange(event) {
const { name, value } = event.target;
setAccount(prev => ({ ...prev, [name]: value }))
}
return (
<div className="float shadow bg-light px-3 py-3 ai-center js-between my-3">
<h2 className="brand color-olive">Furns</h2>
<h1 className="color-olive">Login</h1>
<form className="column">
<label htmlFor="username" className="color-olive my-1"> Username</label>
<input id="username" type="text" className="txt-box" name="username" value={account.username} onChange={handleChange} />
<label htmlFor="password" className="color-olive my-1">Password </label>
<input id="password" type="password" className="txt-box" name="password" value={account.password} onChange={handleChange} />
<button type="submit" className="mt-4 olive login-btn-large w-100" onClick={handleClick}>Login</button>
<Link to="/">
<button className="my-1 olive bg-light btn-cancel w-100">Cancel</button>
</Link>
</form>
</div>
);
}
export default Login;
這是服務器中的代碼：
app.post("/login", (req, res) => {
const username = req.body.username;
const password = req.body.password;
var selectAccount = "SELECT username, password FROM user WHERE username=? AND password=?";
db.query(selectAccount, [username, password], function (err, result) {
if (err) throw err;
})
//我想將查詢結果與用戶輸入匹配發送一個布林值到登錄組件})
uj5u.com熱心網友回復：
我不確定 SQL 語法，但這是您可以執行此操作的方法。
- 首先找到
username - 如果沒有找到記錄，則
User does not exist回應。 - 否則，檢查是否
results[0].password !== password，然后發送wrong password - 否則，密碼正確并發送
success response
您可以response使用res.send({/*data inside*/}). 在這里，我使用了custom status code，以便前端的錯誤處理變得容易。
app.post("/login", (req, res) => {
const username = req.body.username;
const password = req.body.password;
var selectAccount = "SELECT username, password FROM user WHERE username=?";
db.query(selectAccount, [username], function (err, result) {
if (err) throw err;
if(results.length === 0) return res.send({status: 404, msg: "No user found"});
if(results[0].password !== password) return res.send({status: 400, msg:"Wrong Password"})
return res.send({status: 200, msg:"Login Successful"})
})
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/374086.html