对于一个前端工程师来说不仅仅要会前端的内容,后端的技术也需要熟练掌握。今天我就要通过一个案例来描述一下前端是如何和后端进行数据交互的。
高雅是由表达原班人马打造的,致力于成为一个更小,更富有表现力,更健壮的网框架。使用洋槐编写网络应用,通过组合不同的发电机,可以免除重复繁琐的回调函数嵌套,并极大地提升错误处理的效率.koa不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写网络应用变得得心应手。
首先,我们的服务器需要部署好Nodejs的环境,这里我用Nodejs在windows下的本地服务器来做演示。
部署NodeJS环境请看:《Windows系统下安装node . js的步骤图文详解》这篇文章。
对高雅框架不熟悉的朋友可以参考这篇文章:node . js的洋槐框架上手及MySQL操作指南
环境部署好之后我们需要创建一个工程的目录,并且在目录中通过npm来安装高雅框架以及一些用到的依赖库。
<强>下图是我完成后的目录结构。
cd到你的工程目录,然后执行npm高雅目录里就会多出node_modules这样一个文件夹,里边存放用到的一些依赖库。
接下来我们创建一个app.js文件,用来设置访问服务器时用到的路,由代码如下
var高雅=要求(“高雅”);
var控制器=要求(“koa-route”);//需要通过npm来添加此依赖
应用var=高雅();
var服务=需要(“。/服务/WebAppService.js”);//引用WebAppService.js/*设置路由*/app.use (controller.get (“/ajax/搜索”、功能* (){
this.set (cache - control,“no - cache”);
this.set (‘Access-Control-Allow-Origin’,‘*’);
var属性=要求(参数);
var params=querystring.parse (this.req._parsedUrl.query);
var关键=params.key;
var=params.start开始;
var=params.end结束;
这一点。身体=产量service.get_search_data(键,开始,结束);
}));
app.listen (3001);
控制台。日志(“高雅服务器已启动”);
node_modules文件夹内默认是没有koa-route这个依赖的,需要通过npm koa-route来安装
然后我们需要在服务目录下创建一个WebAppService.js文件,用来请求接口,代码如下
var fs=要求(fs);
出口。get_search_data=https://www.yisu.com/zixun/function(键,开始,结束){
返回函数(cb) {
var http=要求(“http”);
var qs=要求(参数);
var=https://www.yisu.com/zixun/{数据
关键:钥匙,
启动:启动,
端:端
}；/*请求MobAPI里的火车票查询接口*/var=qs.stringify内容(数据);
var http_request={
主机名:apicloud.mob.com,
端口:80
路径:/火车/票/queryByStationToStation& # 63;“+内容,
方法:“得到”
}；
var点播=http.request (http_request、功能(响应){
身体var=";
response.setEncoding (“utf - 8”);
response.on(“数据”,函数(块){
身体+=块;
});
response.on(“结束”,函数(){
cb(零、身体);
});
});
req.end ();
}
}
这样实际是做了一个接口的转接,我们不仅可以请求本地的接口而且还可以请求第三方接口,避免了跨域请求时浏览器阻断请求。
接下来我们通过命令来开启服务,终端输入节点app.js
然后在浏览器请求接口http://localhost: 3001/ajax/搜索# 63;关键=520520 test&开始=北京,结束=上海
这样我们就实现了接口请求,并获得json数据,感兴趣的朋友可以看看下面文章,下面的文章会将这些从后端获得的数据以一种更加直观的方式呈现在界面上,并运用Vue.js框架制作一个火车票查询系统。
请看《利用Vue.js框架实现火车票查询系统(附源码)》
