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;

关于 "react怎么实现登录和注册" 就介绍到此。希望多多支持编程宝库

react fetch如何请求数据:本文讲解"react fetch怎么请求数据",希望能够解决相关问题。react fetch请求数据的方法:1、将请求的方法放在生命周期的“componentDidMount”里;2、封装fetch请求; ...