溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了react如何實現登錄和注冊的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇react如何實現登錄和注冊文章都會有所收獲，下面我們一起來看看吧。
react實現登錄和注冊的方法：1、搭建樣式組件；2、創建登錄注冊頁面的基礎路由組件，代碼如“import React,{Component} from 'react';import{PhoneLogin}from '... {render(){...}”；3、展示登錄注冊路由；4、連接數據庫實現登錄注冊代碼；5、通過判斷本地存儲來確定用戶是否登錄過，點擊登錄時進行判斷即可。
react簡單實現登錄注冊邏輯（localStorage模擬實現、數據庫連接并通過查詢數據庫實現）
1、搭建樣式組件
import styled from 'styled-components';export const MineContainer = styled.div`
flex:1;
`export const PhoneLogin =styled.div`
padding:10px;
input{
margin:3px;
}
`export const UserRegister = styled.div`
padding:10px;
input{
margin:3px;
}
`
2、登錄注冊頁面的基礎路由組件
import React ,{Component} from 'react';import {PhoneLogin} from './MineStyleComponent'class Login extends Component {
render(){
return(
<PhoneLogin>
手機號：<input type="text"/><br/>
驗證碼：<input type="password"/><br/>
<button>登錄</button>
</PhoneLogin>
)
}}export default Login;==========================================================================================import React ,{Component} from 'react';import {UserRegister} from './MineStyleComponent'class Register extends Component {
render(){
return(
<UserRegister>
手機號：<input type="text"/><br/>
密碼：<input type= "password" /><br/>
驗證碼：<input type="password"/><br/>
<button>登錄</button>
</UserRegister>
)
}}export default Register;
3、登錄注冊路由的展示
import React, { Component} from 'react';import {MineContainer} from './MineStyleComponent'import Login from './Login';import Register from './register';import {Route} from 'react-router-dom'class Mine extends Component {
constructor(){
super()
this.state={
loginFlag:false,//通過開關切換登錄方式
}
}
check = ()=>{//通過編程導航進行兩個路由的切換
if(this.state.loginFlag){
this.props.history.push('/mine/register')
}else{
this.props.history.push('/mine/login')
}
this.setState({
loginFlag:!this.state.loginFlag,
})
}
render(){
const {loginFlag} = this.state return (
<MineContainer>
<Route path = "/mine/login" component = { Login }></Route>
<Route path = "/mine/register" component = { Register }></Route>
<button onClick = {this.check} > { loginFlag?'用戶名登錄':'短信驗證登錄'} </button>
</MineContainer>
)
}}export default Mine;
4、利用本地數據存取簡單實現一下邏輯過程。
本地存儲一個用戶寫法
import React ,{Component} from 'react';import {UserRegister} from './MineStyleComponent'class Register extends Component {
//本地存儲一個賬戶的模擬登錄注冊寫法
//邏輯：通過判斷本地存儲，來確定用戶是否登錄過，點擊登陸時進行判斷
LoginClick = () =>{
const username = this.users.value;
const password = this.password.value;
let ls_users = localStorage.getItem('users');
if(ls_users){
//如果ls_users存在證明已有用戶注冊,判斷密碼，用戶名是否正確
ls_users = JSON.parse(ls_users)
if(ls_users.username===username&&ls_users.password===password){
alert('登錄成功')
this.props.history.push('/home')
}else{
alert('用戶名或登錄密碼輸入錯誤')
}
}else{
//沒有用戶注冊，直接保存到本地存儲
localStorage.setItem('users',JSON.stringify({username,password}))
this.props.history.push('/home')
}
}
render(){
return(
<UserRegister>
用戶名：<input type="text" ref= {el=>this.users=el} /><br/>
密碼：<input type= "password" ref= {el=>this.password=el} /><br/>
驗證碼：<input type="text"/><br/>
<button onClick= {this.LoginClick} > 登錄</button>
</UserRegister>
)
}}export default Register;
localStorage中存儲多個用戶寫法
import React ,{Component} from 'react';import {UserRegister} from './MineStyleComponent'class Register extends Component {
//本地存儲一個賬戶的模擬登錄注冊寫法
//邏輯：通過判斷本地存儲，來確定用戶是否登錄過，點擊登陸時進行判斷
LoginClick = () =>{
let obj = [];
const username = this.users.value;
const password = this.password.value;
let ls_users = localStorage.getItem('users');
if(ls_users){
//如果ls_users存在證明已有至少用戶注冊,
obj = JSON.parse(ls_users)
console.log(obj)
//對本地存儲數據進行便利與輸入值對比
let fg = obj.some (item => {
if(item.username===username) return true//用戶名已存在
})
if(fg){//fg為真找到用戶名，接下里對密碼判斷
//對存儲數據遍歷，比對用戶名名與密碼
let f=false
obj.map(item => {
if(item.username===username&&item.password===password){
f=true;
return f;
}
})
if(f){//查詢正確可以正常登錄
alert('登錄成功')
this.props.history.push('/home')
}else{
alert('密碼錯誤')
}
}else{//沒找到對將用戶保存到本地，進行自動注冊
obj.push({username,password});
localStorage.setItem('users',JSON.stringify(obj))
this.props.history.push('/home')
}
}else{
//沒有用戶注冊，直接保存到本地存儲
obj.push({username,password})
localStorage.setItem('users',JSON.stringify(obj))
this.props.history.push('/home')
}
}
render(){
return(
<UserRegister>
用戶名：<input type="text" ref= {el=>this.users=el} /><br/>
密碼：<input type= "password" ref= {el=>this.password=el} /><br/>
驗證碼：<input type="text"/><br/>
<button onClick= {this.LoginClick} > 登錄</button>
</UserRegister>
)
}}export default Register;
const { userSchema } = require('./schema');const { userModel } = require ('./module');//連接數據庫const connect = require ('./connect');connect.init();//數據庫操作const db = {
user: {
add(data){//數據添加
const user = new userModel(data)
user.save()
},
query(){//數據庫查詢,通過promise異步函數將結果返回出去
return new Promise( (resolve,reject)=>{
userModel.find( {},(err,docs) => {//查詢數據庫所有
if(err) console.log(err)
resolve(docs)//將查詢結果返回出去
})
})
}
}}module.exports = {
user: db.user}
//打造用戶信息接口const express = require ('express');const router = express.Router();const {user} = require ('../db');//打造restful接口，不同接口暴露不同功能人router.route('/userInfo')
.post( async (req,res,next) => {
const { userName, pass} = req.body const result = await user.query()
//判斷請求與數據庫數據，在遍歷前需要判斷后臺查詢是否為空值
var f =result && result.some( item => {
if( item.userName === userName ) return true
})
if(f){//證明用戶名存在，需要判斷密碼是否正確
let passFlag = result&&result.some( (item) => {
if(item.userName===userName&&item.pass===pass){
return true
}
});
if(passFlag){//密碼正確，登錄成功
res.render('user',{
data:JSON.stringify({
info:'登錄成功',
status:2
})
})
}else{//密碼錯誤
res.render('user',{
data:JSON.stringify({
info:'用戶名已存在或用戶密碼錯誤',
status:0
})
})
}
}else{//用戶不存在，直接存入數據庫,注冊
user.add({...req.body})
res.render('user',{
data:JSON.stringify({
info:'注冊成功',
status:1
})
})
}
});module.exports = router//暴露路由接口
3、前臺頁面顯示操作代碼
import React ,{Component} from 'react';import {UserRegister} from './MineStyleComponent';import http from '../../utils/http';class Register extends Component {
//本地存儲一個賬戶的模擬登錄注冊寫法
//邏輯：通過判斷本地存儲，來確定用戶是否登錄過，點擊登陸時進行判斷
async LoginClick (){
const username = this.users.value;
const password = this.password.value;
const params = new URLSearchParams()
params.append('userName',username);
params.append('pass',password)
const res = await http({//調用封裝好的axios數據請求方法
url:'http://localhost:3000/userInfo',
method:'POST',
data:params })
if( res.data.status === 0 ){
alert('用戶名已經存在或是用戶名密碼錯誤')
}else if ( res.data.status === 1){
alert('注冊成功')
}else {
this.props.history.push('/home')
alert('登錄成功')
}
}
render(){
return(
<UserRegister>
用戶名：<input type="text" ref= {el=>this.users=el} /><br/>
密碼：<input type= "password" ref= {el=>this.password=el} /><br/>
驗證碼：<input type="text"/><br/>
<button onClick= {this.LoginClick.bind(this)} > 登錄</button>
</UserRegister>
)
}}export default Register;關于“react如何實現登錄和注冊”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“react如何實現登錄和注冊”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
