运用react如何实现登录和注册

发布时间：2023-07-07 12:00:13 所属栏目：教程来源：未知

导读： 　　这篇文章主要介绍了react如何实现登录和注册的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇react如何实现登录和注册文章都会有所收获，下面我们一起来

　　这篇文章主要介绍了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;

　　   }

　　`

　　localStorage模拟实现

　　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;

　　react如何实现登录和注册

　　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;

　　连接数据库实现登陆注册代码

　　1、数据库操作代码

　　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}

　　2、服务端路由代码(Nodejs中express搭建的服务端)

　　//打造用户信息接口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;

（编辑：好新闻门户网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!