React学习（七）——简单的用户名密码验证实现
大家好，我是凯文，通过之前的学习，我们已经对React框架以及其使用方法有了一个系统地了解，本篇文章将介绍：如何在React页面中实现用户名和密码验证。
本篇文章涉及React.js、node.js、npm、express（或是其他后台服务器）、Semantic-ui（UI控件）。
其中部分知识可以参照我之前的文章：
凯文的React项目搭建教程： https://blog.csdn.net/daxiazouyizou/article/details/79743832
凯文的React组件和数据传递教程： https://blog.csdn.net/daxiazouyizou/article/details/79748078
凯文的CSS样式设置教程： https://blog.csdn.net/daxiazouyizou/article/details/79758558
凯文的服务器连接教程： https://blog.csdn.net/daxiazouyizou/article/details/79773307
那我们首先来确定一下需求，也就是我们要实现什么样的功能： 页面中需要包含‘用户名输入框’、‘密码输入框’、‘提交按钮’、‘重置按钮’，在输入用户名和密码之后按下提交按钮则连接api接口，访问服务器并传回信息。
其中，前端页面将搭载在React框架上，并采用Semantic-ui作为外观控件，各位也可以自行定义CSS样式来构建页面UI。连接api接口的方式将采用Fetch发送Post请求并传出json格式的数据，api传回的也将是json格式的数据。
后台服务器将采用node.js平台上的express服务器框架，各位也可以采用自己熟悉的后台技术来搭建服务器，本次的功能十分简单，所以服务器的搭建并不费力，各位可以直接按照本文教程一步一步做。
好了，下面我们就正式开始搭建项目，首先创建出基本的React项目文件夹，具体步骤可以参照上面给出的链接（主要是前两个），下面将直接采用‘第二个链接’中的结果进行改造。
根据链接中的步骤搭建完毕后，我们使用 npm start 开启项目，在 localhost:3000 地址中可以看到：
View.js文件内容如下所示:
import React from 'react';
class View extends React.Component {
constructor(props) { //构造函数
super(props);
this.state = {
}
}
render(){
return(<div>{this.props.text}</div>)
}
}
export default View;
现在我们要在项目中引入Semantic-ui,步骤如下（进入项目目录，在CMD命令行中输入）：
cnpm i --save-dev semantic-ui-react
cnpm install semantic-ui-css --save
等待其运行完毕，然后再index.js中引入css样式:
import 'semantic-ui-css/semantic.min.css';
然后，所有在index.js之下的js文件都可以使用Semantic-ui控件了，官网地址： https://react.semantic-ui.com/
下面我们对View.js文件进行改造，内容如下：
import React from 'react';
import { Segment, Input, Button } from 'semantic-ui-react'
class View extends React.Component {
constructor(props) { //构造函数
super(props);
this.state = {
}
}
render(){
return(
<div style={{margin:'10px'}}>
<Segment style={{textAlign:'center'}}>
<h2>请登录</h2>
<Input id='user' placeholder='用户名' style={{marginBottom:'10px'}}/><br/>
<Input id='password' type='password' placeholder='密码' style={{marginBottom:'10px'}}/>
<br/>
<Button primary content='登录' style={{marginBottom:'10px'}}/>
<Button content='重置' style={{marginLeft:'20px'}}/>
</Segment>
</div>
)
}
}
export default View;
我们在页面中添加了两个Input框和两个Button按钮，这些都是Semantic自带的组件，对原生HTML中的<input>和<button>进行了改造。修改完之后，页面显示变成了如下所示：
好，现在我们已经搭建了显示的内容，现在需要使得React框架获取到用户名和密码，并将其储存到State中，用于作进一步的处理（React中的数据交互一般使用State和Props作为储存地和媒介，详情介绍可以参照‘第二个链接’）
我们给两个Input框配置 onChange 属性，当Input框的内容被改变的时候，就自动调用onChange中的函数，然后再函数中使用setState将用户名和密码储存到state中，然后给登录按钮设置了onClick属性，功能暂时设为：点击时自动弹出state中的用户名和密码，以此来检验是否输入。
代码如下（对代码结构做了个整理）：
import React from 'react';
import { Segment, Input, Button } from 'semantic-ui-react'
class View extends React.Component {
constructor(props) { //构造函数
super(props);
this.state = {
user:'',
password:'',
}
this.userChange = this.userChange.bind(this);
this.passwordChange = this.passwordChange.bind(this);
this.submit = this.submit.bind(this);
}
userChange(e){
this.setState({ user : e.target.value })
}
passwordChange(e){
this.setState({ password : e.target.value })
}
submit(){
window.alert(this.state.user)
window.alert(this.state.password)
}
render(){
return(
<div style={{margin:'10px'}}>
<Segment style={{textAlign:'center'}}>
<h2>请登录</h2>
<Input
id='user'
placeholder='用户名'
style={{marginBottom:'10px'}}
onChange={this.userChange}
/><br/>
<Input
id='password'
type='password'
placeholder='密码'
style={{marginBottom:'10px'}}
onChange={this.passwordChange}
/><br/>
<Button
primary
content='登录'
style={{marginBottom:'10px'}}
onClick={this.submit}
/>
<Button
content='重置'
style={{marginLeft:'20px'}}
/>
</Segment>
</div>
)
}
}
export default View;
现在，当我们输入用户名：123，密码：qwe 后，按下登录按钮，就会连续弹出用户名和密码值，各位也可以使用console.log( ) 来把 this.state.user 和 this.state.password 输出到控制台中。
注意，调用的函数要绑定this，在构造函数中使用 this.userChange = this.userChange.bind(this); 不然会出错
效果如下：
现在，我们能够成功地通过点击登录按钮来显示state里面的用户名和密码信息了，但现在只是前端的部分，还需要通过api接口来连接后台服务器才能完成这一功能。
下面我们就来试着搭建一下后台服务器（基于node.js的express服务器框架），各位也可以创建自己熟悉的后台服务器，express服务器创建方法将参照‘第四个链接’。
另外创建一个项目文件夹名为 my-express-study ，读取地址后在CMD中输入：
cnpm install express --save
cnpm install body-parser --save
cnpm install cookie-parser --save
cnpm install multer --save
搭建完成后，在目录下创建 myserver.js 文件，内容如下：
const http = require('http');
var express = require('express');
var app = express();
var bodyParser = require('body-parser');//引入body parser用于解析post的body
app.use(bodyParser.json());//使用body parser用于解析post的body
app.use(bodyParser.urlencoded({ extended: true }));//使用body parser用于解析post的body
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type,Access-Token");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
app.use(express.static('public'));
app.post('/password', function (req, res) { //接收POST请求
let data = req.body; //解析body中的信息
console.log(data);
let message1 = {success:true}
let message2 = {success:false}
if(data.user==='凯文'&&data.password==='123456'){ //判断并返回结果
res.send(message1);
}
else res.send(message2);
})
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("应用实例，访问地址为 http://%s:%s", host, port)
})
创建完服务器文件后，用CMD命令行读取地址并输入 node myserver.js 来开启服务器
然后，我们对View.js文件进行改造，添加Fetch方法来连接api，内容如下：
import React from 'react';
import { Segment, Input, Button } from 'semantic-ui-react'
class View extends React.Component {
constructor(props) { //构造函数
super(props);
this.state = {
user:'',
password:'',
}
this.userChange = this.userChange.bind(this);
this.passwordChange = this.passwordChange.bind(this);
this.submit = this.submit.bind(this);
this.getConnect = this.getConnect.bind(this);
}
userChange(e){
this.setState({ user : e.target.value })
}
passwordChange(e){
this.setState({ password : e.target.value })
}
submit(){
this.getConnect();
}
getConnect(){ //api请求函数
let text = {user:this.state.user,password:this.state.password} //获取数据
let send = JSON.stringify(text); //重要！将对象转换成json字符串
fetch(`http://127.0.0.1:8081/password`,{ //Fetch方法
method: 'POST',
headers: {'Content-Type': 'application/json; charset=utf-8'},
body: send
}).then(res => res.json()).then(
data => {
if(data.success) window.alert('验证成功，欢迎登录');
else window.alert('验证失败，用户名或密码错误')
}
)
}
render(){
return(
<div style={{margin:'10px'}}>
<Segment style={{textAlign:'center'}}>
<h2>请登录</h2>
<Input
id='user'
placeholder='用户名'
style={{marginBottom:'10px'}}
onChange={this.userChange}
/><br/>
<Input
id='password'
type='password'
placeholder='密码'
style={{marginBottom:'10px'}}
onChange={this.passwordChange}
/><br/>
<Button
primary
content='登录'
style={{marginBottom:'10px'}}
onClick={this.submit}
/>
<Button
content='重置'
style={{marginLeft:'20px'}}
/>
</Segment>
</div>
)
}
}
export default View;
下面我们就可以进行测试了，首先在页面中输入错误的信息，用户名为 qwe，密码为 111，结果如下：
我们可以看到，服务器接收到错误的用户名或密码时就会返回错误信息
下面来输入正确的信息，用户名为 凯文，密码为 123456，结果如下：
输入正确的用户名和密码之后，服务器就会返回验证成功的信息。
通过本篇文章，我们成功地构建了基于React框架的用户登录界面，并且连接服务器对用户名和密码进行验证，各位可以在这个项目的基础上进行扩充，增加其他的功能，页面中另外的一个重置按钮用来将用户名和密码的输入框清空，就留给大家当作业好了 ╭(￣▽￣)╯ 。
感谢各位，之后还会继续更新React相关文章。
以上是 React学习（七）——简单的用户名密码验证实现 的全部内容， 来源链接： utcz.com/z/384388.html
