在前端，我創建了一個具有用戶名和密碼的登錄模塊，并在單擊登錄按鈕時登錄按鈕它應該將值傳遞給 spring boot
export default function Login() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
function validateForm() {
return username.length > 0 && password.length > 0;
}
function handleSubmit(event) {
event.preventDefault();
}
function LoginUser(){
console.log(username, password);
}
return (
<div className="Login">
<Form onSubmit={handleSubmit}>
<Form.Group size="lg" controlId="username">
<Form.Label>Username</Form.Label>
<Form.Control
type="username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
</Form.Group>
<Form.Group size="lg" controlId="password">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</Form.Group>
<Button block size="lg" type="submit" onClick={LoginUser} disabled={!validateForm()} >
Login
</Button>
</Form>
</div>
);
}
讓我知道如何將值添加到后端
uj5u.com熱心網友回復：
您需要將帶有用戶名和密碼的請求發送到服務器或某些第三方 API 以進行身份??驗證。
網上有很多教程，但它們的相關性取決于你支持的框架。這是一個示例：https : //www.cluemediator.com/login-app-create-login-form-in-reactjs-using-secure-rest-api。
uj5u.com熱心網友回復：
你快到了。您只需要POST使用 React 的內置fetchAPI 向LoginUser()函式添加實際的 RESTful API 呼叫（最有可能），該函式已在用戶單擊Button組件時被呼叫（并且應該可以通過訪問username和password變數useState）。所以它可能看起來像：
function LoginUser() {
console.log(username, password);
(async () => {
await fetch('http://path-to-spring-boot-api/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ 'username': username, 'password': password })
});
})();
}
根據 OP 的評論進行編輯
function LoginUser() {
const body = { 'password': password, 'username': username };
console.log(`body json object that will be POSTed is :${body}`)
(async () => {
await fetch('http://path-to-spring-boot-api/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(body)
});
})();
}
此外，在生產前端應用程式（或其他任何地方！）中記錄密碼時要小心。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/366493.html
上一篇：獲取在Junit中自動裝配的@ConfigurationPropertiesbean
下一篇：傳單地圖未定義并同時初始化