React學習（4）——向服務器請求數據並顯示

時間 2019-12-18

原文原文鏈接

本文中涉及到的技術包括：node.js/express服務器的搭建、fetch發送數據請求。javascript

在以前的幾篇文章中，介紹瞭如何搭建基礎的React項目，以及一些簡單知識，如今，咱們還須要掌握如何用React來向後臺服務器發起HTTP請求，來獲取數據。由於一個網站光有靜態的頁面是不夠的，只能稱其爲靜態網站，咱們須要獲取到數據才能讓網頁呈現更爲豐富的內容。html

如今的網站開發通常都採用先後端分離的開發方式。前端人員負責前端頁面的實現，後端人員負責提供數據，前端頁面將經過訪問api接口的方式來連接後臺，獲取相應的數據，以下圖所示：前端

目前很流行的方式是經過JQuery中的 AJAX 方法來獲取數據，引入JQuery後使用 $.ajax() 去訪問特定的url地址，經過GET、POST等方式進行數據通訊。本文中採用的方式是經過 Fetch 方法來進行數據通訊，一樣能夠向後臺服務器發起GET、POST等請求。各位也能夠直接使用原生的 XMLHttpRequest 方法來實現。java

咱們如今有了請求數據的方法，那麼咱們請求的對象在哪裏呢，就須要咱們親自動手來搭建後臺服務器了。用於構建後臺服務器的技術有許多， .NET、JAVA、PHP都是不錯的選擇。本文咱們將在 node.js 平臺中使用 express 框架來搭建本地服務器。爲何選擇node.js呢，由於咱們的React項目是就跑在node.js環境中的，各位在搭建React項目的同時對node.js應該已經有所熟悉，咱們也不用特意去學習一門後臺開發語言（固然，若是你已經掌握了其餘的後臺開發技術，也能夠用本身熟悉的方式來搭建後臺服務器，只須要向咱們的React項目提供api接口）node

下面，咱們就來搭建後臺服務器，你們能夠參照以下連接中的教程，其中講得很詳細：react

http://www.runoob.com/nodejs/nodejs-express-framework.htmlajax

如今咱們來開始搭建 node.js 服務器，建立一個項目文件夾，在CMD命令行中輸入：express

cnpm install express --save （cnpm須要另行安裝，用npm效果同樣，只是慢一點）npm

安裝完後咱們來查看一下項目文件夾中的內容json

express相關的依賴包已經被放在了 node_modules 文件夾下，package.json用於記錄已安裝的項目依賴包等信息。

下面來依次導入依賴包，搭建項目環境。

在CMD命令行中依次輸入：

        cnpm install body-parser --save
        cnpm install cookie-parser --save
        cnpm install multer --save

查看一下package.json文件內容，咱們能夠看到這些依賴包的信息，json文件不能直接打開，你們可使用各類文本編輯器，這裏本人採用的是VScode，文件內容以下：

{
"dependencies": {
"body-parser": "^1.18.2",
"cookie-parser": "^1.4.3",
"express": "^4.16.3",
"multer": "^1.3.0"
}
}

　那麼，如今配置好了環境，接下來咱們就要開始搭建服務了，建立一個名稱爲：myserver.js 的文件，在其中輸入以下代碼

var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('This is test message!');
})
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("應用實例，訪問地址爲 http://%s:%s", host, port)
})

其中建立了一個對於GET請求的監聽接口，地址爲「/」，因爲咱們是在本地搭建服務器，因此這個接口的完整地址就是 localhost:8081/ ，其中的8081就是服務器在本地環境中的訪問端口號。在res.send()函數中咱們放入了一條字符串信息，內容爲 'This is test message!' ，也就是api接口返回的信息。

保存這個文件並放在項目主目錄下，在CMD命令行中輸入以下指令：

node myserver.js

而後咱們就成功啓動了服務器，端口號爲8081，咱們能夠直接在瀏覽器中輸入 localhost:8081/ 來訪問，內容以下：

咱們能夠在瀏覽器中看到以前保存在 myserver.js 文件中的字符串。如今咱們已經可以從瀏覽器中看到api接口給出的數據，而後，能夠試着在React項目中訪問api接口。

用VScode編輯器打開已經建立完成的React項目目錄

咱們建立一個組件，內容以下：

import React from 'react';

class Page2 extends React.Component{
constructor(props){ //構造函數
super(props);
this.state = {
mytext : '',
}
}

getData(){ //請求數據函數
fetch(`http://127.0.0.1:8081/`,{
method: 'GET'
}).then(res => res.text()).then(
data => {
this.setState({mytext:data})
}
)
}

componentWillMount(){
this.getData();
}

    render(){
    return(<div><div>{this.state.mytext}</div></div>);
　　}
}

export default Page2;

