前言

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的江源網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

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

koa 是由 Express 原班人馬打造的，致力于成為一個(gè)更小、更富有表現(xiàn)力、更健壯的 Web 框架。使用 koa 編寫 web 應(yīng)用，通過組合不同的 generator，可以免除重復(fù)繁瑣的回調(diào)函數(shù)嵌套，并極大地提升錯(cuò)誤處理的效率。koa 不在內(nèi)核方法中綁定任何中間件，它僅僅提供了一個(gè)輕量優(yōu)雅的函數(shù)庫，使得編寫 Web 應(yīng)用變得得心應(yīng)手。

準(zhǔn)備工作

首先，我們的服務(wù)器需要部署好Nodejs的環(huán)境，這里我用Nodejs在windows下的本地服務(wù)器來做演示。

部署NodeJS環(huán)境請(qǐng)看：《Windows系統(tǒng)下安裝Node.js的步驟圖文詳解》這篇文章。

對(duì)Koa框架不熟悉的朋友可以參考這篇文章：Node.js的Koa框架上手及MySQL操作指南

方法如下

環(huán)境部署好之后我們需要?jiǎng)?chuàng)建一個(gè)工程的目錄，并且在目錄中通過npm來安裝Koa框架以及一些用到的依賴庫。

下圖是我完成后的目錄結(jié)構(gòu)。

cd到你的工程目錄，然后執(zhí)行npm koa目錄里就會(huì)多出node_modules這樣一個(gè)文件夾，里邊存放用到的一些依賴庫。

接下來我們創(chuàng)建一個(gè)app.js文件，用來設(shè)置訪問服務(wù)器時(shí)用到的路由，代碼如下

var koa = require('koa');
var controller = require('koa-route');//需要通過npm來添加此依賴
var app = koa();

var service = require('./service/WebAppService.js');//引用WebAppService.js

/*設(shè)置路由*/
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)默認(rèn)是沒有koa-route這個(gè)依賴的，需要通過npm koa-route來安裝

然后我們需要在service目錄下創(chuàng)建一個(gè)WebAppService.js文件，用來請(qǐng)求接口，代碼如下

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
  };

  /*請(qǐng)求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();
 }
}

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

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

然后在瀏覽器請(qǐng)求接口 http://localhost:3001/ajax/search?key=520520test&start=北京&end=上海

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

請(qǐng)看《利用Vue.js框架實(shí)現(xiàn)火車票查詢系統(tǒng)（附源碼）》

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。