快捷導(dǎo)航

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

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

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

前言

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

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

準(zhǔn)備工作

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

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

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

方法如下

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

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

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

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

var koa = require('koa');
var controller = require('koa-route');//需要通過(guò)npm來(lái)添加此依賴
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)是沒(méi)有koa-route這個(gè)依賴的，需要通過(guò)npm koa-route來(lái)安裝

然后我們需要在service目錄下創(chuàng)建一個(gè)WebAppService.js文件，用來(lái)請(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)求。

接下來(lái)我們通過(guò)命令來(lái)開(kāi)啟服務(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é)

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

您可能感興趣的文章: