react實作登入和註冊的方法:1、建立樣式元件;2、建立登入註冊頁面的基礎路由元件,程式碼如「import React,{Component} from 'react';import{PhoneLogin}from '... {render(){...}”;3、展示登入註冊路由;4、連接資料庫實現登入註冊代碼;5、透過判斷本地儲存來決定使用者是否登入過,點擊登入時進行判斷即可。
本教學操作環境:Windows10系統、react18.0.0版、Dell G3電腦。
react怎麼實現登入和註冊?
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><br> 验证码:<input><br> <button>登录</button> </phonelogin> ) }}export default Login;==========================================================================================import React ,{Component} from 'react';import {UserRegister} from './MineStyleComponent'class Register extends Component { render(){ return( <userregister> 手机号:<input><br> 密码:<input><br> 验证码:<input><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></route> <route></route> <button> { 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>this.users=el} /><br> 密码:<input>this.password=el} /><br> 验证码:<input><br> <button> 登录</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>this.users=el} /><br> 密码:<input>this.password=el} /><br> 验证码:<input><br> <button> 登录</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>this.users=el} /><br> 密码:<input>this.password=el} /><br> 验证码:<input><br> <button> 登录</button> </userregister> ) }}export default Register;推薦學習:《react影片教學》
以上是react怎麼實現登入和註冊的詳細內容。更多資訊請關注PHP中文網其他相關文章!