@H_404_2@天地会珠海分舵注:随着微信应用号的呼之欲出，相信新一轮的APP变革即将发生。作为行业内人士，我们很应该去拥抱这个趋势。其中Reactjs相信是开发webapp的佼佼者，这段时间将会通过改造官方实例alt-tutorial来学习Reactjs相关的知识。
@H_
404_2@通过
上一篇文章《
小白学react之React Router实战》我们学习了在React Router的基本
功能，并根据路由
功能建立了一个导航栏，可以方便的切换查看Locations和About。
@H_
404_2@但是，这里Locations的数据还是在客户端模拟出来的。作为前端应用，和服务器端打交道是在所难免的了。
@H_
404_2@所以，今天我们准备做一个事情，从服务器端
获取真实的Locations数据。
1. Express提供数据
@H_
404_2@
上一篇文章中，我们为了
解决React Router的BrowserHistory引发的
404 Page Not Found问题，编写了一个Express的服务器。我们可以在该服务器的基础上加入相应的
代码来提供数据给前端。
@H_
404_2@我们先回顾下原来的server.js的
代码:
var express = require('express')
var path = require('path')
var app = express()
app.use(express.static(path.join(__dirname,'build')))
var PORT = 8080
app.listen(PORT,function() {
console.log('Production Express server running at localhost:' + PORT)
})
@H_
404_2@我们这里要做的就是截获
用户请求，当
用户请求“/api/locations”的时候，将Locations的数据发送回客户端。
@H_
404_2@所以需要
增加的
代码非常简单:
let locations = [
{ id: 0,name: 'Abu Dhabi' },{ id: 1,name: 'Berlin' },{ id: 2,name: 'Bogota' },{ id: 3,name: 'Buenos Aires' },{ id: 4,name: 'Cairo' },{ id: 5,name: 'Chicago' },{ id: 6,name: 'Lima' },{ id: 7,name: 'London' },{ id: 8,name: 'Miami' },{ id: 9,name: 'Moscow' },{ id: 10,name: 'Mumbai' },{ id: 11,name: 'Paris' },{ id: 12,name: 'San Francisco' }
];
app.get("/api/locations",function(req,res) {
res.send(locations);
})
- 定义Locations数据
- 截获用户访问请求，如果请求是”/api/locatiions”，则将Locations 数据返回给客户端
@H_
404_2@这里为两个更好的
显示效果，我们通过Promise和setTimeout来加入同步和延时，让客户端感觉到这个网络数据的
获取需要一定的时间，而不是像在本地一样立刻有返回。
app.get("/api/locations",res) {
new Promise(function (resolve,reject) {
setTimeout(function () {
if (true) {
res.send(locations);
resolve();
} else {
reject('Things have broken');
}
},1000);
});
})
@H_
404_2@这段
代码大概的意思就是，通过setTimeout来设置一定时间的延时，因为setTimeout是异步的操作，所以我们通过Promise来将其变成同步。当睡眠1秒钟之后，将数据locations发回客户端。
@H_
404_2@到此，Express服务器的
代码就准备完毕了，最终
代码如下:
var express = require('express')
var path = require('path')
var app = express()
let locations = [
{ id: 0,name: 'San Francisco' }
];
app.use(express.static(path.join(__dirname,'build')))
app.get("/api/locations",1000);
});
})
app.get('*',function (req,res) {
res.sendFile(path.join(__dirname,'build','index.html'))
})
var PORT = 8080
app.listen(PORT,function() {
console.log('Production Express server running at localhost:' + PORT)
})
2. 客户端通过restful api获取数据
@H_
404_2@客户端
获取服务器端的数据的
方法有很多实现，这里我们用到的是superagent的两个模块:
@H_
404_2@这两个模块的详细使用
方法请点击上面的两个
链接进去查看。我们这里的使用非常简单，就不做过多的研究和详述。
@H_
404_2@我们打开src/sources/LocationSource.js
文件，将
代码修改如下:
import defaults from 'superagent-defaults';
import superagentPromisePlugin from 'superagent-promise-plugin';
var LocationActions = require('../actions/LocationActions');
import co from 'co';
const request = superagentPromisePlugin(defaults());
var mockData = [
{ id: 0,name: 'San Francisco' }
];
var LocationSource = {
fetchLocations() {
return {
remote() {
return co(function *() {
const resp = yield request.get(`/api/locations`);
return resp.body;
});
},local() {
return null;
},success: LocationActions.updateLocations,error: LocationActions.locationsFailed,loading: LocationActions.fetchLocations
}
}
};
module.exports = LocationSource;
@H_
404_2@事实上我们改动的关键
代码只有以下这小部分:
remote() {
return co(function *() {
const resp = yield request.get(`/api/locations`);
return resp.body;
});
},
@H_
404_2@可以看出来，通过这两个模块来处理网络请求是非行简单的。大家可以自己亲手尝试下。
@H_
404_2@当然，尝试之前别忘记把这两个模块通过npm给安装上。
@H_
404_2@这里因为我们使用了一些es6的特性，我们前几章安装babel的那些基本模块是没有完整
支持上的。所以这里我们还需要加入babel-polyfill模块的
支持。
@H_
404_2@通过npm安装上babel-polyfill后，我们在入口
文件App.jsx上直接加入以下这行
代码，整个项目就能顺利跑起来了。
import "babel-polyfill";
@H_
404_2@如果没有这个包的
支持的话，浏览器调试的时候将会收到”regeneratorRuntime is not defined”的
错误。
3. 源码获取
@H_404_2@git clone https://github.com/kzlathander/alt-tutorial-webpack.git
cd alt-tutorial-webpackgit
checkout 05
npm install
npm run prod
@H_
404_2@另外：
@H_404_2@本文由天地会珠海分舵编写，转载需授权，喜欢点个赞，吐槽请评论，进一步交流请关注公众号techgogogo。
@H_
404_2@《未完待续》
