React学习（五）——向服务器请求数据并显示

    大家好，我是凯文，本篇文章主要内容是如何在React项目中向后台服务器请求数据，然后将数据解析并显示。

    本文中涉及到的技术包括：node.js/express服务器的搭建、fetch发送数据请求。

    在之前的几篇文章中，介绍了如何搭建基础的React项目，以及一些简单知识，现在，我们还需要掌握如何用React来向后台服务器发起HTTP请求，来获取数据。因为一个网站光有静态的页面是不够的，只能称其为静态网站，我们需要获取到数据才能让网页呈现更为丰富的内容。

    现在的网站开发一般都采用前后端分离的开发方式。前端人员负责前端页面的实现，后端人员负责提供数据，前端页面将通过访问api接口的方式来链接后台，获取相应的数据，如下图所示：

            

    目前很流行的方式是通过JQuery中的 AJAX 方法来获取数据，引入JQuery后使用 $.ajax() 去访问特定的url地址，通过GET、POST等方式进行数据通信。本文中采用的方式是通过 Fetch 方法来进行数据通信，同样可以向后台服务器发起GET、POST等请求。各位也可以直接使用原生的 XMLHttpRequest 方法来实现。

   我们现在有了请求数据的方法，那么我们请求的对象在哪里呢，就需要我们亲自动手来搭建后台服务器了。用于构建后台服务器的技术有许多， .NET、JAVA、PHP都是不错的选择。本文我们将在 node.js 平台中使用 express 框架来搭建本地服务器。为什么选择node.js呢，因为我们的React项目是就跑在node.js环境中的，各位在搭建React项目的同时对node.js应该已经有所熟悉，我们也不用特地去学习一门后台开发语言（当然，如果你已经掌握了其他的后台开发技术，也可以用自己熟悉的方式来搭建后台服务器，只需要向我们的React项目提供api接口）

  下面，我们就来搭建后台服务器，大家可以参照如下链接中的教程，其中讲得很详细：

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

   现在我们来开始搭建 node.js 服务器，创建一个项目文件夹，在CMD命令行中输入：

        cnpm install express --save   （cnpm需要另行安装，用npm效果一样，只是慢一点）

    安装完后我们来查看一下项目文件夹中的内容

        

    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 ,