這裡拜歐先用 Node JS開一個網頁伺服器，主要是因為若用JavaScript去對上述的API送要求的話，會有Cross Domain呼叫的問題，會比較麻煩，所以這裡就用Node在伺服器送出要求，取回所需要的資料。
先寫一支名為
server.js的程式：
var path = require('path');
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
var request = require('request');
app.set('port', (process.env.PORT || 9999));
app.use('/', express.static(path.join(__dirname, 'public')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.get('/api/comments', function(req, res) {
res.end('abc');
});
app.get('/youbike/:pageSize/:offset', function(req, res){
var pageSize = req.params.pageSize,
offset = req.params.offset;
request('http://data.taipei/opendata/datalist/apiAccess?scope=resourceAquire&rid=ddb80380-f1b3-4f8e-8016-7ed9cba571d5&limit=' + pageSize + '&offset=' + offset,
function(err, response, body){
if(err)
{
console.log(err);
}
else if(response.statusCode == 200)
{
res.end(body);
}
})
});
app.listen(app.get('port'), function() {
console.log('Server started: http://localhost:' + app.get('port') + '/');
});
上列程式中，會用到Express這個Framwork，以及request這個package，它主要的功能就是在受到用戶端的要求時，再組成查詢的URL向API送出要求，取回JSON格式的資料。再來會有一支名為
index.html的HTML程式來顯示資料：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
那我們主要的
React是寫在youbiks.jsx中，其中主要定義了YouBikeSite、YouBikeSiteRow和YouBikeTable等三個元件：
var YouBikeSite = React.createClass({
getInitialState : function(){
return {
site : [],
};
},
render : function(){
var site = this.props.site;
return (
{site.sno}
{site.sarea}
{site.sna}
{site.sbi}
{site.mday}
);
}
});
var YouBikeSiteRow = React.createClass({
render : function(){
console.log('YouBikeSiteList');
return (
{this.props.siteList.map(function(site) {
//console.log(site);
return (<YouBikeSite site={site} />);
})}
);
}
});
var YouBikeTable = React.createClass({
getInitialState : function(){
return {
siteList : [],
page : 1
};
},
componentDidMount : function(){
this.loadYouBikeSiteInfo();
},
loadYouBikeSiteInfo : function(){
console.log('this.state.page: ' + this.state.page);
var pageSize = 10,
offset = (this.state.page >= 1 ? this.state.page - 1 : 0) * pageSize;
console.log(offset);
var youBikeSiteUrl = '/youbike/' + pageSize + '/' + offset;
$.ajax({
url : youBikeSiteUrl,
dataType : 'json',
cache : false,
success : function(data){
if(data.result && data.result.results)
{
this.setState({
siteList : data.result.results
});
}
//console.log(this.state.siteList);
}.bind(this),
error : function(xhr, status, err){
console.error(youBikeSiteUrl, status, err.toString());
}.bind(this)
});
},
nextPage : function()
{
this.state.page += 1;
this.loadYouBikeSiteInfo();
},
previousPage : function()
{
this.state.page -= 1;
if(this.state.page < 0)
{
this.state.page = 0;
}
this.loadYouBikeSiteInfo();
},
render : function(){
return (
YouBike Site Information
場站代號
場站區域
場站名稱
目前車輛數
資料更新時間
<YouBikeSiteRow siteList={this.state.siteList}/>
)
}
});
ReactDOM.render(
<YouBikeTable />,
document.getElementById('container')
);
完整的範例可以到
GitHub下載。
沒有留言:
張貼留言