利用Node.js+Koa框架实现前后端交互的方法


Posted in Javascript onFebruary 27, 2017

前言

对于一个前端工程师来说不仅仅要会前端的内容,后端的技术也需要熟练掌握。今天我就要通过一个案例来描述一下前端是如何和后端进行数据交互的。

koa 是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手。

准备工作

首先,我们的服务器需要部署好Nodejs的环境,这里我用Nodejs在windows下的本地服务器来做演示。

部署NodeJS环境请看:《Windows系统下安装Node.js的步骤图文详解》这篇文章。

对Koa框架不熟悉的朋友可以参考这篇文章:Node.js的Koa框架上手及MySQL操作指南

方法如下

环境部署好之后我们需要创建一个工程的目录,并且在目录中通过npm来安装Koa框架以及一些用到的依赖库。

下图是我完成后的目录结构。

利用Node.js+Koa框架实现前后端交互的方法

cd到你的工程目录,然后执行npm koa目录里就会多出node_modules这样一个文件夹,里边存放用到的一些依赖库。

利用Node.js+Koa框架实现前后端交互的方法

接下来我们创建一个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

利用Node.js+Koa框架实现前后端交互的方法

然后在浏览器请求接口 http://localhost:3001/ajax/search?key=520520test&start=北京&end=上海

利用Node.js+Koa框架实现前后端交互的方法

这样我们就实现了接口请求,并获得json数据,感兴趣的朋友可以看看下面文章,下面的文章会将这些从后端获得的数据以一种更加直观的方式呈现在界面上,并运用Vue.js框架制作一个火车票查询系统。

请看《利用Vue.js框架实现火车票查询系统(附源码)》

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript delete 属性的使用
Oct 08 Javascript
javascript URL编码和解码使用说明
Apr 12 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
关于JavaScript中异步/等待的用法与理解
Nov 18 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 #Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 #Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 #Javascript
JavaScript中object和Object的区别(详解)
Feb 27 #Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 #Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 #Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 #Javascript
You might like
计数器详细设计
2006/10/09 PHP
Js四则运算函数代码
2012/07/21 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
python 排列组合之itertools
2013/03/20 Python
vscode 远程调试python的方法
2017/12/01 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
django实现支付宝支付实例讲解
2019/10/17 Python
Python with语句用法原理详解
2020/07/03 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
大三在校生电子商务求职信
2013/10/29 职场文书
家长会邀请书
2014/01/25 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
工作态度不好检讨书
2015/05/06 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
汶川大地震感悟
2015/08/10 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python