利用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之卸载鼠标事件的代码
May 14 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
node.js中express-session配置项详解
May 31 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
微信小程序生成二维码的示例代码
Mar 29 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 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
基于mysql的论坛(1)
2006/10/09 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
php截取中文字符串函数实例
2015/02/23 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
很可爱的输入框
2008/08/03 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
如何提高数据访问速度
2016/12/26 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
js实现圆形菜单选择器
2020/12/03 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
Python实现将文本生成二维码的方法示例
2017/07/18 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
写演讲稿要注意的六件事
2014/01/14 职场文书
二手房买卖协议书
2014/04/10 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
2015年教师节广播稿
2015/08/19 职场文书
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL