目錄： 一、介紹 二、node安裝 三、webstorm配置node環境 四、代碼介紹 五、如何使用 六、自定義功能變數名稱 七、其他 一、介紹 1、背景 日常工作中，跟後端商定好介面格式後；通常採用的開發方式，就是自己新建一個json文件，手動的模擬一批數據，進行ajax調用。 但是如果遇到後端提供的介面 ...
目錄：
一、介紹
二、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 選項
2、設置Sources of node.js ，路徑為 node安裝目錄\node_modules\npm，點擊 configure即可。
3、檢測是否能夠正常使用。
1）新建一個test.js文件，輸入一行代碼 console.log('hello!');
2) 配置node環境
①點擊右上角的Edit Configuration
②點擊+號，選擇node.js
③ 分別設置Name、javascript file，點擊Ok即可。
④點擊右上角的小三角啟動程式，可以看到控制台輸出了 hello 。
四、代碼介紹
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完整代碼如下：
1 /**
2 * node.js的入口文件.
3 * 必須的參數：file - 文件名稱； callback - jsonp形式調用
4 * 返回jsonp形式
5 */
6 var http = require('http');
7 var url=require('url');
8 var querystring = require('querystring');
9 var fs=require('fs');
10 var path=require('path');
11
12 function writeMsg(response,msg){
13 response.writeHead(200, {'Content-Type': 'text/plain;charset=utf-8;'});
14 response.write(msg);
15 response.end();
16 }
17
18
19 http.createServer(function(request, response){
20 //獲取url的query
21 var arg = url.parse(request.url).query;
22 //轉換為json形式
23 var arg_json = querystring.parse(arg);
24 //輸出的內容
25 var content = '';
26 var filepath = arg_json.file;
27 var callback =arg_json.callback;
28
29 if(filepath){
30 //file -- 本地的json文件路徑
31 filepath = path.resolve('./json/'+filepath);
32 //判斷文件是否存在
33 if(!fs.existsSync(filepath)){
34 content='error:文件不存在';
35 writeMsg(response,content);
36 }else{
37 fs.readFile(filepath,'utf-8',function(err,data){
38 if(err){
39 console.log(err);
40 content='error:文件讀取失敗';
41 writeMsg(response,content);
42 }else{
43 //讀取成功
44 if(callback){
45 //callback -- jsonp形式
46 response.writeHead(200, {'Content-Type': 'application/javascript;charset=utf-8;'});
47 content = callback+'('+data+');';
48 response.write(content);
49 response.end();
50 return false;
51 }
52 else{
53 //callback -- jsonp形式
54 response.writeHead(200, {'Content-Type': 'text/json;charset=utf-8;'});
55 response.write(data);
56 response.end();
57 return false;
58 }
59 }
60 });
61 }
62 }else{
63 content='error:參數錯誤';
64 writeMsg(response,content);
65 }
66
67
68 }).listen(3000);
View Code
五、如何使用
使用方式可以分為兩種：
1、在webstorm中運行
直接點擊右上角的小三角，就可以運行此服務。
點擊控制台左側的紅色正方形，可以關閉服務。
2、在cmd命令中運行
先定位到getjson.js文件所在的目錄，使用命令： node getjson.js 就可以運行此服務。
按住 ctrl+c，就可以退出服務。
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>
六、自定義功能變數名稱
如果不想用 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 來訪問你的服務了。
七、參考鏈接
