国外苹果ID/美日韩台、新加坡、香港等——点击购买
韩国区已过年龄认证17+ 19+ 的苹果id游戏应用下载
独享美区ID小火箭账号----点击购买
正版苹果商店礼品卡、软件兑换码——点击购买
前言
在实现登录页面时，大多有这样的需求：用户输入账号密码后，需要判断账号密码是否不为空；如果不是苹果id台湾区登录账号不跳转，则判断账号密码是否正确；如果没有问题苹果id台湾区登录账号不跳转，则跳转到页面更改。现在我用react+react-+来实现这个功能
完成
代码显示
客户端代码：
import React from 'react';
import ReactDom from 'react-dom';
import { Form, Row, Col, InputGroup, Button, Modal} from 'react-bootstrap';
import './login.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../src/resource/icons/fontawesome-free-5.13.0-web/css/all.css';
import $ from 'jquery';
class Login extends React.Component {
constructor(props){
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.registerUser = this.registerUser.bind(this);
this.state = {validated: false, show: false};
}
componentDidMount(){
}
handleSubmit(event){
const formElement = event.currentTarget;//获得表单元素
event.preventDefault(); //阻止表单提交的默认行为，因为我想由我控制不想要默认的行为
event.stopPropagation(); //阻止事件继续传播
if (formElement.checkValidity() === false) { //如果表单的必要条件不满足:此处指的是账号或密码为空
this.setState({validated: true}); //显示账号密码处的错误提示
}
else{
let usernameVal = formElement.elements.username.value; //获取输入的账号
let passwordVal = formElement.elements.password.value; //获得输入的密码
//如果账号密码都不为空，那就验证账号密码是否为空，post就是跟服务器确认账号密码是否正确
$.post('/login',{username: usernameVal ,password: passwordVal}, (data)=>{
//根据返回值进行判断,如果匹配服务器返回1,否则返回0
if(data == "1"){ //如果账号密码正确，服务器发回1
document.getElementById("jumpToIndex").submit(); //跳转到应用界面
console.log("1");
}
else{
console.log("2");
this.setState({show: true}); //显示一个model，提示账号密码错误
//2秒后model隐藏
window.setTimeout(()=>{
this.setState({show: false});
}, 2000);
}
})
}
}
registerUser(){
document.getElementById("jumpToRegister").submit(); //跳转到注册页面
}
render() {
return (
<div id = "login">
<div id = "loginTitle">实验室资产管理系统</div>
<div id = "loginMain">
<Form id = 'jumpToIndex' method="GET" action="/"></Form>
<Form id = 'jumpToRegister' method="GET" action="/registerUser"></Form>
<Form id = "validateForm" noValidate validated={this.state.validated} onSubmit={this.handleSubmit}>
<Col id = "loginFormCol">
<Form.Label id = "loginFormTitle">登录账号</Form.Label>
<InputGroup className = "userName">
<InputGroup.Prepend>
<InputGroup.Text id="userNameIcon"><i className="fas fa-user"></i></InputGroup.Text>
</InputGroup.Prepend>
<Form.Control name="username" type="text" placeholder="Username" required />
<Form.Control.Feedback type="invalid">
Please choose a username.
</Form.Control.Feedback>
</InputGroup>
<InputGroup className = "password">
<InputGroup.Prepend>
<InputGroup.Text id="passwordIcon"><i className="fas fa-lock"></i></InputGroup.Text>
</InputGroup.Prepend>
<Form.Control name="password" type="password" placeholder="password" required />
<Form.Control.Feedback type="invalid">
Please choose a password.
</Form.Control.Feedback>
</InputGroup>
<Row id = "passwordHelp">
<Form.Label id = "registerUser" onClick = {this.registerUser}>注册用户</Form.Label>
<Form.Label id = "forgetPassword"> forget password</Form.Label>
</Row>
<Button id = "loginButton" type="submit">登录</Button>
</Col>
</Form>
<Modal size="sm" show={this.state.show} onHide={() => this.setState({show:false})} animation={false}>
<Modal.Header>
<Modal.Title style={{textAlign: "center"}}>登录</Modal.Title>
</Modal.Header>
<Modal.Body>账号或者密码不正确！</Modal.Body>
</Modal>
</div>
</div>
);
}
}
ReactDom.render(
<Login />,
document.getElementById('root')
)
服务器段代码（已实现）
/* GET users listing. */
app.get('/login', function(req, res) {
res.render("login"); //向客户端发回login.html页面
return res;
});
// 用户登录
app.post('/login', function(req, res, next) {
//这里没啥好说的，不会的去查express的passport、passport-local中间件
passport.authenticate('local', function(err, user, info) {
console.log("err,user,info", err, user, info);
if (err) {
console.log("1");
return next(err);
}
if (!user) {
//return res.send("用户名不对");
console.log("用户名不对");
res.set('Content-Type','text/plain'); //express默认发送html类型的数据，所以要修改为文本类型
res.send("2");
return res;
}
req.logIn(user, function(err) {
if (err) {
console.log("3");
return next(err);
}
req.session.username = user.username;
res.set('Content-Type','text/plain');
res.send("1");
return res;
});
})(req, res, next);
});
效果图：
不输入账号密码时，会提示错误
2.账号密码已输入
阐明：
1.
<Form id = 'jumpToIndex' method="GET" action="/"></Form>
<Form id = 'jumpToRegister' method="GET" action="/registerUser"></Form>
<Form id = "validateForm" noValidate validated={this.state.validated} onSubmit={this.handleSubmit}>
...
</Form>
这三行代码非常重要。前两个Form元素只做跳转用，第三个提供账号密码输入接口。
$.post('/login',{username: usernameVal ,password: passwordVal}, (data)=>{...}
这行代码是将输入的账号密码传递给服务器进行校验。
3.服务器端
res.set('Content-Type','text/plain')；
res.send("1");
这行代码是服务器发回的账号密码确认信息
**tips:**推荐一些我用的网站
react-:登录验证示例（附源码）：
国外苹果ID/美日韩台、新加坡、香港等——点击购买
韩国区已过年龄认证17+ 19+ 的苹果id游戏应用下载
独享美区ID小火箭账号----点击购买
正版苹果商店礼品卡、软件兑换码——点击购买
原文链接：3.+react-+来实现这一功能实现代码展示代码，转载请注明来源！