• 技术文章 >web前端 >前端问答

    react怎么实现登录和注册

    藏色散人藏色散人2023-01-05 09:55:36原创102

    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;
       }
    `

    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;

    d8dcb8098080f35740212615d2cbcc6.jpg

    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;
    推荐学习:《react视频教程

    以上就是react怎么实现登录和注册的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:React
    上一篇:react 多个页面之间跳转怎么实现 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react项目怎么改标题• react怎么实现手机验证码• react native 怎么捕捉错误• react组件样式引用失败怎么办• react 多个页面之间跳转怎么实现
    1/1

    PHP中文网