快捷導(dǎo)航

利用Node.js+Koa框架實現(xiàn)前后端交互的方法

更新時間：2017年02月27日 10:55:52 作者：IT青年

這篇文章主要給大家介紹了利用Node.js+Koa框架實現(xiàn)前后端交互的方法，文中介紹的非常詳細(xì)，對大家具有一定的參考價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

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

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

準(zhǔn)備工作

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

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

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

方法如下

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

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

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

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

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這個依賴的，需要通過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)接，我們不僅可以請求本地的接口而且還可以請求第三方接口，避免了跨域請求時瀏覽器阻斷請求。

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