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;

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;