下面來分析一下代碼，首先，在上方的「構造函數」constructor中，設置了State的初值，添加一個mytext屬性，初始值爲空，其餘內容是標準的構造語法，能夠參照React官方資料。以後，咱們建立一個getData() 函數，用於實現fetch方法獲取後臺服務器的數據。

如上所示，fetch方法有兩個傳入的參數，一個是url，也就是後臺api接口所在的地址，另外一個是{method:'GET'}，意思是採用GET方式與後臺服務器進行通訊。後面的 .then( ) 方法將上面傳回來的結果進行進一步的處理，將結果做爲 res這個對象傳入，並使用 .text() 方法使其轉化爲字符串類型，而後再下一個 .then( ) 方法中將上一步的返回值做爲data 賦值給 state裏的mytext。

（Fetch的詳細用法各位能夠參照一下網上的資料，本文只是簡單使用，不作太多介紹）

如今咱們有了獲取數據的函數，須要調用這個函數，這裏要注意的是，咱們不能直接在下方的render函數裏調用getData( )，那樣會形成頁面死循環，因爲React的特性，在render函數中，每當State被改變時就會從新渲染組件，getData( )函數中涉及到了對State的更改，因此React系統會從新去渲染頁面==>加載render函數==>從新調用getData( )==>從新渲染頁面==>一直死循環...

因此咱們須要使用到React的生命週期函數，componentWillMount( )，將getData函數放置在其中，這個生命週期函數會在組件被渲染前調用，這個時候改變State就不會形成死循環。

（關於生命週期各位能夠參照React官方文檔 https://doc.react-china.org/ ）

而後，咱們須要將State中的數據顯示出來，在render函數return的標籤中如上所示將 this.state.mytext 的內容顯示出來。

保存文件，用 npm start 啓動項目，輸入 localhost:3000 頁面將會呈現以下內容：

注意，這裏會出現一個問題，沒法實現跨域請求，也就是說，咱們的React項目所在的 3000 端口與後臺服務應用的 8081 端口不能進行通訊，這是出於安全考慮，爲了解決這一問題，能夠在後臺服務應用 myserver.js 中加入下面這段代碼：把rapp.get那替換掉就能夠了以後重啓一下 node myserver.js

app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
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");
res.send("this is templace!!!")
next();
});

這樣就可讓React項目進行跨域請求，顯示數據。

如今，咱們成功地從後臺api中獲取並顯示字符串信息，那麼其餘類型的數據也能夠這樣嗎？

下面咱們來實現對json格式數據的獲取。

首先要對 node.js/express 服務應用進行改造，代碼以下：

var express = require('express');
var app = express();
app.all('/json', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    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");
    
    let myjson = {
        name : '盒裝牛奶',
        price : '3元',
        date : '2018年1月1日'
        }
        res.send(myjson);
    next();
    });
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("應用實例，訪問地址爲 http://%s:%s", host, port)
})

在代碼中，咱們添加了一個get方法，地址爲'/json'，也就是 localhost:8081/json ，在方法中建立了一個json格式的數據對象 myjson，而後將其傳回。

ctrl+c 退出原來的服務，使用 node myserver.js 從新啓動服務後，咱們用瀏覽器來訪問 localhost:8081/json ,內容以下：

咱們成功地從後臺服務器中獲取了json格式的數據，下面咱們要在react項目中將其顯示出來，改造Page2組件，代碼以下：

import React from 'react';

class Page2 extends React.Component{
constructor(props){ //構造函數
super(props);
this.state = {
mytext : '',
}
}

getData(){ //請求數據函數
fetch(`http://127.0.0.1:8081/json`,{
method: 'GET'
}).then(res => res.json()).then(
data => {
this.setState({mytext:data})
}
)
}

componentWillMount(){
this.getData();
}


render(){

return(
<div>
<div>{this.state.mytext.name}</div>
<div>{this.state.mytext.price}</div>
<div>{this.state.mytext.date}</div>
</div>
);
}
}
export default Page2;

其中，fetch函數的url要改變爲 localhost:8081/json ，在後面的.text( ) 方法要改成 .json( )，將數據轉換爲json格式，在render函數的return裏面建立3對<div>標籤，分別顯示mytext數據對象的name、price、date屬性，在頁面中咱們能夠看到：

上所示，咱們儲存在後臺服務器中的json數據被傳遞了過來，並由React應用渲染在了頁面上。

到此，本篇文章的內容就結束了，這次介紹瞭如何搭建 node.js/express 服務器，以及介紹瞭如何在React項目中使用Fetch獲取數據，存放在State中，並渲染出來。但願對各位有所幫助，也是對本人學習心得的記錄，感謝各位支持。後續還會有React相關文章更新。

記錄學習。看一遍不如本身實踐一次，勤動手，勤動腦，邁出第一步！

看後續文章的能夠點擊這個連接，https://blog.csdn.net/daxiazouyizou/article/details/80196815