react如何实现登录和注册

云技术五哥 • 03/06 09:18 • 开发 • 阅读 90

这篇文章主要介绍了react如何实现登录和注册的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇react如何实现登录和注册文章都会有所收获，下面我们一起来看看吧。 react实现登录和注册的方法：1、搭建样式组件；2、创建登录注册页面的基础路由组件，代码如“import React,{Component免费云主机域名} from ‘react’;import{PhoneLogin}from ‘… {render(){…}”；3、展示登录注册路由；4、连接数据库实现登录注册代码；5、通过判断本地存储来确定用户是否登录过，点击登录时进行判断即可。react简单实现登录注册逻辑（localStorage模拟实现、数据库连接并通过查询数据库实现）1、搭建样式组件2、登录注册页面的基础路由组件3、登录注册路由的展示4、利用本地数据存取简单实现一下逻辑过程。本地存储一个用户写法localStorage中存储多个用户写法1、数据库操作代码


//打造用户信息接口constexpress=require('express');constrouter=express.Router();const{user}=require('../db');//打造restful接口，不同接口暴露不同功能人router.route('/userInfo')

.post(async(req,res,next)=>{

const{userName,pass}=req.bodyconstresult=awaituser.query()

//判断请求与数据库数据，在遍历前需要判断后台查询是否为空值
varf=result&&result.some(item=>{
if(item.userName===userName)returntrue
})

if(f){//证明用户名存在，需要判断密码是否正确
letpassFlag=result&&result.some((item)=>{
if(item.userName===userName&&item.pass===pass){
returntrue
}
});

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、前台页面显示操作代码关于“react如何实现登录和注册”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“react如何实现登录和注册”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注百云主机行业资讯频道。

相关推荐: vue的el是什么及有什么作用

本篇内容介绍了“vue的el是什么及有什么作用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！在vue中，el是element的缩写，可称之为挂载点。el的作用…