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: