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中的和进行了改造。修改完之后，页面显示变成了如下所示：

    

    好，现在我们已经搭建了显示的内容，现在需要使得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相关文章。