具体代码可以在我的git上下载:https://github.com/guoyansi/bridge这里的后台使用java写的,如果不了解java的童鞋可以忽略下面这样图片. bridge.js/* *bridge桥梁的意思,bridge.js主要是为了架起前后端开发的桥梁. ...
具体代码可以在我的git上下载:https://github.com/guoyansi/bridge
这里的后台使用java写的,如果不了解java的童鞋可以忽略下面这样图片.
bridge.js
/* *bridge桥梁的意思,bridge.js主要是为了架起前后端开发的桥梁. *bridge.js类库旨在解决以下问题,这也是bridge.js目的及意义所在. * 1.静态页面的发送post请求,会出现500错误,一个项目不可能全是get请求. * 2.前后台彻底分离后,静态资源的访问有两种 * 2.1相对路径:需要用../来寻找目标资源,开发难度大 * 2.2绝对路径.每次需要手动添加根目录名称,根目录只要有变化修改的难度就会很大. * 3.对于一些后台项目,会有超时管理.对于页面的零散的ajax请求怎么做到统一管理. * 对超时时返回的数据及时作出响应,比跳转到登录页 * 4.前后台并行开发,提高工作效率,和产品质量. * 5.前端开发不不依附于后端的开发工具,比如MyEclipse,Visual Studio.前端也有很多优秀的开发工具 * 6.分工协作,前后端分离是必然的趋势,我们不能停留在几十年前的开发模式里,一人独揽全栈, * 环境变化这么快,不进步,就是退步. * 7.前端各种技术日益成熟,比如代码压缩,模块化开发.前后台不分离,再好的技术对我们来说只是名词. * 8.彻底分离时,会造成前端请求时出现跨域的尴尬境地,前端人员对于服务器环境的生疏,寸步难行. * 9.每个ajax请求都有可能出错,同样的报错代码,总不能在每个ajax代码里都写一遍或重新调用一遍 * ========================================================================= * bridge.js是在jQuery的基础上做的二次封装. * 1.ajax封装介绍(和jQuery的调用一样): * 1.0.所有的请求被分为三种,因为请求方式不一样,路径格式也不一样. * 跨域+远程==>彻底分离时,发出的请求. * 只远程==>项目整合的时候,没有了跨域问题. * 只本地==>请求前端的本地资源 * 1.1.一切post的请求都会被转换成远程请求. * 1.2.get请求即可以访问本地资源,也可以发送远程请求 * 1.3.bridge.js不支持ajax的链式写法,因为ajax返回的是promise对象, * .done(),.fail()无法被被重写封装.(可惜!可惜!) * 1.4.若有参数cross:true,就发送远程(+跨域)请求,未定义参数cross或cross:false发送本地请求 * 1.4. * 1.4.1.既可以远程也可以本地请求的方法. * bg.ajax(opt) * bg.load(url,param,callback). * bg.get(url,param,callback,type). * bg.getJSON(url,param,callback). * * 1.4.2.因为无法添加参数cross:true,只能请求本地资源的方法 * bg.getScript(url,callback). * * 1.4.3.本地无法发送post请求,只能发送远程请求的方法 * bg.post(). * * bg.inti配置介绍: * root:"",//根目录,前后端的项目名称(根目录)最好相同,整合的时候比较容易 * view:"",//视图.前端的所有编码都放在一个目录下,这个目录就是视图 * cross:true,//跨域.开发时这里是true.整合后,改为false.有跨域+远程==>远程 * hostName:"http://172.20.12.243:8080",//主机.跨域时的主机名称 * checkSession:false,//是否检测session失效的问题,有些网站不需要检测,但是大部分登录系统都要判断session * noSession:function(data){//sessiong失效时执行的函数 * console.log("session失效,跳转页面"); * } * * 后端配置:新建一个过滤器, * 设置: * response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:8020"); * 或: * response.setHeader("Access-Control-Allow-Origin", "*"); * 前后端整合完毕后,屏蔽这个设置,就不存在跨域以及跨域带来的安全问题了. * */(function($,undefined) { /** * Bridge的实例对象, */ var objBridge=null; /** * 根函数 */ function Bridge() { objBridge=this; this.hostName={}; this.root=""; this.view=""; this.cross=false; }/** *session处理模块 */ Bridge.prototype.session={ checkSession:true,//是否检测session noSession:function(data){//session失效如何处理,data未服务端返回的数据 }, }; /*Bridge.prototype.ajaxFail=function(*/ /** * 初始化Bridge的各个参数 * @param opt */ Bridge.prototype.init=function(opt){ var k,value; for(var key in opt){ k=key.toLowerCase();//将键值转换成小写,防止误传参数,导致程序无法运行 value=opt[key]; if(k==="nosession"){ objBridge.session.noSession=value; } if(k==="checksession"){ objBridge.session.checkSession=value; } if(k==="ajaxfail"){ objBridge.ajaxFail=value; } if(k==="cross"){ objBridge.cross=value; } if(k==="hostname"){ objBridge.hostName=value; } if(k==="view"){ objBridge.view=value; } if(k==="root"){ objBridge.root=value; } } }; function sessionFilter(data,xhr,jqXHR){ var type=typeof data; var d=data; if(type=="object"){ }else if(type==="string"){ d=eval("("+d+")"); }else{ throw new Error("返回值的参数类型判断异常"); } if(d.sessionStatus===-1){ objBridge.session.noSession(d); }else{ return data; } } /** * 三种请求, * 1.远程+跨域,==>bg.init.cross:true,ajaxOpt.cross:true * 2.远程不跨域,==>bg.init.cross:false,ajaxOpt.cross:true * 3.不跨域,不远程(本地)==>bg.init.cross不起作用,ajaxopt.cross:false或未定义 * */ function getAjaxHttpType(optCross){ if(typeof optCross==="undefined"||optCross==false){ return 3; } else if(optCross==true){//设置了局部跨域参数 if(objBridge.cross){//远程+跨域 return 1; }else{//远程不跨域 return 2; } } } function getAjaxUrl(type,url){ var u=""; if(type===1){//远程+跨域 u=objBridge.hostName+"/"+objBridge.root+"/"; }else if(type===2){//远程不跨域 u="/"+objBridge.root+"/"; }else if(type===3){//不跨域,不远程(本地) if(objBridge.view){ u="/"+objBridge.root+"/"+objBridge.view+"/"; }else{ u="/"+objBridge.root+"/"; } } return u+url; } /** * 若要发送远程跨域请求, * 需要添加参数data.cross=true; * 否则被视为本地请求 * obj 请求对象 * url 请求路径 * data 请求参数 * callback 回调函数 可不填 */ Bridge.prototype.load=function(obj,url,params,callback){ if(!(obj instanceof $)){//如果obj不是jquery对象 throw new Error("load的第一个参数obj不是jQuery对象."); } var type,httpType,url; type=typeof params; if (type==="function") { callback = params; params = undefined; } if(type==="object"){ params.cross=true; httpType=getAjaxHttpType(params.cross); url=getAjaxUrl(httpType,url); }else if(type==="undefined"){//alert(1) url=getAjaxUrl(3,url); } obj.load(url,params,callback); }; /** * post请求只能请求远程数据, * 本地请求会报500错误. */ Bridge.prototype.post=function(url,params,callback,type){ var t=typeof params; var httpType; if (t==="function") { type = type || callback; callback = params; params = undefined; t=typeof params; } url=getAjaxUrl(getAjaxHttpType(true),url); $.post(url,params,callback,type); } /* * 若要发送远程跨域请求, * 需要添加参数data.cross=true; * 否则被视为本地请求 */ Bridge.prototype.get=function(url,data,callback,type){ var httpType,url; var t=typeof data; if (t==="function") { type = type || callback; callback = data; data = undefined; t=typeof data; } if(t==="object"){ httpType=getAjaxHttpType(data.cross); }else if(t==="undefined"){ httpType=3; }else { throw new Error("get请求的参数判断异常"); } url=getAjaxUrl(httpType,url); $.get(url,data,callback,type); } /* * 若要发送远程跨域请求, * 需要添加参数data.cross=true; * 否则被视为本地请求 */ Bridge.prototype.getJSON=function(url, data, callback){ objBridge.get(url,data,callback,"json"); } /* * 因为无法添加参数,所以只能发送本地请求 */ Bridge.prototype.getScript=function(url,callback){ objBridge.get(url,undefined,callback,"script"); } /** * 1.跨域请求一定要添加参数cross:true, * 2.本地请求可不写cross或cross:false * opt,正常的$.ajax()参数但是跨域的话多一个cross:true */ Bridge.prototype.ajax=function(opt){ var success; if(typeof opt==="string"){//讲参数转换成对象型参数 opt={ type:"get", url:opt } } //session过滤 if(objBridge.session.checkSession){ if(typeof opt.success=="undefined"){ opt.success=sessionFilter; } else{ success=opt.success; opt.success=function(data,xhr,jqXHR){ if(sessionFilter(data,xhr,jqXHR)!=undefined){ success(data,xhr,jqXHR); } } } } opt.url=getAjaxUrl(getAjaxHttpType(opt.cross),opt.url); $.ajax(opt); }; /*** 当填写参数h后,解析你给的参数,如果为空自动从获取浏览器的地址* 测试路径:>>>http://127.0.0.1:8020/url/index.html?id=1.2&gys=7777777777777777777777777&name=思思博士#api/126* name是需要获取的值,* h是指定href还是要自动获取.*/ Bridge.prototype.urlResolve=function(name,h){ if(!name){ console.error("urlResolve缺乏name参数"); return ""; } var href=h?h:window.location.href; var condition;//条件 if(name.indexOf(":")>-1){ condition=name.split(":"); name=condition[0]; condition=condition[1]; } var search=function(){ return window.location.search } var searchNoP=function(){ return search().substr(1); } var getPageNameAndExtName=function(){//获取页面名称和扩展名称 var arr=href.split("?")[0].split("/"); var len=arr.length; return arr[len-1]; }; /** * 填写了key获取指定的参数 * 没填写key参数获取所有的参数,以json格式返回 */ var getParam=function(key){//获取参数 var query=searchNoP(); if(!query){ return null; } var params={}; var paramArr=query.split("&"); var len=paramArr.length; var params={}; var itemParam=[]; for(var i=0;i<len;i++){ itemParam=paramArr[i].split("="); params[itemParam[0]]=itemParam[1]; } if(key){ return params[key]?params[key]:""; }else{ return params; } } if(name==="href"){//获取路径 return href; }else if(name==="search"){// 查询(参数)部分 带问号的 return search(); }else if(name==="searchNo?"){ return searchNoP(); }else if(name==="pathname"){//页面路径 url/index.html return window.location.pathname }else if(name==="port"){//URL 的端口部分 8080 return window.location.port; }else if(name==="protocol"){//URL 的协议部分返回值 http: return window.location.protocol }else if(name==="host"){//url主机部分返回值 127.0.0.1:8020 return window.location.host; }else if(name==="hash"){//锚点后面的值 #api/126 return window.location.hash; }else if(name==="hashNo#"){//不带#号的锚点的值 api/126 return window.location.hash.substr("1"); }else if(name==="pageName"){//获取页面名称 return getPageNameAndExtName().split(".")[0]; }else if(name==="extName"){//获取扩展名 return getPageNameAndExtName().split(".")[1]; }else if(name==="param"){//获取参数 return getParam(condition?condition:""); }else{ console.error("urlResolve未匹配到你要获取的参数"); return ""; } }; window.bg=new Bridge();})(jQuery);bg.init({ root:"xm",//项目名称 view:"",//视图 cross:true,//跨域 hostName:"http://192.168.1.206:8080",//主机 checkSession:false, noSession:function(data){ console.log("session失效,跳转页面"); }, requestFilter:[],//暂不实现 responseFilter:[{//暂不实现 condition:"status=1&flag=1", action:function(data){ console.log("输出请求符合验证1,停止后续继续执行..."); } },{ condition:"status=2|flag=2", action:function(){ console.log("输出请求符合验证2,停止后续继续执行..."); } }]});/*****************************************************************************
原标题:前后台彻底分离的核心文件.
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。