利用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 相关文章推荐
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python Django批量导入不重复数据
2016/03/25 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
python解析xml简单示例
2019/06/21 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
给客户的道歉信
2014/01/13 职场文书
中学生打架检讨书
2014/02/10 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
个人剖析材料范文
2014/09/30 职场文书
诉讼授权委托书
2014/10/15 职场文书
机关作风建设工作总结
2014/10/23 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python
Github 使用python对copilot做些简单使用测试
2022/04/14 Python