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;