Comment implémenter la connexion et l'enregistrement dans React

Comment implémenter la connexion et l'enregistrement dans React : 1. Construire des composants de style ; 2. Créer des composants de routage de base pour la page de connexion et d'enregistrement, avec un code tel que "import React, {Component} from 'react' ; import{PhoneLogin}. from '... {render(){...}" ; 3. Afficher la route d'enregistrement de connexion ; 4. Connectez-vous à la base de données pour implémenter le code d'enregistrement de connexion ; 5. Déterminez si l'utilisateur s'est connecté en jugeant le local stockage, et cliquez pour juger lors de la connexion.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment mettre en œuvre la connexion et l'inscription dans React ?

react implémente simplement la logique de connexion et d'enregistrement (implémentation de la simulation localStorage, connexion à la base de données et implémentation en interrogeant la base de données)

1.

2 , le composant de routage de base de la page de connexion et d'enregistrement

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

3. Affichage de l'itinéraire de connexion et d'enregistrement

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;

4. Utilisez l'accès aux données locales pour mettre simplement en œuvre le processus logique.

Stockage local d'une méthode d'écriture utilisateur

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;

Stockage de plusieurs méthodes d'écriture utilisateur dans localStorage

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;

Connectez-vous à la base de données pour implémenter le code d'enregistrement de connexion

1. . Code de routage du serveur (Le serveur construit par express dans Nodejs)

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;

3. La page d'accueil affiche le code d'opération

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}

. Apprentissage recommandé : "

Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!