Bagaimana untuk melaksanakan log masuk dan pendaftaran secara bereaksi

Cara melaksanakan log masuk dan pendaftaran dalam reaksi: 1. Bina komponen gaya 2. Buat komponen penghalaan asas untuk halaman pendaftaran log masuk, kod seperti "import React,{Component} daripada 'react'; import{PhoneLogin }daripada '... {render(){...}"; 3. Paparkan laluan pendaftaran log masuk; 4. Sambungkan ke pangkalan data untuk melaksanakan kod pendaftaran log masuk; 5. Tentukan sama ada pengguna telah log masuk dengan menilai setempat storan, dan klik untuk menilai apabila log masuk. Boleh.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk melaksanakan log masuk dan pendaftaran secara bereaksi?

React hanya melaksanakan logik pendaftaran log masuk (pelaksanaan simulasi localStorage, sambungan pangkalan data dan pelaksanaan dengan menanyakan pangkalan data)

1. Bina komponen gaya

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

Pelaksanaan simulasi LocalStorage

2 halaman pendaftaran Komponen penghalaan

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;

3. Paparan laluan log masuk dan pendaftaran

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;

4. Gunakan akses data tempatan untuk melaksanakan proses logik.

Storan tempatan kaedah penulisan satu pengguna

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;

Penyimpanan kaedah penulisan berbilang pengguna dalam 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>this.users=el} /><br>
            密码：<input>this.password=el} /><br>
            验证码：<input><br>
            <button> 登录</button>
         </userregister>
      )
   }}export default Register;

Sambung ke pangkalan data untuk melaksanakan Kod pendaftaran log masuk

1. Kod operasi pangkalan data

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)

//打造用户信息接口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. Halaman hadapan memaparkan kod operasi

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>this.users=el} /><br>
            密码：<input>this.password=el} /><br>
            验证码：<input><br>
            <button> 登录</button>
         </userregister>
      )
   }}export default Register;

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan log masuk dan pendaftaran secara bereaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!