koa.png

對于一個前端工程師來說不僅僅要會前端的內(nèi)容，后端的技術(shù)也需要熟練掌握。今天我就要通過一個案例來描述一下前端是如何和后端進行數(shù)據(jù)交互的。

首先，我們的服務器需要部署好Nodejs的環(huán)境，這里我用Nodejs在windows下的本地服務器來做演示。部署NodeJS環(huán)境請看我《Windows下快速搭建NodeJS本地服務器》這篇文章。

環(huán)境部署好之后我們需要創(chuàng)建一個工程的目錄，并且在目錄中通過npm來安裝Koa框架以及一些用到的依賴庫。下圖是我完成后的目錄結(jié)構(gòu)。

1.png

2.png

接下來我們創(chuàng)建一個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文件夾內(nèi)默認是沒有koa-route這個依賴的，需要通過npm koa-route來安裝

然后我們需要在service目錄下創(chuàng)建一個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();
    }
}

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

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

3.png

4.png

這樣我們就實現(xiàn)了接口請求，并獲得json數(shù)據(jù)，下一章我會將這些從后端獲得的數(shù)據(jù)以一種更加直觀的方式呈現(xiàn)在界面上，并運用Vue.js框架制作一個火車票查詢系統(tǒng)。

請看《使用Vue.js框架搭建火車票查詢系統(tǒng)》