React學習（七）——簡單的使用者名稱密碼驗證實現
大家好，我是凱文，通過之前的學習，我們已經對React框架以及其使用方法有了一個系統地瞭解，本篇文章將介紹：如何在React頁面中實現使用者名稱和密碼驗證。
本篇文章涉及React.js、node.js、npm、express（或是其他後臺伺服器）、Semantic-ui（UI控制元件）。
其中部分知識可以參照我之前的文章：
那我們首先來確定一下需求，也就是我們要實現什麼樣的功能： 頁面中需要包含‘使用者名稱輸入框’、‘密碼輸入框’、‘提交按鈕’、‘重置按鈕’，在輸入使用者名稱和密碼之後按下提交按鈕則連線api介面，訪問伺服器並傳回資訊。
其中，前端頁面將搭載在React框架上，並採用Semantic-ui作為外觀控制元件，各位也可以自行定義CSS樣式來構建頁面UI。連線api介面的方式將採用Fetch傳送Post請求並傳出json格式的資料，api傳回的也將是json格式的資料。
後臺伺服器將採用node.js平臺上的express伺服器框架，各位也可以採用自己熟悉的後臺技術來搭建伺服器，本次的功能十分簡單，所以伺服器的搭建並不費力，各位可以直接按照本文教程一步一步做。
好了，下面我們就正式開始搭建專案，首先創建出基本的React專案資料夾，具體步驟可以參照上面給出的連結（主要是前兩個），下面將直接採用‘第二個連結’中的結果進行改造。
根據連結中的步驟搭建完畢後，我們使用 npm start 開啟專案，在 localhost:3000 地址中可以看到：
View.js檔案內容如下所示:
importReactfrom'react';class
現在我們要在專案中引入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';下面我們對View.js檔案進行改造，內容如下：
importReactfrom'react';import { Segment, Input, Button } from'semantic-ui-react'classViewextendsReact.Component {constructor(props) { //建構函式super(props);this.state= { } }render(){return(<divstyle={{margin:'10px'}}><Segmentstyle={{textAlign:'center'}}><h2>請登入</h2><Inputid='user'placeholder='使用者名稱'style={{marginBottom:'10px'}}/><br/><Inputid='password'type='password'placeholder='密碼'style={{marginBottom:'10px'}}/>
<br/><Buttonprimarycontent='登入'style={{marginBottom:'10px'}}/><Buttoncontent='重置'style={{marginLeft:'20px'}}/></Segment></div> ) }}exportdefaultView;
我們在頁面中添加了兩個Input框和兩個Button按鈕，這些都是Semantic自帶的元件，對原生HTML中的<input>和<button>進行了改造。修改完之後，頁面顯示變成了如下所示：
好，現在我們已經搭建了顯示的內容，現在需要使得React框架獲取到使用者名稱和密碼，並將其儲存到State中，用於作進一步的處理（React中的資料互動一般使用State和Props作為儲存地和媒介，詳情介紹可以參照‘第二個連結’）
我們給兩個Input框配置 onChange 屬性，當Input框的內容被改變的時候，就自動呼叫onChange中的函式，然後再函式中使用setState將使用者名稱和密碼儲存到state中，然後給登入按鈕設定了onClick屬性，功能暫時設為：點選時自動彈出state中的使用者名稱和密碼，以此來檢驗是否輸入。
程式碼如下（對程式碼結構做了個整理）：
importReactfrom'react';import { Segment, Input, Button } from'semantic-ui-react'classViewextendsReact.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(<divstyle={{margin:'10px'}}><Segmentstyle={{textAlign:'center'}}><h2>請登入</h2><Inputid='user'placeholder='使用者名稱'style={{marginBottom:'10px'}}onChange={this.userChange}/><br/><Inputid='password'type='password'placeholder='密碼'style={{marginBottom:'10px'}}onChange={this.passwordChange}/><br/><Buttonprimarycontent='登入'style={{marginBottom:'10px'}}onClick={this.submit}/><Buttoncontent='重置'style={{marginLeft:'20px'}}/></Segment></div> ) }}exportdefaultView;
現在，當我們輸入使用者名稱：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 檔案，內容如下：
consthttp=require('http');varexpress=require('express');varapp=express();varbodyParser=require('body-parser');//引入body parser用於解析post的bodyapp.use(bodyParser.json());//使用body parser用於解析post的bodyapp.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請求letdata=req.body; //解析body中的資訊console.log(data);letmessage1= {success:true}letmessage2= {success:false}if(data.user==='凱文'&&data.password==='123456'){ //判斷並返回結果res.send(message1); }elseres.send(message2);})
varserver=app.listen(8081, function () {varhost=server.address().addressvarport=server.address().portconsole.log("應用例項，訪問地址為 http://%s:%s", host, port)})
建立完伺服器檔案後，用CMD命令列讀取地址並輸入 node myserver.js 來開啟伺服器
然後，我們對View.js檔案進行改造，新增Fetch方法來連線api，內容如下：
importReactfrom'react';import { Segment, Input, Button } from'semantic-ui-react'classViewextendsReact.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請求函式lettext= {user:this.state.user,password:this.state.password} //獲取資料letsend= 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(<divstyle={{margin:'10px'}}><Segmentstyle={{textAlign:'center'}}><h2>請登入</h2><Inputid='user'placeholder='使用者名稱'style={{marginBottom:'10px'}}onChange={this.userChange}/><br/><Inputid='password'type='password'placeholder='密碼'style={{marginBottom:'10px'}}onChange={this.passwordChange}/><br/><Buttonprimarycontent='登入'style={{marginBottom:'10px'}}onClick={this.submit}/><Buttoncontent='重置'style={{marginLeft:'20px'}}/></Segment></div> ) }}exportdefaultView;
下面我們就可以進行測試了，首先在頁面中輸入錯誤的資訊，使用者名稱為 qwe，密碼為 111，結果如下：
我們可以看到，伺服器接收到錯誤的使用者名稱或密碼時就會返回錯誤資訊
下面來輸入正確的資訊，使用者名稱為 凱文，密碼為 123456，結果如下：
輸入正確的使用者名稱和密碼之後，伺服器就會返回驗證成功的資訊。
通過本篇文章，我們成功地構建了基於React框架的使用者登入介面，並且連線伺服器對使用者名稱和密碼進行驗證，各位可以在這個專案的基礎上進行擴充，增加其他的功能，頁面中另外的一個重置按鈕用來將使用者名稱和密碼的輸入框清空，就留給大家當作業好了 ╭(￣▽￣)╯ 。
感謝各位，之後還會繼續更新React相關文章。