【从零开始】用node搭建一个jsonp&json服务

时间:2023-03-10 06:25:41
【从零开始】用node搭建一个jsonp&json服务

目录:

一、介绍

二、node安装

三、webstorm配置node环境

四、代码介绍

五、如何使用

六、自定义域名

七、其他

一、介绍

1、背景
     日常工作中,跟后端商定好接口格式后;通常采用的开发方式,就是自己新建一个json文件,手动的模拟一批数据,进行ajax调用。
但是如果遇到后端提供的接口不是同一个域名下的话,就需要将普通的ajax调用改为jsonp形式。

2、功能介绍
      于是想到,可以用node.js搭建一个简单的http服务,供日常开发使用。分别提供jsonp/json调用。
也是第一次接触node,就从node的安装、webstorm配置环境、node模块介绍等,都做个详细的记录。

代码已上传至github,地址:https://github.com/lanleiming/node-jsonp.git

二、node安装

node官网下载对应平台的安装包,在Windows上安装时务必选择全部组件。
安装完成后,打开cmd命令,输入node -v,出现以下提示表示安装成功。

C:\Users\IEUser>node -v
v6.10.0

这个表示,我的node版本是6.10.0。

三、webstorm配置node环境

1、通过file->settings ,打开配置窗口,定位到Node.js and NPM 选项

【从零开始】用node搭建一个jsonp&json服务

2、设置Sources of  node.js ,路径为 node安装目录\node_modules\npm,点击 configure即可。

【从零开始】用node搭建一个jsonp&json服务

3、检测是否能够正常使用。

1)新建一个test.js文件,输入一行代码 console.log('hello!');

2)  配置node环境

①点击右上角的Edit Configuration

【从零开始】用node搭建一个jsonp&json服务

②点击+号,选择node.js

【从零开始】用node搭建一个jsonp&json服务

③ 分别设置Name、javascript file,点击Ok即可。

【从零开始】用node搭建一个jsonp&json服务

④点击右上角的小三角启动程序,可以看到控制台输出了 hello 。

【从零开始】用node搭建一个jsonp&json服务

四、代码介绍

       0、整体的一个思路

1)在本地手动新建一些json文件,根据用户的请求是jsonp还是json;以及请求的是哪个json文件,来输出对应的代码。

2)代码相关逻辑:

①判断用户的参数是否完整

②检测对应的json文件是否存在

③输出相应的结果

       1、代码结构

node-jsonp        

|——json

|       |——1.json

|       |——2.json

|——getjson.js

json文件夹下存放相应的json文件; getjson.js为node服务的起始文件。

  2、涉及到的node模块有:

  HTTP              提供HTTP服务器与客户端,可以搭建一个http服务,捕获和响应请求等。

  URL                用于 URL 处理与解析

  querystring     用于解析与格式化 URL 查询字符串

  fs                    用于操作文件

  Path               用于处理文件与目录的路径

    3、新建一个起始文件 getjson.js,引用这些模块。   

var http = require('http');
var url=require('url');
var querystring = require('querystring');
var fs=require('fs');
var path=require('path');

         4、使用http.createServer方法,启动一个http服务,并且监听3000端口。这个端口号随意,只要别跟其他端口冲突。   

http.createServer(function(request, response){}).listen(3000);

         5、其他代码就不多作解释了,大家一看就懂。getjson.js完整代码如下:

 /**
* node.js的入口文件.
* 必须的参数:file - 文件名称; callback - jsonp形式调用
* 返回jsonp形式
*/
var http = require('http');
var url=require('url');
var querystring = require('querystring');
var fs=require('fs');
var path=require('path'); function writeMsg(response,msg){
response.writeHead(200, {'Content-Type': 'text/plain;charset=utf-8;'});
response.write(msg);
response.end();
} http.createServer(function(request, response){
//获取url的query
var arg = url.parse(request.url).query;
//转换为json形式
var arg_json = querystring.parse(arg);
//输出的内容
var content = '';
var filepath = arg_json.file;
var callback =arg_json.callback; if(filepath){
//file -- 本地的json文件路径
filepath = path.resolve('./json/'+filepath);
//判断文件是否存在
if(!fs.existsSync(filepath)){
content='error:文件不存在';
writeMsg(response,content);
}else{
fs.readFile(filepath,'utf-8',function(err,data){
if(err){
console.log(err);
content='error:文件读取失败';
writeMsg(response,content);
}else{
//读取成功
if(callback){
//callback -- jsonp形式
response.writeHead(200, {'Content-Type': 'application/javascript;charset=utf-8;'});
content = callback+'('+data+');';
response.write(content);
response.end();
return false;
}
else{
//callback -- jsonp形式
response.writeHead(200, {'Content-Type': 'text/json;charset=utf-8;'});
response.write(data);
response.end();
return false;
}
}
});
}
}else{
content='error:参数错误';
writeMsg(response,content);
} }).listen(3000);

五、如何使用

使用方式可以分为两种:

1、在webstorm中运行

直接点击右上角的小三角,就可以运行此服务。

点击控制台左侧的红色正方形,可以关闭服务。

【从零开始】用node搭建一个jsonp&json服务

  2、在cmd命令中运行

先定位到getjson.js文件所在的目录,使用命令: node getjson.js 就可以运行此服务。

按住 ctrl+c,就可以退出服务。

【从零开始】用node搭建一个jsonp&json服务

3、测试下自己的服务

新建一个demo.html页面,引用jquery文件,调用下自己的服务。

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
$.post(
'http://127.0.0.1:3000/?file=2.json',
function(ret) {
document.write(JSON.stringify(ret));
},
'jsonp'
);
});
</script>
</body>
</html>

【从零开始】用node搭建一个jsonp&json服务

六、自定义域名

如果不想用 localhost 或者127.0.0.1 来访问的话,可以在 hosts 中映射下即可。

用记事本打开C:\Windows\System32\drivers\etc\hosts文件,新增一行。

127.0.0.1 www.getjson.com

我把本地的请求,映射到www.getjson.com这个域名下了,当然你也可以改成任意你想要的域名。

然后就可以在浏览器中输入:http://www.getjson.com:3000/?file=2.json 来访问你的服务了。

七、参考链接

阮一峰的node教程

node.js相关的api

浅试webstorm配置node.js开发环境

node.js遍历文件生产文件列表