2015年10月10日 星期六

【筆記】ReactJS呼叫外部API練習-顯示YouBike站點列表

最近有機會碰到React除了做完它的教學增加點自信外,再來嘗試做一些套用API的練習,這裡使用台北市政府提供的YouBike臺北市公共自行車即時資訊來取得YouBike站點資訊。

這裡拜歐先用 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,它主要的功能就是在受到用戶端的要求時,再組成查詢的URLAPI送出要求,取回JSON格式的資料。

再來會有一支名為index.htmlHTML程式來顯示資料:
<!DOCTYPE html>
<html>
<head>
        
 
</head>
<body>
    
</body> </html>
那我們主要的 React是寫在youbiks.jsx中,其中主要定義了YouBikeSiteYouBikeSiteRowYouBikeTable等三個元件:
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下載。

沒有留言: