不会的要多查多问，不然不会的永远不会，哪怕你离会就差了那么一点点
第一页 1 最后页 [ 显示模式： 摘要 | 列表 ]

NodeJS反向代理至后端数据接口

[不指定 2016/09/21 12:36 | by 刘新修 ]

支持来自任何域名的Post请求，验证请求参数必须有: [name、gender] 否则直接JSON返回错误！

JavaScript代码
  1. var http=require('http');  
  2. function server(){  
  3.     this.exec=function(route,req,res){  
  4.     var _self=this;  
  5.     /********** 获取客户端数组中的部分数据可向后多取 **********/  
  6.     this.arrv=function(o,n,p){  
  7.        var i,y,d,p;y=false;d='';  
  8.        for(i in o){  
  9.          if(o[i]==n&&p==undefined){i++;return o[i]};  
  10.          if(o[i]==n&&p!=undefined&&!isNaN(p)||y){  
  11.              var s;s=i;  
  12.              p=Number(p);  
  13.              if(p>0){  
  14.                 p--;s++;d+=o[s];y=true;  
  15.              }  
  16.              else{  
  17.                 return d;  
  18.              }  
  19.          }  
  20.        }  
  21.     };  
  22.     /********** 请求后端时可获取单个header头内地信息 **********/  
  23.     this.getReqHeaders=function(n){  
  24.         if(typeof(n)=='undefined'){  
  25.           console.log('getReqHeaders(n)变量没有定义!');  
  26.         }else{  
  27.             return _self.arrv(req.rawHeaders,String(n));  
  28.         }  
  29.     };  
  30.     /******** 获取客户端请求的header整体头部信息 ********/  
  31.     this.rawHeaders=function(state){  
  32.         var json={};  
  33.         if(!state){  
  34.             for(var i=0;i<req.rawHeaders.length;i++){  
  35.                 var s,s=i;  
  36.                 if(i%2==0){  
  37.                     s++;json[req.rawHeaders[i]]=req.rawHeaders[s];  
  38.                 }  
  39.             }  
  40.         }  
  41.         if(state){  
  42.             for(var i=0;i<req.rawHeaders.length;i++){  
  43.                 json[i]=req.rawHeaders[i];  
  44.             }  
  45.         }  
  46.         var jsonStr=JSON.stringify(json);//结果："{'1':'a','2':'b','3':'c'}"  
  47.         var jsonObj=JSON.parse(jsonStr); //结果：[object Object]  
  48.         return jsonObj;  
  49.     };  
  50.   
  51.   
  52.     //接收参数 ------ sreq.on("data",function(data){});接收html中ajax传递的参数  
  53.     req.on("data",function(data){  
  54.   
  55.         /********* 打印提示||接受数据并反向代理到后端 *********/  
  56.         console.log("\n--->>\nReq.on('data')",req.method.toUpperCase()+" Use Proxy!");  
  57.   
  58.         /********* 使用代理||这里Post请求体是回调data *********/  
  59.         send(route,req,res,data);  
  60.     });  
  61.   
  62.     /********** 判断是GET请求类型||也可以代理给后端处理 **********/  
  63.     if(req.method.toUpperCase()=="GET"){  
  64.   
  65.         var params=[];  
  66.         //params=url.parse(request.url,true).query;  
  67.         //params['fruit']=compute(params);  
  68.         res.writeHeader(200,{  
  69.             "Content-type":"text/html; charset=utf-8"  
  70.         });  
  71.         res.write('<h1>It is forbidden for the URL request!</h1>');  
  72.         res.write('<hr><address>NodeJs/'+process.version);  
  73.         res.write(' at '+req.headers.host.split(':')[0]);  
  74.         res.write(' Port '+req.headers.host.split(':')[1]+'</address>');  
  75.         res.end();  
  76.   
  77.     }  
  78.     /********* 如有req.on("data",function(data){});就跳过了以下方法 ******/  
  79.     /********* 判断是POST请求类型||提交不走代理此方法是本机处理回调 **********/  
  80.     else if(req.method.toUpperCase()=='POSTo'){  
  81.   
  82.         var postData="";  
  83.         /********** 读取Post提交的数据 **********/  
  84.         req.addListener("data",function(data){  
  85.             postData+=data;  
  86.         });  
  87.   
  88.         /********** 数据读取完毕就会执行的监听 *********/  
  89.         req.addListener("end",function(){  
  90.            /********* 定义Post请求主体 *********/  
  91.            var query=require('querystring').parse(postData);  
  92.   
  93.            /************** 判断如果有POST过来数据 *************/  
  94.            if(query.name&&query.gender){  
  95.               console.log('Start a request...');  
  96.   
  97.                 var origin=_self.arrv(req.rawHeaders,'Origin');  
  98.                 console.log("origin:"+typeof req.rawHeaders+'---')  
  99.   
  100.   
  101.               /********** 代理转发至php,跨域全放开让后端去匹配验证 **********/  
  102.               //res.setHeader('Access-Control-Allow-Origin','*');  
  103.               //res.setHeader('Access-Control-Allow-Headers','X-Requested-With');  
  104.               //res.setHeader('Access-Control-Allow-Methods','GET,POST,PUT,DELETE,OPTIONS');  
  105.               //send(route,req,res,query);  
  106.            }  
  107.            /****** 判断结束 ******/  
  108.         });  
  109.   
  110.     }  
  111.   
  112.   
  113.     /******** 请求后端接口 ********/  
  114.     function send(route,req,res,data){  
  115.   
  116.         /***************************************
  117.         var data={
  118.               name:'liuxinxiu',
  119.               gender:"male",
  120.               time:new Date().getTime()
  121.         };
  122.         ****************************************/  
  123.         //data=require('querystring').stringify(data);  
  124.         var rawHeaders=_self.rawHeaders();  
  125.   
  126.         /********** 判断一个对象是哪中类型的对象 **********/  
  127.         function isArray(obj){  
  128.               return Object.prototype.toString.call(obj)==='[object Array]';  
  129.         };  
  130.   
  131.         /********* 打印Request Headers **********/  
  132.         console.log("\n--->>\nRequest Headers:",req.rawHeaders);  
  133.   
  134.         /***** 向后端发送请求基本的设置 *****/  
  135.         var options={  
  136.               port: 80,  
  137.               host:"code.liuxinxiu.com",  
  138.               path:'/php/Post/CORS_PHP.php',  
  139.               method: 'POST',  
  140.               headers:{  
  141.                   'Content-Type':_self.getReqHeaders('Content-Type'),  
  142.                   'Content-Length':data.length,  
  143.                   'Origin':_self.getReqHeaders('Origin'),  
  144.                   'User-Agent':_self.getReqHeaders('User-Agent')  
  145.               }  
  146.         };  
  147.   
  148.         /***** 如果header整体替换就会乱码 *****/  
  149.         //options.headers=_self.rawHeaders();  
  150.   
  151.   
  152.         var request=http.request(options,function(result){  
  153.               console.log("\n--->>\nstatusCode:",result.statusCode);  
  154.               console.log("\n--->>\nResponse Headers:",result.headers);  
  155.   
  156.               if(result){  
  157.                  var content_type,origin,x_powered_by,server;  
  158.                      //content_type=origin=x_powered_by=server=undefined;  
  159.                      content_type=result.headers['content-type'];  
  160.                      origin=result.headers['access-control-allow-origin'];  
  161.                      x_powered_by=result.headers['x-powered-by'];  
  162.                      server=result.headers['server'];  
  163.   
  164.                      /********** 判断分别加入包含服务器错误页 **********/  
  165.                      if(origin!=undefined&&result.statusCode==200){  
  166.                         res.setHeader('Access-Control-Allow-Origin',origin);  
  167.                      }  
  168.                      if(content_type!=undefined){  
  169.                         res.setHeader('Content-Type',content_type);  
  170.                      }  
  171.                      if(x_powered_by!=undefined){  
  172.                         res.setHeader('X-Powered-By',x_powered_by);  
  173.                      }  
  174.                      if(server!=undefined){  
  175.                         res.setHeader('Server',server);  
  176.                      }  
  177.   
  178.               }  
  179.               /********** 有异常的请求需要问题定位 **********/  
  180.               if(result.statusCode<200||result.statusCode>206){  
  181.               }  
  182.   
  183.               /********** 接受数据数据监听 **********/  
  184.               var _data='';  
  185.               result.on('data',function(chunk){  
  186.                 _data+=chunk;  
  187.               });  
  188.   
  189.               /********** 结束接受数据监听 *********/  
  190.               result.on('end',function(){  
  191.                    console.log("\n--->>\nresult:",_data);  
  192.                    res.write(_data);  
  193.                    res.end();  
  194.               });  
  195.   
  196.         /******** request逻辑完成 ********/  
  197.         });  
  198.   
  199.   
  200.         request.on('error',function(e) {  
  201.               console.log('problem with request: ' + e.message);  
  202.         });  
  203.   
  204.         //request.write(data);  
  205.         request.write(data+"\n");  
  206.         request.end();  
  207.   
  208.     }  
  209.   
  210.   
  211.   
  212.   /****** 内部结束 ******/  
  213.   }  
  214. }  
  215. module.exports=new server();  

NodeJS数据接口(Post请求直接代理至后端PHP): http://liuxinxiu.com:3000/CORS_Node_Proxy/

PHP数据接口(验证跨域提交白名单外返回错误):  http://code.liuxinxiu.com/php/Post/CORS_PHP.php

Tags: , ,
NodeJs平台 | 评论(0) | 引用(0) | 阅读(4982)

CORS||跨域资源共享||NodeJs版本实现

[不指定 2016/09/13 21:57 | by 刘新修 ]

使用NodeJs实现CORS 跨域资源共享，可传参origin通过限制，代码如下：

JavaScript代码
  1. var http=require('http');  
  2. var origin=require('./origin'); //调用白名单列表  
  3.   
  4. function CORS_Node(){  
  5.     this.exec=function(route,req,res){  
  6.     var _self=this;  
  7.   
  8.     /************** 获取客户端origin的域名 **************/  
  9.     origin.req=req;                //白名单设置置请求头  
  10.     origin.yes=origin.listV();     //是否在名单|true  
  11.     origin.name=origin.getName();  //客户端ORIGIN  
  12.   
  13.   
  14.     /******** 先纠正参数，参数正确后匹配白名单 ********/  
  15.   
  16.   
  17.     /********** 判断是GET请求类型 **********/  
  18.     if(req.method.toUpperCase()=="GET"){  
  19.   
  20.         var params=[];  
  21.         //params=url.parse(request.url,true).query;  
  22.         //params['fruit']=compute(params);  
  23.         res.writeHeader(200,{  
  24.             "Content-type":"text/html; charset=utf-8"  
  25.         });  
  26.         res.write('<h1>It is forbidden for the URL request!</h1>');  
  27.         res.write('<hr><address>NodeJs/'+process.version);  
  28.         res.write(' at '+req.headers.host.split(':')[0]);  
  29.         res.write(' Port '+req.headers.host.split(':')[1]+'</address>');  
  30.         res.end();  
  31.   
  32.     }  
  33.     /********* 判断是POST请求类型 **********/  
  34.     else if(req.method.toUpperCase()=='POST'){  
  35.   
  36.         var postData="";  
  37.         /********** 读取Post提交的数据 **********/  
  38.         req.addListener("data",function(data){  
  39.             postData+=data;  
  40.         });  
  41.   
  42.         /********** 数据读取完毕就会执行的监听 *********/  
  43.         req.addListener("end",function(){  
  44.            /********* 定义Post请求主体 *********/  
  45.            var query=require('querystring').parse(postData);  
  46.   
  47.   
  48.            /********** 给客户端返回数据自造JSON **********/  
  49.            function getJson(status){  
  50.                 if(isNaN(status))status=-1;  
  51.                 else{status=Number(status)}  
  52.                 var _drr='{'  
  53.                       +'"status":"1",'  
  54.                       +'"name":"'+query.name+'",'  
  55.                       +'"gender":"'+query.gender+'"}';  
  56.                 var _arr='{'  
  57.                       +'"status":1,'  
  58.                       +'"url":"http://www.liuxinxiu.com/",'  
  59.                       +'"dataList":'  
  60.                       +'{'  
  61.                       +'"siteId":101,'  
  62.                       +'"title":"我的博客||Node Server",'  
  63.                       +'"images":"http://www.liuxinxiu.com/upload/2016/08/10/moren.gif",'  
  64.                       +'"indexNum":"10",'  
  65.                       +'"pageNum":"100000",'  
  66.                       +'"tagNum":"22",'  
  67.                       +'"linkType":"linkTaobao",'  
  68.                       +'"publishTime":"23:15:30"'  
  69.                       +'}'  
  70.                       +'}';  
  71.                 this._dr=JSON.parse(_drr);this._ar=JSON.parse(_arr);  
  72.                 this._dt=this._dr;this._dt.getUser=this._ar;  
  73.            }  
  74.   
  75.            var errStr={"status":-1,"info":"Request Error"};  
  76.   
  77.            /********** 先初步设置头信息,跨域全放开稍后再进行匹配验证 **********/  
  78.            var content_type,content_length,  
  79.            content_type='application/json; charset=utf-8';  
  80.            content_length=Buffer.byteLength(res,'utf8');  
  81.            res.setHeader('Access-Control-Allow-Origin','*');  
  82.            res.setHeader('Access-Control-Allow-Headers','X-Requested-With');  
  83.            res.setHeader('Access-Control-Allow-Methods','GET,POST,PUT,DELETE,OPTIONS');  
  84.            res.setHeader('Content-Type',content_type);  
  85.            res.setHeader('Server','NodeJs/'+process.version);  
  86.   
  87.   
  88.            /************** 判断如果有POST过来规范的数据 *************/  
  89.            if(query.name&&query.gender){  
  90.                 //调用数据  
  91.                 getJson(1);  
  92.   
  93.                 /******** 匹配客户端域名是否在数组列表中 ******/  
  94.                 //if(_self.in_array(origin,allow_origin)){  
  95.                 if(origin.yes){  
  96.                      res.setHeader('Access-Control-Allow-Origin',origin.name);  
  97.                      res.end(JSON.stringify(_dt));  
  98.                 }  
  99.                 else{  
  100.                      /******** 如有设置就取设置URL返回头信息 ********/  
  101.                      if(query.origin){  
  102.                         res.setHeader('Access-Control-Allow-Origin',query.origin);  
  103.                         res.end(JSON.stringify(_dt));  
  104.                      }  
  105.                      /******** 没设置URL就返回无权限错误信息  ********/  
  106.                      else{  
  107.                         errStr.info="You don't have permission to submit!";  
  108.                         res.setHeader('Access-Control-Allow-Origin',origin.name);
  109.                         res.end(JSON.stringify(errStr));
  111.                      }
  113.                 }
  115.            }
  116.            /********* 没有所匹配的POST提交数据||都要设头返回信息 ********/
  117.            else{
  118.                 /******** 其他POST参数的提交  ********/
  119.                 if(query){
  120.                     res.writeHeader(res.statusCode,{
  121.                         "Access-Control-Allow-Origin":origin.name,
  122.                         "Access-Control-Allow-Headers":"X-Requested-With",
  123.                         "Access-Control-Allow-Methods":"GET,POST,PUT,DELETE,OPTIONS",
  124.                         "Content-type":"application/json; charset=utf-8"
  125.                     });
  126.                     var err={status:-1,info:"Syntax error in parameters or arguments."};
  127.                     res.end(JSON.stringify(err));
  128.                 }
  129.                 else{
  130.                     res.writeHeader(res.statusCode,{
  131.                         "Content-type": "text/html; charset=utf-8"
  132.                     });
  133.                     res.end('It is forbidden for the URL request!');  
  134.                 }  
  135.   
  136.             }  
  137.             /****** 判断结束 ******/  
  138.         });  
  139.   
  140.     }  
  141.   
  142.   
  143.   /****** 内部结束 ******/  
  144.   }  
  145. }  
  146. module.exports=new CORS_Node();  

NodeJs数据提交接口地址 (不允许使用GET访问) ：http://liuxinxiu.com:3000/CORS_Node/

注意：NodeJs Server 是本站的测试环境，有时候因需要会临时关闭，该地址仅供测试，如您有需要请自建环境～

配合HTML代码如下：

XML/HTML代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8"/>    
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>  
  7.     <meta name="format-detection"content="telephone=no">  
  8.     <meta name="apple-mobile-web-app-capable" content="yes" />  
  9.     <meta name="apple-mobile-web-app-status-bar-style" content="black" />  
  10.     <style>body,html {background:#fff;font-family: "Lucida Grande",Calibri,Arial;font-size:12pt;color: #333;background: #f8f8f8;text-align:center;}*{margin:0;padding:0;}h1{line-height:1.6em;font-size:24px;text-indent:.5em;padding-top:.6em}i{line-height:2em;font-size:18px;color:#999;}.line{height:10px;border-bottom:1px solid #ccc;font-size:0;overflow:hidden;}</style>  
  11.     <title>跨域测试</title>  
  12. </head>  
  13. <body>  
  14. <h1 id="show"></h1>  
  15. <input type="button" value="Click me" onclick="msg()" />  
  16.   
  17. </body>  
  18. <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>  
  19. <script type='text/javascript'>  
  20. /********** 获取URL参数 **********/  
  21. function getQueryString(name){  
  22. var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)","i");  
  23. var r=window.location.search.substr(1).match(reg);  
  24. if (r!=null) return unescape(r[2]); return null;  
  25. }  
  26. var _n=getQueryString('n');  
  27. var _url=getQueryString('url');  
  28. var _name=getQueryString('name');  
  29. var _gender=getQueryString('gender');  
  30. var _origin=getQueryString('origin');  
  31. var _error=getQueryString('error');  
  32. console.log('origin:'+_origin+' —— name:'+_name+' —— gender:'+_gender);  
  33.   
  34. window.onload=function(){  
  35.     if(_n=='php'){  
  36.     location.href='http://'  
  37.              +location.host  
  38.              +location.pathname  
  39.              +'?origin=http://'+location.host;  
  40.     }else if(_n=='node'){  
  41.         location.href='http://'  
  42.                      +location.host  
  43.                      +location.pathname  
  44.                      +'?origin=http://'+location.host+'&'  
  45.              +'url=http://liuxinxiu.com:3000/CORS_Node/'  
  46.   
  47.     }else if(_n=='proxy'){  
  48.         location.href='http://'  
  49.                      +location.host  
  50.                      +location.pathname  
  51.                      +'?origin=http://'+location.host+'&'  
  52.                      +'url=http://liuxinxiu.com:3000/CORS_Node_Proxy/'  
  53.       
  54.     }else if(_n=='test'){  
  55.         location.href='http://test1.liuxinxiu.com/php/Interface/html/server.html'  
  56.              +'?origin=http://test1.liuxinxiu.com&'  
  57.              +'url=http://liuxinxiu.com:3000/CORS_Node_Proxy/&'  
  58.              +'error=1'  
  59.     }  
  60. }  
  61.   
  62. /********** 发起Ajax请求 **********/  
  63. function msg(){  
  64.     /******* 动态切换提交数据 *******/  
  65.     if(_origin&&!_error){  
  66.     if(_name&&_gender){  
  67.         var data={name:_name,gender:_gender,origin:_origin};  
  68.     }  
  69.     else{  
  70.         var data={name:"xiaoming",gender:"male",origin:_origin};  
  71.     }  
  72.     }  
  73.     else if(_error==null){  
  74.     var data={name:"xiaoming",gender:"male"};  
  75.     }  
  76.     else if(_error){  
  77.         var data={xxx:111};  
  78.     }  
  79.     /******* 动态设置提交URL *******/  
  80.     if(_url){  
  81.     var urlPath=_url;  
  82.     }  
  83.     else{  
  84.     var urlPath='http://code.liuxinxiu.com/php/Post/CORS_PHP.php';  
  85.     }  
  86.     $.ajax({  
  87.        type:'post',  
  88.        url:urlPath,  
  89.        data:data,  
  90.        cache:false,  
  91.        dataType:'json',  
  92.        success:function(data){  
  93.            if(data.name){  
  94.         document.getElementById("show").innerHTML=data.name+' '+data.gender;  
  95.            }  
  96.        else if(data.status!=1){  
  97.         document.getElementById("show").innerHTML=data.info;  
  98.        }  
  99.        },    
  100.        error:function(){  
  101.            console.log("请求错误//")  
  102.        }  
  103.     });  
  104. };  
  105.   
  106. /***********************************************************************************************  
  107. $.post("http://www.server.com/server.php",{name:"fdipzone",gender:"male"}).done(function(data){    
  108.     document.getElementById("show").innerHTML=data.name+' '+data.gender;  
  109. });  
  110. **********************************************************************************************/  
  111. </script>  
  112. </html>  

HTML访问地址 (测试跨域) ==> http://test1.liuxinxiu.com/php/Interface/html/server.html?n=node

HTML访问地址 (非法参数) ==> http://test1.liuxinxiu.com/php/Interface/html/server.html?error=node

注意：本站的 NodeJs Server 是学习测试环境，有临时关闭的可能，建议在本地环境测试～

Tags: , ,
NodeJs平台 | 评论(0) | 引用(0) | 阅读(4337)

NodeJs JSONP数据接口定义

[不指定 2016/09/06 18:09 | by 刘新修 ]
JavaScript代码
  1. var http = require('http');    
  2. var urllib = require('url');    
  3.     
  4. var port = 10011;    
  5. var data = {'name': 'jifeng', 'company': 'taobao'};    
  6.     
  7. http.createServer(function(req, res){    
  8.   var params = urllib.parse(req.url, true);    
  9.   console.log(params);    
  10.   if (params.query && params.query.callback) {    
  11.     //console.log(params.query.callback);    
  12.     var str =  params.query.callback + '(' + JSON.stringify(data) + ')';//jsonp    
  13.     res.end(str);    
  14.   } else {    
  15.     res.end(JSON.stringify(data));//普通的json    
  16.   }        
  17. }).listen(port, function(){    
  18.   console.log('server is listening on port ' + port);      
  19. })    

自建Node路由Jsonp接口访问地址：http://liuxinxiu.com:3000/jsonp?Jsoncallback=2016&&name=liuxinxiu

