반응에서 로그인 및 등록을 구현하는 방법
- 藏色散人원래의
- 2023-01-05 09:54:522134검색
React에서 로그인 및 등록을 구현하는 방법: 1. 스타일 구성 요소를 빌드합니다. 2. 'react'에서 React,{Component} 가져오기, 다음에서 {PhoneLogin} 가져오기와 같은 코드를 사용하여 로그인 등록 페이지에 대한 기본 라우팅 구성 요소를 만듭니다. '...{render(){...}"; 3. 로그인 등록 경로 표시; 4. 데이터베이스에 연결하여 로그인 등록 코드 구현; 5. 로컬 저장소를 판단하여 사용자의 로그인 여부를 판별합니다. 를 클릭하여 로그인 시 판단해 보세요.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.
반응에서 로그인 및 등록을 구현하는 방법은 무엇입니까?
react는 단순히 로그인 및 등록 로직을 구현합니다(localStorage 시뮬레이션 구현, 데이터베이스 연결 및 데이터베이스 쿼리를 통한 구현)
1. Build 스타일 구성 요소
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><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. 로그인 및 등록 경로 표시
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. 로컬 데이터 액세스를 사용하여 논리 프로세스를 간단히 구현합니다.
한 명의 사용자 쓰기 방법을 로컬 저장소
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;
로컬 저장소에 여러 사용자 쓰기 방법 저장
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;
데이터베이스에 연결하여 로그인 등록 코드 구현
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>this.users=el} /><br>
密码：<input>this.password=el} /><br>
验证码：<input><br>
<button> 登录</button>
</userregister>
)
}}export default Register;가 표시됩니다.
추천 학습: "반응형 비디오 튜토리얼"위 내용은 반응에서 로그인 및 등록을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：반응에서 여러 페이지 사이를 이동하는 방법다음 기사：반응에서 여러 페이지 사이를 이동하는 방법