使用Node.js和Koa框架實現前後端互動

koa.png

對於一個來說不僅僅要會前端的內容，後端的技術也需要熟練掌握。今天我就要透過一個案例來描述一下前端是如何和後端進行資料互動的。

首先，我們的伺服器需要部署好Nodejs的環境，這裡我用Nodejs在windows下的本地伺服器來做演示。部署NodeJS環境請看我這篇文章。

環境部署好之後我們需要建立一個工程的目錄，並且在目錄中透過npm來安裝Koa框架以及一些用到的依賴庫。下圖是我完成後的目錄結構。

1.png

cd到你的工程目錄，然後執行npm koa目錄裡就會多出node_modules這樣一個資料夾，裡邊存放用到的一些依賴庫。

2.png

接下來我們建立一個app.js檔案，用來設定訪問伺服器時用到的路由，程式碼如下

var koa = require('koa');var controller = require('koa-route');//需要透過npm來新增此依賴var app = koa();var service = require('./service/WebAppService.js');//引用WebAppService.js/*設定路由*/app.use(controller.get('/ajax/search',function*(){    this.set('Cache-Control','no-cache');    this.set('Access-Control-Allow-Origin','*');    var querystring = require('querystring');    var params = querystring.parse(this.req._parsedUrl.query);    var key = params.key;    var start = params.start;    var end = params.end;    this.body = yield service.get_search_data(key,start,end);
}));

app.listen(3001);console.log('Koa server is started');

node_modules資料夾內預設是沒有koa-route這個依賴的，需要透過npm koa-route來安裝

然後我們需要在service目錄下建立一個WebAppService.js檔案，用來請求介面，程式碼如下

var fs = require('fs');
exports.get_search_data = function(key,start,end){    return function(cb){        var http = require('http');        var qs = require('querystring');        var data = {            key:key,            start:start,            end:end
        };        /*請求MobAPI裡的火車票查詢介面*/
        var content = qs.stringify(data);        var http_request = {            hostname:'apicloud.mob.com',            port:80,            path:'/train/tickets/queryByStationToStation?' + content,            method: 'GET'
        };        var req = http.request(http_request,function(response){            var body = '';
            response.setEncoding('utf-8');
            response.on('data',function(chunk){
                body += chunk;
            });
            response.on('end',function(){
                cb(null,body);
            });
        });

        req.end();
    }
}

這樣實際是做了一個介面的轉接，我們不僅可以請求本地的介面而且還可以請求第三方介面，避免了跨域請求時瀏覽器阻斷請求。

接下來我們透過命令來開啟服務，終端輸入node app.js

3.png

然後在瀏覽器請求介面 北京&end=上海

4.png

這樣我們就實現了介面請求，並獲得json資料，下一章我會將這些從後端獲得的資料以一種更加直觀的方式呈現在介面上，並運用Vue.js框架製作一個火車票查詢系統。

請看

作者：IT青年
連結：