JavaScript代码
  1. function jsonp(){  
  2.     this.exec=function(route,req,res){  
  3.        var data1={key:'value',hello:'world',name:'刘新修'};  
  4.        var data2={'name':'wangjiang','company':'taobao'};  
  5.        console.log(req+'---'+route)  
  6.        res.statusCode=200;  
  7.        //res.setHeader('content-type','application/json;charset=utf-8');  
  8.        //res.setHeader('Content-Type','text/html');  
  9.        //req.write(data);  
  10.        //req.end();  
  11.   
  12.        var params=url.parse(req.url,true);  
  13.        console.log(params);  
  14.        if(params.query&¶ms.query.Jsoncallback){  
  15.            console.log(params.query.Jsoncallback);  
  16.            var str=params.query.Jsoncallback+'('+JSON.stringify(data1)+')';//jsonp  
  17.            res.end(str);  
  18.        }  
  19.        else{  
  20.            res.writeHead(200,{'Content-Type':'application/json'});  
  21.            res.end(JSON.stringify(data1));      //普通的json  
  22.        }  
  23.   
  24.    }  
  25. }  
  26. module.exports=new jsonp();  

自建Node路由Jsonp接口访问地址：http://liuxinxiu.com:3000/Jsoncallback?Jsoncallback=1&name=Jack

JavaScript代码
  1. function jsoncallback(){  
  2.     this.exec=function(route,req,res){  
  3.   
  4.         /******** 处理请求判断用作JSONP ********/  
  5.         var params=url.parse(req.url,true);  
  6.   
  7.         /********** 造数据要Obj不要String **********/  
  8.         var str2={dataList:[{name:"Jack",age:28,sex:1},{name:'Tony',age:30,sex:0}]};  
  9.   
  10.         /********** 映射数据源无为undefined **********/  
  11.         var output=2016+'('+JSON.stringify(str2)+')';  
  12.         var result=params.query.Jsoncallback+'('+JSON.stringify(str2)+')';  
  13.   
  14.         /************* 定义头部信息及编码规范 *******************/  
  15.         res.writeHead(200,{'content-Type':'application/json;charset=utf-8'});  
  16.   
  17.         /************* 判断出来相应返回的结果 ********************/  
  18.         if(params.query&¶ms.query.Jsoncallback){  
  19.             res.write(result);  
  20.             res.end();  
  21.         }  
  22.         else{  
  23.             res.write(output);  
  24.             res.end();  
  25.         }  
  26.     }  
  27. };  
  28. module.exports=new jsoncallback();  
Tags: ,
NodeJs平台 | 评论(0) | 引用(0) | 阅读(4377)

几个模板引擎的对比

[不指定 2016/09/05 23:56 | by 刘新修 ]

渲染html到页面中，在koa中可以这么干：

JavaScript代码
  1. app.get('/',function*(){  
  2.     this.body = "<p>'+title+'</p>";  
  3. })  

但问题很大，模板混入到js逻辑了，非常不利于维护，基于 mvc 模式，我们需要将html模板抽离到 view 中方便维护，这时候我们就需要一款模板渲染引擎。

为什么选择xtemplate

适用于 koa 的模板引擎选择非常多，比如 jade、ejs、nunjucks、xtemplate 等。

为什么选择 xtemplate 呢？

上手难度

jade 无疑是最独特，上手难度最高，特别是将 html 转成 jade 风格的代码，需要一些成本和适应，特别是空格敏感，经常引起模块渲染报错：

JavaScript代码
  1. body  
  2.     h1 Jade - node template engine  
  3.     #container.col  
  4.       if youAreUsingJade  
  5.         p You are amazing  
  6.       else  
  7.         p Get on it!  

但 jade 在 express 中拥有广泛的群众基础，所以从 express 转到 koa，jade 是个不错的选择，但我一直认为 jade 不是最佳的模板选择。

ejs、nunjucks、xtemplate 的上手难度差不多，但ejs的扩展写法有些诡异，特别是 filter 的写法：

JavaScript代码
  1. <p><%=: users | first | capitalize %></p>  

xtemplate 相对于 nunjucks 的优势是，模板的逻辑写法体验更接近js（ejs的逻辑表达也很接近js），上手更为简单，来看下同样一个 if 判断的写法差异。

xtemplate:

