【React】React中设计一个简单的登录操作模板

基本思路

获取input元素中输入的用户名和密码,使用axios发送请求进行匹配，如果用户名和密码正确，则进行路由跳转

使用的库

都使用了目前的最新版本

"react": "^18.1.0",
"react-router-dom": "^6.3.0",
"axios": "^0.27.2"

1.获取input元素中输入的用户名和密码

定义Logout组件
在Logout组件使用useRef() hooks即可

import React, {useRef} from 'react';
const Logout = ()=>{const usernameRef = useRef();const passwordRef = useRef();const handleSubmit = (e)=>{e.preventDefault();const username = usernameRef.current.value;const password = passwordRef.current.value;}return (<div><h1>登录界面</h1><form><input ref={usernameRef} type='text' placeholder='username'/><br/><input ref={passwordRef} type='password' placeholder='password'/><br/><button onClick={handleSubmit} type='submit'>登录</button></form></div>);
}export default Logout;

2.使用axios发送请求进行匹配

对handleSubmit()修改如下

const handleSubmit = (e)=>{e.preventDefault();const username = usernameRef.current.value;const password = passwordRef.current.value;axios({method:'GET',url:`https://localhost/user/${username}`}).then(response => {if(response.data.password === password) {console.log('登录成功')}})}

3.进行路由跳转

首先简单定义一个login组件

const Login = ()=>{return (<div><h1>欢迎登录XX管理系统</h1></div>)
}export default Login;

修改index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";const root = ReactDOM.createRoot(document.getElementById('root')
);
root.render(<React.StrictMode><BrowserRouter><App/></BrowserRouter></React.StrictMode>
);

修改App.jsx

import React from 'react';
import {Routes, Route} from "react-router-dom";
import Logout from "./Logout";
import Login from "./Login";function App() {return (<Routes><Route path='/' element={<Logout/>}/><Route path='/login' element= {<Login/>}/></Routes>)
}export default App;

最后修改Logout组件
这里修改了用户名和密码为固定值
使用useState()获取当前是否登录
使用useNavigate()进行路由跳转
使用useEffect()获取登录状态的变化

import React, {useEffect, useRef, useState} from 'react';
import { useNavigate } from 'react-router-dom';const Logout = ()=>{const [login,setLogin] = useState(false);const navigate = useNavigate();const usernameRef = useRef();const passwordRef = useRef();const handleSubmit = (e)=>{e.preventDefault();const username = usernameRef.current.value;const password = passwordRef.current.value;// axios({//     method:'GET',//     url:`https://localhost/user/${username}`// }).then(response => {//     if(response.data.password === password) {//         console.log('登录成功')//     }// })if(username==='admin'&&password==='123456') {console.log('登录成功');setLogin(true);} else {console.log('用户名或密码错误');}}useEffect(()=>{if(login) {console.log('登录成功,正在跳转界面')navigate('/login')} else {console.log('等待用户登录')}})return (<div><h1>登录界面</h1><form><input ref={usernameRef} type='text' placeholder='username'/><br/><input ref={passwordRef} type='password' placeholder='password'/><br/><button onClick={handleSubmit} type='submit'>登录</button></form></div>);
}export default Logout;

【React】React中设计一个简单的登录操作模板相关推荐

实现一个简单的登录页面
实现一个简单的登录页面设计了一个登录页面,感觉还挺不错的实现效果设计的还是挺好看的吧分析需要的功能一个登录页面一个注册页面翻转效果输入后的正则判断,给用户提示信息翻转要清空页面的全部信 ...
小白教程——Windows下用PHP写一个简单的登录注册页面（二）
哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...
mvc登录实例 mysql_spring mvc + mybatis + mysql 调整的一个简单的登录例子
spring mvc + mybatis + mysql 整合的一个简单的登录例子今天用spring跟mybatis整合写了一个简单的登录例子,第一次整合,给自己做个笔记,可能注释写的有点少,做的不 ...
写一个简单的登录页面!!!(html)
写一个简单的登录页面!!! 大家好,我是伍柒. 今天我又双叒叕发现了一个好东西. 那就是用html做一个登录页面那,该如何做呢? 首先现在html里的body里写一个头部header标签(双标签 ...
一个简单的登录注册网页的实现
一个简单的登录注册网页的实现通过标签让标签内的内容居中显示,再通过标签中的method属性来设置请求方式为post(一般涉及密码等机密数据都用post请求):再通过action来设置请求地址.这其 ...
一对一直播源码，实现一个简单的登录界面
一对一直播源码,实现一个简单的登录界面 1.html <!DOCTYPE html> <html lang="en"> <head><me ...
PyQt5制作一个简单的登录界面
最近在学习GUI设计,分享做的一些小项目. 这篇文我们讲一下如何制作一个简单的登录界面. 目录一.效果图二.简述制作过程: 三.源码及材料: 1.源码: 2.图片素材: 一.效果图如下: 二.简 ...
利用cookie和jsp写一个简单的登录判断的网页，并获取上次的登录的时间。
要求:因为只是简单制作,没必要连数据库,直接用确定值去判断.然后就是第一次登录的时候需要获取到登录的时间,然后在下次登录的时候将上次获取到的时间输出. 思路:首先第一个,第一次登录的jsp(姑且当做注 ...
一个简单的SHELL脚本模板
一个简单的SHELL脚本模板,适用于Java项目的启动,停止,重启. 如果在windows上编辑,请使用Notepad++ 设置编码格式为UTF-8无BOM编码,脚本的文档格式为UNIX格式,否则会因 ...

【React】React中设计一个简单的登录操作模板

基本思路

使用的库

1.获取input元素中输入的用户名和密码

2.使用axios发送请求进行匹配

3.进行路由跳转

【React】React中设计一个简单的登录操作模板相关推荐

最新文章

热门文章