JavaScript代码
  1. {{#if(variable===0)}}  
  2.   It is true      
  3. {{/if}}  

nunjucks:

JavaScript代码
  1. {% if variable == 0 %}  
  2.   It is true  
  3. {% endif %}  

所以上手难度：xtemplate < nunjucks < ejs < jade 。

功能的强大度

四款模板引擎必备几样功能都具备：变量、逻辑表达式、循环、layout、include、宏、扩展等。

nunjucks 无疑是功能最全面的模板引擎，xtemplate 拥有 nunjucks 大部分的特性，除了filter，但 xtemplate 拥有非常强悍的拓展性：

JavaScript代码
  1. xtpl.addCommand('money',function(scope, option){  
  2.     var money = option.params[0];  
  3.     if(typeof money !== 'number') return '';  
  4.     //金额除以100（接口返回的金额都是以分为单位，转成元）  
  5.     var s = Number(money)/100;  
  6.     return s;  
  7. })  

模板中使用：

JavaScript代码
  1. {{money(10000)}}  

nunjucks 与 xtemplate 都拥有实用的宏定义功能：

JavaScript代码
  1. {{#macro("test","param", default=1)}}  
  2.     param is {{param}} {{default}}  
  3. {{/macro}}  

模板中使用：

JavaScript代码
  1. {{macro("test","2")}}  

输出内容：

JavaScript代码
  1. param is 2 1  

jade 中的 Mixins，ejs 中的 function 也可以实现类似的抽取公用html代码块的目的 。

如果真要分个高下：nunjucks > xtemplate > jade > ejs 。

是否支持前后端混用

jade 直接淘汰，相信在前端js领域一般不会选择 jade 来渲染。

nunjucks 也使用的比较少（ejs其实也少），更多人会选择使用 handlebars 。

xtemplate 目前在阿里的系统中前后端混用中已经得到论证，节约了模板前后端转换的时间。

事实上是否支持前后端混用不是决定性因素，特别是在 angularjs 盛行的年代。

性能考量

它们都很快，其实性能都不是问题，真要较真的话，xtemplate 会更优秀些，可以看 xtemplate benchmark。

个人觉得性能不是决定性因素。

基于上述几点考虑，推荐使用 xtemplate 。

Tags: ,
NodeJs平台 | 评论(0) | 引用(0) | 阅读(7691)

node.js 获取http url路径中的各个参数

[不指定 2016/09/05 08:52 | by 刘新修 ]

假设URL为：http://localhost:8888/select?name=a&id=5

JavaScript代码
  1. http.createServer(function(request,response){    
  2.         var pathname = url.parse(request.url).pathname;  //pathname => select    
  3.             
  4.         var arg = url.parse(request.url).query;          //arg => name=a&id=5    
  5.         console.log("Request for " + arg );    
  6.         var str = querystring.parse(arg);                //str=> {name:'a',id:'5'}    
  7.             
  8.         var arg1 = url.parse(request.url, true).query;   //arg1 => {name:'a',id:'5'}    
  9.         console.log("Request for " + arg1 );    
  10.             
  11.         var name = querystring.parse(arg).name;         //name => a    
  12.         console.log("name = "+name);    
  13.     
  14.         console.log("Request for " + pathname + " received.");    
  15.     }).listen(8888);    

//querystring.parse(arg)   => { name: 'a', id: '5' }

var url = require('url');
var a = url.parse('http://example.com:8080/one?a=index&t=article&m=default');
console.log(a);

//输出结果：
{
    protocol : 'http' ,
    auth : null ,
    host : 'example.com:8080' ,
    port : '8080' ,
    hostname : 'example.com' ,
    hash : null ,
    search : '?a=index&t=article&m=default',
    query : 'a=index&t=article&m=default',
    pathname : '/one',
    path : '/one?a=index&t=article&m=default',
    href : 'http://example.com:8080/one?a=index&t=article&m=default'
}

Tags: ,
NodeJs平台 | 评论(0) | 引用(0) | 阅读(4795)

nodeJs构建一个HttpServer

[不指定 2016/09/04 20:19 | by 刘新修 ]

将下面代码放入server.js中

JavaScript代码
  1. var http = require("http");    
  2. http.createServer(function(request, response) {    
  3.     console.log('request received');    
  4.     response.writeHead(200, {"Content-Type": "text/plain"});    
  5.     response.write("Hello World");    
  6.     response.end();    
  7. }).listen(8888);    
  8. console.log('server started');    

执行node server.js
打开http://localhost:8888/，页面显示Hello World

JavaScript代码
  1. var http=require('http');  
  2.   
  3. var data={key:'value', hello:'world'};  
  4. var srv=http.createServer(function (req, res) {  
  5.   res.writeHead(200,{'Content-Type': 'application/json'});  
  6.   res.end(JSON.stringify(data));  
  7. });  
  8.   
  9. srv.listen(8080,function() {  
  10.   console.log('listening on localhost:8080');  
  11. });  

 

Tags: ,
NodeJs平台 | 评论(0) | 引用(0) | 阅读(3853)

nodejs 提供了一个 node-uuid 模块用于生成 uuid:

[不指定 2016/09/04 14:07 | by 刘新修 ]

首先执行：npm install node-uuid -g

JavaScript代码
  1. var uuid = require('node-uuid');
  2. //var uuid = require('/usr/local/nodejs/lib/node_modules/node-uuid');
  3. console.log(uuid.v1())    
  4. console.log(uuid.v4())    

注明：如果在linux下编译安装node可以使用软连接ls 或这直接写绝对路径引入需要的nmp模块!

v1 是基于时间戳生成uuid

v4是随机生成uuid

结果：

 

  1. 57af5b10-3a76-11e5-922a-75f42afeee38  
  2. f3917fb9-9bde-4ec1-a7cf-966251b3d22a  
Tags: ,
NodeJs平台 | 评论(0) | 引用(0) | 阅读(7059)

gcc-4.4.7升级至gcc-5.3.0 后编译安装node-v4.5.0

[不指定 2016/09/02 15:19 | by 刘新修 ]

yum -y install gcc gcc-c++

 
因centOS6.6/+ 最高版本的gcc也只到4.4.7版本,只好手动升级一下了。
 
.tar.gz    格式解压为          tar   -zxvf   xx.tar.gz
.tar.bz2   格式解压为          tar   -jxvf    xx.tar.bz2
 
下载gcc-4.8.2源码:
wget ftp://gcc.gnu.org/pub/gcc/releases/gcc-4.8.2/gcc-4.8.2.tar.bz2
wget ftp://gcc.gnu.org/pub/gcc/releases/gcc-4.9.1/gcc-4.9.1.tar.gz
tar jxvf gcc-4.8.2.tar.bz2
 
执行自动下载依赖(gmp-4.3.2、mpfr-2.4.2、mpc-0.8.1)
/home/installSoft/gcc-4.8.2/contrib/download_prerequisites
 
或者自己下载也行(根据gcc-4.8自动匹配好的版本收集比较兼容)：
wget ftp://gcc.gnu.org/pub/gcc/infrastructure/gmp-4.3.2.tar.bz2
wget ftp://gcc.gnu.org/pub/gcc/infrastructure/mpfr-2.4.2.tar.bz2
wget ftp://gcc.gnu.org/pub/gcc/infrastructure/mpc-0.8.1.tar.gz
 
 
=====================================================================================
第一部分安装gcc的依赖库
=====================================================================================
 
gcc 编译需要三个额外库gmp、mpfr、mpc，下载并按照下面的顺序安装它们，如下:
wget ftp://ftp.gnu.org/gnu/gmp/gmp-5.1.3.tar.gz
wget ftp://ftp.gnu.org/gnu/mpfr/mpfr-3.1.2.tar.gz
wget http://www.multiprecision.org/mpc/download/mpc-1.0.tar.gz
 
 
tar -zxvf gmp-5.1.3.tar.gz
cd gmp-5.1.3
./configure --prefix=/usr/local/gmp-5.1.3
make && make install
cd ..
 
tar -zxvf mpfr-3.1.2.tar.gz
cd mpfr-3.1.2
./configure --prefix=/usr/local/mpfr-3.1.2 --with-gmp=/usr/local/gmp-5.1.3
make && make install
cd ..
 
tar -zxvf mpc-1.0.tar.gz
cd mpc-1.0
./configure --prefix=/usr/local/mpc-1.0 --with-gmp=/usr/local/gmp-5.1.3 --with-mpfr=/usr/local/mpfr-3.1.2
make && make install
cd ..
 
 
=====================================================================================
第二部分安装gcc
=====================================================================================
 
wget http://ftp.gnu.org/gnu/gcc/gcc-5.3.0/gcc-5.3.0.tar.gz
cd gcc-build-5.3.0
../configure --prefix=/usr/local/gcc -enable-threads=posix -disable-checking -disable-multilib -enable-languages=c,c++ --with-gmp=/usr/local/gmp-5.1.3 --with-mpfr=/usr/local/mpfr-3.1.2 --with-mpc=/usr/local/mpc-1.0
make
make install
 
执行以下看看装好没有：
/usr/local/gcc/bin/gcc -v
gcc version 4.8.2 (GCC)
 
 
卸载旧版本
yum remove -y gcc gcc-c++
updatedb
 
 
链接新版本
cd /usr/bin
ln -s /usr/local/gcc/bin/gcc gcc
ln -s /usr/local/gcc/bin/g++ g++
 
 
检查版本
gcc -v
g++ -v
 
=====================================================================================
第三部分安装nodeJs
=====================================================================================
 
1、NodeJS下载
https://nodejs.org/en/download/
[root@test1 packages]# wget https://nodejs.org/dist/v4.5.0/node-v4.5.0.tar.gz
 
2、解压安装
tar -zxvf node-v4.5.0.tar.gz
cd node-v4.5.0
./configure --prefix=/usr/local/nodejs
make
make install
 
=============================================
如果configure默认安装路径node复制到bin下：
cp /usr/local/bin/node /usr/sbin/
 
如果configure指定安装路径node复制到bin下：
/usr/local/nodejs/bin/node -v
cp /usr/local/nodejs/bin/node /usr/sbin/
==============================================
 
安装nodeJS时候报：CC: command not found 是因为gcc升级后，同时也删除了cc标签链接至gcc的命令，cc是unix下的产物，linux下的cc就是gcc
 
链接cc至gcc[库]一般放在/usr/bin
ln -s /usr/bin/gcc /usr/bin/cc
 
[系统短命令]一般放在/usr/sbin
cp /usr/local/nodejs/bin/node /usr/sbin/
 
 
安装完成，查看node版本号:
[root@Hongkong node-v4.5.0]# node -v
v4.5.0
[root@Hongkong node-v4.5.0]#
 
 
=====================================================================================
 
依次编译安装下载的依赖包(好像已经自动解压了)：
cd /home/installSoft/gcc-4.8.2/contrib/gmp
mkdir build
cd build
../configure
sudo make
sudo make install
 
cd /home/installSoft/gcc-4.8.2/contrib/mpfr
mkdir build
cd build
../configure --prefix=/usr/local/gcc/mpfr-2.4.2 --with-gmp=/usr/local/gcc/gmp-4.3.2
sudo make
sudo make install
 
cd /home/installSoft/gcc-4.8.2/contrib/mpc
mkdir build
cd build
../configure --prefix=/usr/local/gcc/mpc-0.8.1 --with-mpfr=/usr/local/gcc/mpfr-2.4.2 --with-gmp=/usr/local/gcc/gmp-4.3.2
sudo make
sudo make install
 
 
删除原先的目录：
rm -rf /usr/local/gcc
 
编译安装gcc4.8.2
 
cd /home/installSoft/gcc-4.8.2/
mkdir build
../configure --prefix=/usr/local/gcc --enable-threads=posix --disable-checking --enable-languages=c,c++ --disable-multilib --with-gmp=/usr/local/gcc/gmp-4.3.2 --with-mpfr=/usr/local/gcc/mpfr-2.4.2 --with-mpc=/usr/local/gcc/mpc-0.8.1
sudo make
sudo make install
 
 
../configure --prefix=/usr/local/gcc --enable-checking=release --enable-languages=c,c++ --disable-multilib
 
如果make出现configure: error: cannot compute suffix of object files: cannot compile
原来如此，接下来把mpc ,gmp,mpfr 的lib文件夹果断加入到 LD_LIBRARY_PATH 变量
注意此处的三个lib，根据你所安装的路径来设置：
 
export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/gcc/mpc-0.8.1/lib:/usr/local/gcc/gmp-4.3.2/lib:/usr/local/gcc/mpfr-2.4.2/lib
 
 
 
/home/installSoft/node-v4.5.0/out/Release/mksnapshot: /usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found (required by /home/installSoft/node-v4.5.0/out/Release/mksnapshot)
strings /usr/lib64/libstdc++.so.6 | grep GLIBCXX
 
查看 GLIBCXX 版本：
[root@Hongkong node-v4.5.0]# strings /usr/lib64/libstdc++.so.6 | grep GLIBCXX
GLIBCXX_3.4
GLIBCXX_3.4.1
GLIBCXX_3.4.2
GLIBCXX_3.4.3
GLIBCXX_3.4.4
GLIBCXX_3.4.5
GLIBCXX_3.4.6
GLIBCXX_3.4.7
GLIBCXX_3.4.8
GLIBCXX_3.4.9
GLIBCXX_3.4.10
GLIBCXX_3.4.11
GLIBCXX_3.4.12
GLIBCXX_3.4.13
GLIBCXX_FORCE_NEW
GLIBCXX_DEBUG_MESSAGE_LENGTH
[root@Hongkong node-v4.5.0]#
 
这里并没有查看到: GLIBCXX_3.4.15
 
 
执行以下命令，查找编译 gcc 时生成的最新动态库：
find / -name "libstdc++.so.6"
 
[root@Hongkong node-v4.5.0]# find / -name "libstdc++.so.6"
/home/installSoft/gcc-4.8.2/build/stage1-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6
/home/installSoft/gcc-4.8.2/build/x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6
/home/installSoft/gcc-4.8.2/build/prev-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6
/usr/lib64/libstdc++.so.6
/usr/local/gcc/lib64/libstdc++.so.6
[root@Hongkong node-v4.5.0]#
 
取第一条：
/home/installSoft/gcc-4.8.2/build/stage1-i686-pc-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6          (32位|其他)
/home/installSoft/gcc-4.8.2/build/stage1-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6   (64位|本例)
 
 
将上面的最新动态库 libstdc++.so.6 复制到 /usr/lib   目录下(32位)：
将上面的最新动态库 libstdc++.so.6 复制到 /usr/lib64 目录下(64位)：
 
在64位系统下复制文件重新覆盖，出现?请输入y
cp /home/installSoft/gcc-4.8.2/build/stage1-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6 /usr/lib64
cp /home/installSoft/gcc-4.8.2/build/stage1-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6 /usr/lib64
cp /ftp/gcc-5.3.0/gcc-build-5.3.0/stage1-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6 /usr/lib64
 
复制后，修改系统默认动态库的指向，即：重建默认库的软连接。
 
cp /ftp/gcc-5.3.0/gcc-build-5.3.0/stage1-x86_64-unknown-linux-gnu/libstdc++-v3/src/.libs/libstdc++.so.6.0.21 /usr/lib64
 
切换工作目录至/usr/lib64：
cd /usr/lib64
 
删除原来软连接:
rm -rf libstdc++.so.6
 
将默认库的软连接指向最新动态库：
ln -s libstdc++.so.6.0.21 libstdc++.so.6
 
完成后再次执行：
[root@Hongkong node-v4.5.0]# strings /usr/lib64/libstdc++.so.6 | grep GLIBCXX
GLIBCXX_3.4
GLIBCXX_3.4.1
GLIBCXX_3.4.2
GLIBCXX_3.4.3
GLIBCXX_3.4.4
GLIBCXX_3.4.5
GLIBCXX_3.4.6
GLIBCXX_3.4.7
GLIBCXX_3.4.8
GLIBCXX_3.4.9
GLIBCXX_3.4.10
GLIBCXX_3.4.11
GLIBCXX_3.4.12
GLIBCXX_3.4.13
GLIBCXX_3.4.14
GLIBCXX_3.4.15
GLIBCXX_3.4.16
GLIBCXX_3.4.17
GLIBCXX_3.4.18
GLIBCXX_3.4.19
GLIBCXX_FORCE_NEW
GLIBCXX_DEBUG_MESSAGE_LENGTH
[root@Hongkong node-v4.5.0]#
 
这里已经查看到: GLIBCXX_3.4.15
 
 
添加共享库路径，su到root编辑ld.so.conf文件，添加如下内容到文件中：
vi /etc/ld.so.conf
/usr/local/gcc/mpc-0.8.1/lib
/usr/local/gcc/gmp-4.3.2/lib
/usr/local/gcc/mpfr-2.4.2/lib
 
 
/usr/local/gmp-5.1.3/lib
/usr/local/mpfr-3.1.2/lib
/usr/local/mpc-1.0/lib
 
 
保存退出，执行ldconfig命令
 
 
 
执行以下看看装好没有：
/usr/local/gcc/bin/gcc -v
gcc version 4.8.2 (GCC)
 
 
卸载旧版本
yum remove -y gcc gcc-c++
updatedb
 
 
链接新版本
cd /usr/bin
ln -s /usr/local/gcc/bin/gcc gcc
ln -s /usr/local/gcc/bin/g++ g++
 
 
检查版本
gcc -v
Tags: ,
NodeJs平台 | 评论(0) | 引用(0) | 阅读(4457)

前端开发工程化—— webpack 的搭建与配置

[不指定 2016/06/12 17:48 | by 刘新修 ]

webpack 是一个npm包，所以我们通过 npm 命令来全局安装：

D:\wmnp3\nodeJs>npm install webpack -g
安装完成后，命令行下就有 webpack 命令可用，执行 webpack --help 可以查看 webpack 提供的各种命令。
当然如果常规项目还是把依赖写入 package.json 包去更人性化，初始化创建一个package.json文件：
cd D:\wmnp3\wwwroot\nodeJs\MVC\helloWorld
npm init
npm install webpack --save-dev 在当前目录下安装局域的webpack
安装 sass-loader 相关的加载器：
安装 CSS 相关的加载器：
安装配置图片加载器url-loader
它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：
安装 babel-loader 相关的加载器：
使用Babel转译器，帮助我们将ES6代码转译为主流浏览器支持的ES5代码。
babel-loader加载器能将ES6的代码转换成ES5代码，这使我们现在可以使用ES6了；我们在使用之前，我们需要安装babel-loader
npm install babel-loader --save-dev --registry=https://registry.npm.taobao.org
npm install babel-preset-es2015 --save-dev
安装babel-preset-es2015
安装babel-runtime
ExpressJS启动服务：http://127.0.0.1:3000
webpack相关命令如下：
webpack 最基本的启动webpack命令
webpack -w 提供watch方法，实时进行打包更新
webpack -p 对打包后的文件进行压缩
webpack -d 提供SourceMaps，方便调试
webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤
webpack --profile 输出性能数据，可以看到每一步的耗时
webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块
webpack --help 帮助说明
 
webpack打包会根据依赖自动并合代码模块，使用webpack -p 压缩代码成一行.从而加快页面请求速度，使用前后对比：
压缩代码前：
压缩入口代码后：
最后附上webpack.config.js 的配置文件：
JavaScript代码
  1. var path=require("path");  
  2. var webpack=require('webpack');  
  3. var ExtractTextPlugin=require("extract-text-webpack-plugin");  
  4. /**** webpack.config.js ****/  
  5. module.exports={  
  6.     context:__dirname+'/assets', //requre('a.js')的时候从哪个路径查找  
  7.     entry:{  
  8.         main:__dirname+"/assets/js/public/main.js",  
  9.         index:__dirname+"/assets/js/public/index.js"  
  10.     },  
  11.     /**** 新添加的module属性 ****/  
  12.     output:{  
  13.         path:__dirname+'/build/js/',  
  14.         filename:'[name].bundle.js', //模版基于entry的key  
  15.         publicPath:"/xfile/" //引用你的文件时考虑使用的地址(可设成http地址, 如:http://cdn.my.com)  
  16.     },  
  17.     /**** 新添加的module属性 ****/  
  18.     module:{  
  19.         loaders:[  
  20.             {  
  21.                 test:/\.(jpg|png|svg)$/i,  
  22.                 loaders:[  
  23.                     'image?...',  
  24.                     'url?limit=10000&name=img/[name].[hash:8].[ext]',  
  25.                 ]  
  26.             },  
  27.             {  
  28.                 test:/\.js$/,  
  29.                 exclude:/(node_modules|bower_components)/,  
  30.                 loader:'babel',  
  31.                 query:{  
  32.                     presets:['es2015'],  
  33.                     plugins:['transform-runtime']  
  34.                 }  
  35.             },  
  36.             {test: /\.css$/,loader: ExtractTextPlugin.extract("style-loader","css-loader")},  
  37.             {test: /\.(jpg|png|svg)$/,loader:"url?limit=8192"},  
  38.             {test: /\.scss$/, loader:"style!css!sass"}  
  39.         ]  
  40.     },  
  41.     plugins:[  
  42.         //new webpack.optimize.CommonsChunkPlugin('common.js'),  
  43.         new ExtractTextPlugin("[name].css"),  
  44.         new webpack.ProvidePlugin({  
  45.             "jQuery":path.resolve(  
  46.                 __dirname,  
  47.                 "js/lib/jquery/jquery-1.8.3.js"  
  48.             ),  
  49.             "$":path.resolve(  
  50.                 __dirname,  
  51.                 "js/lib/jquery/jquery-1.8.3.js"  
  52.             )  
  53.         }),  
  54.     ]  
  55. }  
Tags: ,
NodeJs平台 | 评论(0) | 引用(0) | 阅读(5278)

Express.js 构建工程实例 ---- [ 环境安装、控制器/路由设置、Post+Jsonp接口、ejs模版、全局变量 ]

[不指定 2016/05/28 21:40 | by 刘新修 ]

Express.js 构建工程实例 ---- [ 环境安装、控制器/路由设置、Post+Jsonp接口、ejs模版、全局变量 ]

ExpressJS在Node环境上安装( 绿色版Node运行环境套件下载 )：

app.js 代码如下：

JavaScript代码
  1. /******************************************************
  2. *************** global modules  ******************
  3. ******************************************************/  
  4.   
  5. var express=require('express');  
  6. var path=require('path');  
  7. var favicon=require('serve-favicon');  
  8. var logger=require('morgan');  
  9. var cookieParser=require('cookie-parser');  
  10. var bodyParser=require('body-parser');  
  11.   
  12.   
  13. var routes=require('./routes/index');  
  14. //var redis=require('./routes/redis');  
  15.   
  16.   
  17. var app=express();  
  18.   
  19.   
  20. /******************************************************
  21. *************** view engine setup  ******************
  22. ******************************************************/  
  23. /******************  jade模版     *********************/  
  24. /*******************************************************
  25. app.set('views',path.join(__dirname,'views/jade/'));
  26. app.set('view engine','jade'); //jade or ejs
  27. ********************************************************/  
  28.   
  29. /******************  ejs模版     *********************/  
  30. app.set('views',path.join(__dirname,'views/ejs/'));  
  31. app.set('view engine','ejs'); //jade or ejs  
  32. /******************  ejs模版     *********************/  
  33.   
  34.   
  35.   
  36. /******************************************************
  37. ****************** routes setup  ********************
  38. ******************************************************/  
  39. // uncomment after placing your favicon in /public  
  40. //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));  
  41. app.use(logger('dev'));  
  42. app.use(bodyParser.json());  
  43. app.use(bodyParser.urlencoded({extended:false}));  
  44. app.use(cookieParser());  
  45. app.use(express.static(path.join(__dirname,'public')));  
  46.   
  47. app.use('/',routes);  
  48. /****************** routes setup  *********************/  
  49. /*******************************************************
  50. app.use('/redis',redis);
  51. app.use('/jsonp',routes);
  52. app.use('/login',routes);
  53. *************************************************/  
  54.   
  55.   
  56. /******************************************************
  57. ****************** 服务错误处理  ********************
  58. ******************************************************/  
  59.   
  60. /***** catch 404 and forward to error handler *****/  
  61. app.use(function(req,res,next){  
  62.   var err=new Error('404 Not Found');  
  63.   err.status=404;  
  64.   next(err);  
  65. });  
  66.   
  67.   
  68.   
  69. // error handlers  
  70. // development error handler  
  71. /***** 通用错误处理程序 *****/  
  72. if(app.get('env')==='development'){  
  73.   app.use(function(err,req,res,next){  
  74.     res.status(err.status||500);  
  75.     res.render('sys/error',{  
  76.       message:err.message,  
  77.       error:err,  
  78.       version:process.version  
  79.     });  
  80.   });  
  81. }  
  82.   
  83. // production error handler  
  84. // no stacktraces leaked to user  
  85. app.use(function(err,req,res,next){  
  86.   res.status(err.status||500);  
  87.   res.render('sys/error',{  
  88.     message:err.message,  
  89.     error:{}  
  90.   });  
  91. });  
  92. /***** 通用错误处理程序 *****/  
  93.   
  94. module.exports=app;  

routes/index.js 代码如下：

JavaScript代码
  1. /******************************************************
  2. *************** router  *************************
  3. ******************************************************/  
  4. var express=require('express');  
  5. var router=express.Router();  
  6.   
  7.   
  8. var url=require("url");            //解析GET请求    
  9. var query=require("querystring");  //解析POST请求  
  10.   
  11.   
  12.   
  13. /************* GET home page demo *************/  
  14. router.get('/',function(req,res,next){  
  15.     res.render('sys/index',{title:'Express'});  
  16. });  
  17.   
  18. router.get('/jsonp',function(req,res,next){  
  19.     res.render('main/jsonp',{  
  20.         title:'jsonp'  
  21.     });  
  22. });  
  23.   
  24. router.get('/login',function(req,res,next){  
  25.     res.render('main/login',{  
  26.         title:'The Entrar-shadow Website',  
  27.         fonts:'Member Login',  
  28.         username:'Liuxinxiu',  
  29.     });  
  30. });  
  31.   
  32. router.get('/test_load',function(req,res,next){  
  33.     var build=req.query.build;  
  34.     res.render('test/test_load',{  
  35.         title:'build',  
  36.         build:build  
  37.     });  
  38. });  
  39.   
  40. router.get('/test_page',function(req,res,next){  
  41.     var build=req.query.build;  
  42.     res.render('test/test_page',{  
  43.         title:'test_page',  
  44.         build:build  
  45.     });  
  46. });  
  47.   
  48.   
  49. /*
  50. app.get('/jsonp',function(req,res,next){
  51.    res.jsonp({status:'jsonp'});  
  52. });
  53. */  
  54.   
  55. /************* 自造Json数据 *************/  
  56. var userData='PHN0eWxlPip7bWFyZ2luOjA7cGFkZGluZzowO31oMXtmb250LXNpemU6MTZweDt0ZXh0LWFsaWduOmNlbnRlcjsgbGluZS1oZWlnaHQ6NDVweDt9Ym9keXtjb2xvcjojMzMzO2ZvbnQtc2l6ZToxNHB4O2ZvbnQtZmFtaWx5OiJNaWNyb3NvZnRZYWhlaSI7YmFja2dyb3VuZDojQjdDQUNDO31kaXZ7Ym9yZGVyOjFweCBzb2xpZCAjNDA1RTdCOyBib3JkZXItYm90dG9tOjA7IHdpZHRoOjk1JTsgbWFyZ2luOjAgYXV0bztiYWNrZ3JvdW5kOiNmZmY7Y29udGVudDoiIjtkaXNwbGF5OnRhYmxlO2NsZWFyOmJvdGh9bGl7bGluZS1oZWlnaHQ6MzVweDtsaXN0LXN0eWxlOm5vbmU7d2lkdGg6MjUlO3RleHQtYWxpZ246Y2VudGVyO2JvcmRlci1ib3R0b206MXB4IHNvbGlkICM0MDVFN0I7ZmxvYXQ6bGVmdDt9PC9zdHlsZT48aDE+5pyA6L+R6aOO5LqR5Lq65ZGY5ZCN5Y2VPC9oMT48ZGl2Pg0KCTx1bD4NCgkJPGxpPumjjua4heaJrDwvbGk+DQoJCTxsaT4xMTAxPC9saT4NCgkJPGxpPjIzPC9saT4NCgkJPGxpPjUyODE5OTExPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuiuuOW/l+mjnjwvbGk+DQoJCTxsaT4xMTAxPC9saT4NCgkJPGxpPjIzPC9saT4NCgkJPGxpPjUyODE5OTExPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS7pOeLkOWGsjwvbGk+DQoJCTxsaT4xMTAyPC9saT4NCgkJPGxpPjIxPC9saT4NCgkJPGxpPjUyODE5OTAxPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS7u+aIkeihjDwvbGk+DQoJCTxsaT4xMTAzPC9saT4NCgkJPGxpPjIyPC9saT4NCgkJPGxpPjUyODE5OTkxPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS7u+ebiOebiDwvbGk+DQoJCTxsaT4xMTA0PC9saT4NCgkJPGxpPjI0PC9saT4NCgkJPGxpPjUyODE5OTgxPC9saT4NCgk8L3VsPg0KCQ0KCTx1bD4NCgkJPGxpPuS4nOaWueS4jei0pTwvbGk+DQoJCTxsaT4xMTA1PC9saT4NCgkJPGxpPjI2PC9saT4NCgkJPGxpPjUyODE5OTgxPC9saT4NCgk8L3VsPg0KCTwvZGl2Pg==';  
  57. var dataJson={status:1,message:"这是一个JSONP接口,success!",dataList:userData,JsonArray:[0,1,2,3,4,5]};  
  58.   
  59. /************* 处理GET请求(jsonp需判断参数单独处理) *************/  
  60. router.get('/API/sendGet/jsonpInfo.do',function(req,res){  
  61.     //res.contentType('json');//返回的数据类型  
  62.     //res.writeHead(200,{"Content-Type":"text/json"});  
  63.     res.setHeader('Content-Type','text/json;charset=UTF-8');  
  64.     var params=url.parse(req.url,true).query; //解释url参数部分name=zzl&email=zzl@sina.com  
  65.     /**** 获取请求过来的跨域回调函数名称 ****/  
  66.     var reqQuery=req.query,Jsoncallback=req.query.Jsoncallback;  
  67.     /**** 如果有Jsoncallback的情况 ****/  
  68.     if(reqQuery&&Jsoncallback){  
  69.         //console.log(params.query.Jsoncallback);  
  70.         //res.jsonp({status:200,message:"这是一个JSONP接口",data:[]});  
  71.         //res.send(JSON.stringify({status:200,message:"success!这是一个JSONP接口",data:[]}));  
  72.   
  73.         /**** 拼成一个JS字符串 ****/  
  74.         var str=Jsoncallback+'('+JSON.stringify(dataJson)+')';    
  75.         //res.json(str);  
  76.         //res.write(str);  
  77.         res.end(str);  
  78.   
  79.     }  
  80.     /**** 没有Jsoncallback的情况 ****/  
  81.     else{  
  82.         res.json({status:200,message:"这是一个JSON接口",data:[]});  
  83.     }  
  84. });  
  85.   
  86. /************* 处理POST请求(Body/x-www-form-urlencoded) **************/  
  87. router.post('/API/sendPost/loginSubmit.do',function(req,res){  
  88.   var username=req.body.username;  
  89.   var password=req.body.password;  
  90.     
  91.   //console.log(username!='');  
  92.   if((username&&password!='')){  
  93.     console.log("Username="+username+",password="+password);  
  94.     /**********************************************************************************
  95.     /**************   JSON.stringify(v) 和 res.json 都是格式数据   ********************/  
  96.     /*********************************************************************************
  97.         res.json({status:1,info:"数据提交成功！",username:JSON.stringify(username)});
  98.     /*********************************************************************************/  
  99.     res.json({status:1,info:"数据提交成功！",username:username});  
  100.   }else{  
  101.     res.end("0");  
  102.   }  
  103. });  
  104.   
  105. module.exports=router;  

ejs 模版：

XML/HTML代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>test</title>  
  5.         <meta charset="utf-8">  
  6.         <link type='text/css' href="/css/login/home.css" rel='stylesheet' />  
  7.         <meta name="viewport" content="width=device-width, initial-scale=1">  
  8. </head>  
  9. <body>  
  10.     <h1>test/build=</h1>  
  11.     <%if(1+1===2){%>  
  12.     <h1><%= build %></h1>  
  13.     <%}%>  
  14. </body>  
  15. <%if(build==null){%>  
  16. <!-- 引入require.js和入口文件||默认开放环境 -->  
  17. <script src="http://localhost:3000/js/lib/require.js" data-main="http://127.0.0.1:3000/js/test/app_page.js"></script>  
  18. <!--<script src="http://localhost:3000/js/test/yy.js"></script>-->  
  19. <%}%>  
  20.   
  21. <%if(build!=null&&build==1){%>  
  22. <!-- 引入require.js和入口文件||判断参数用于测试build后生产环境版本js -->  
  23. <script src="http://localhost:3000/js/lib/require.js" data-main="http://127.0.0.1:3000/js/test-built/test/app_page.js"></script>  
  24. <%}%>  
  25.   
  26. </html>  

 

Tags: , ,
NodeJs平台 | 评论(0) | 引用(0) | 阅读(4078)
第一页 1 最后页 [ 显示模式： 摘要 | 列表 ]