Springboot之登录模块探索（含Token，验证码，网络安全等知识）(5)

1/** 2 * 访问后台的对象，为ajax封装 3 * @param url 后台资源路径 4 * @param param Map参数 5 * @param contentType 传输类型 6 * @param success 成功回调函数 7 * @param error 失败回调函数 8 * @param requestType 请求类型（get.post,put,delete） 9 * @constructor 10*/ 11var Query = function (url, param, contentType, successFunc, errorFunc, requestType) { 12this.url = url; 13 14//先确认参数存在 15if (param) { 16//如果是get请求类型，则将参数拼接到url后面 17if (requestType == Query.GET_TYPE) { 18this.param = this._concatParamToURL(param, url); 19 } else { 20//其他请求类型，要根据不同的传输格式来确定传输的值的类型 21if (contentType == Query.NOMAL_TYPE) { 22this.param = JSON.parse(this._convertParamToJson(param)); 23 } else { 24this.param = this._convertParamToJson(param); 25 } 26 } 27 } else { 28this.param = null; 29 } 30 31 32this.contentType = contentType; 33this.successFunc = successFunc; 34this.errorFunc = errorFunc; 35//请求超时，默认10秒 36this.timeout = 10000; 37//是否异步请求，默认异步 38this.async = true; 39this.requestType = requestType; 40} 41 42 Query.JSON_TYPE = "application/json"; 43 Query.NOMAL_TYPE = "application/x-www-form-urlencoded"; 44 45/** 46 * ajax请求的访问 47 * 默认是post 48 * @param url 要访问的地址 49 * @param paramMap 传给后台的Map参数，key为字符串类型 50 * @param callback 回调函数 51 * @param contentType 传输数据的格式 默认传输application/x-www-form-urlencoded格式 52*/ 53 Query.create = function (url, paramMap, successFunc, errorFunc) { 54returnnew Query(url, paramMap, Query.NOMAL_TYPE, successFunc, errorFunc, Query.GET_TYPE); 55} 56 57//-----------------------以下为RESTFul方法--------------------------- 58//ajax请求类型 59 Query.GET_TYPE = "get"; 60 Query.POST_TYPE = "post"; 61 Query.PUT_TYPE = "put"; 62 Query.DELETE_TYPE = "delete"; 63 64//get方法默认是Query.NOMAL_TYPE 65 Query.createGetType = function (url, paramMap, successFunc, errorFunc) { 66returnnew Query(url, paramMap, Query.NOMAL_TYPE, successFunc, errorFunc, Query.GET_TYPE); 67} 68 Query.createPostType = function (url, paramMap, successFunc, errorFunc) { 69returnnew Query(url, paramMap, Query.JSON_TYPE, successFunc, errorFunc, Query.POST_TYPE); 70} 71 Query.createPutType = function (url, paramMap, successFunc, errorFunc) { 72returnnew Query(url, paramMap, Query.JSON_TYPE, successFunc, errorFunc, Query.PUT_TYPE); 73} 74 Query.createDeleteType = function (url, paramMap, successFunc, errorFunc) { 75returnnew Query(url, paramMap, Query.JSON_TYPE, successFunc, errorFunc, Query.DELETE_TYPE); 76} 77 78/** 79 * 将paramMap参数转为json格式 80 * @param paramMap 81 * @private 82*/ 83 Query.prototype._convertParamToJson = function (paramMap) { 84 85return window.tool.strMap2Json(paramMap); 86 87} 88 89/** 90 * 将参数拼接至URL尾部 91 * @param paramMap 92 * @param url 93 * @private 94*/ 95 Query.prototype._concatParamToURL = function (paramMap, url) { 96 let size = paramMap.size; 97 98if (size > 0) { 99 let count = 0;100 url = url "?";101 let urlParam = "";102103for (let [k, v] of paramMap) {104 urlParam = urlParam encodeURIComponent(k) "=" encodeURIComponent(v);105if (count < size-1) {106 urlParam = urlParam " && ";107 count ;108 }109 }110 url = url urlParam;111 }112return url;113}114115//ajax需要跳转的界面116 Query.REDIRECT_URL = "REDIRECT_URL";117118/**119 * ajax成功返回时调用的方法120 * 会根据ajax的ContentType类型，转换Response对象的data给回调的成功函数121 * 如application/json格式类型，data会转成json类型传递122 * @param queryResult 返回的值，通常为后台的Response对象123 * @private124*/125 Query.prototype._successFunc = function (queryResult) {126var data = this.__afterSuccessComplete(queryResult);127if (this.successFunc) {128this.successFunc(data);129 }130131//如果有需要跳转的页面，则自动跳转132if (data && data.REDIRECT_URL != null) {133 window.location = data.REDIRECT_URL;134 }135}136137/**138 * 会根据ajax的ContentType类型，转换Response对象的data给回调的失败函数139 * 如application/json格式类型，data会转成json类型传递140 * 如果对获得的参数不满意，可以用this.getMsg或this.getJsonMsg来进行获取（this指Query对象）141 *142 * 这里错误分3种143 * 1.是Web容器出错144 * 2.是Filter过滤器主动报错（如一些校验失败后主动抛出，会有错误提示）145 * 3.是Spring抛出，Spring异常会全局捕捉进行封装146 * @param queryResult 返回的值，通常为后台的Response对象147 * @private148*/149 Query.prototype._errorFunc = function (queryResult) {150151//返回的信息152var data = this.__afterErrorComplete(queryResult);153//如果data里面没东西154if (!data) {155 data = queryResult.statusText;156 }157158//是否调用者自身已解决了错误159var handleError = false;160161//调用回调函数，如果返回结果为true，则不会默认错误处理162if (this.errorFunc instanceof Function) {163 handleError = this.errorFunc(data);164 }165166//错误编号167var code;168//错误信息169var msg;170171//没有取消对错误的后续处理，那么进行跳转172if (!handleError) {173174//如果data成功转为Json对象175if (data) {176//Filter过滤器主动报错（如一些校验失败后主动抛出，会有错误提示）177if (data.status) {178 code = data.status;179 }180if (data.message) {181 msg = data.message;182 }183 }184185//最终跳转至错误页面186var path = "/system/error";187if (code && msg) {188 path = path "/" error.code "/" error.msg;189 }190 window.location.href = path;191 }192}193194 Query.SUCCESS_TYPE = "SUCCESS_TYPE";195 Query.ERROR_TYPE = "ERROR_TYPE";196/**197 * 当一个请求完成时，无论成功或失败，都要调用此函数做一些处理198 * @param queryResult 服务端返回的数据199 * @returns {*}200 * @private201*/202 Query.prototype._afterComplete = function (queryResult) {203this._cancleLoadDom();204}205206/**207 * 成功的返回处理，会将data部分转为对象208 * 默认application/json会进行单引号转双引号209 * @param queryResult 服务端返回的数据210 * @param queryResult211 * @returns {*}212 * @private213*/214 Query.prototype.__afterSuccessComplete = function (queryResult) {215this._afterComplete();216this.response = queryResult;217218var data = queryResult.data;219//data必须要有内容，且不是对象才有转换的意义220if (data && !(data instanceof Object)) {221 data = this.getJsonMsg();222 }223return data;224}225226/**227 * 失败的返回处理228 * 最终会根据ajax的contentType来进行data相应类型转换229 * 默认application/json会进行单引号转双引号230 * @param queryResult 服务端返回的数据231 * @private232*/233 Query.prototype.__afterErrorComplete = function (queryResult) {234this._afterComplete();235this.response = queryResult;236var data = queryResult.responseJSON;237if (!data) {238 data = queryResult.responseText;239 }240241return data;242}243244/**245 * 取消请求时的等待框246 * @private247*/248 Query.prototype._cancleLoadDom = function () {249//取消加载框250if (this.loadDom) {251 $(this.loadDom).remove("#loadingDiv");252 }253}254255/**256 * 正式发送ajax257 * @private258*/259 Query.prototype.sendMessage = function () {260var self = this;261var xhr = $.ajax(262 {263 url: this.url,264 type: this.requestType,265 contentType: this.contentType,266 data: this.param,267// ajax发送前调用的方法，初始化等待动画268// @param XHR XMLHttpRequest对象269 beforeSend: function (XHR) {270//试图从Cookie中获得token放入http头部271var token = window.tool.getCookieMap().get(window.commonStaticValue.TOKEN);272if(token){273 XHR.setRequestHeader(window.commonStaticValue.TOKEN,token);274 }275276//绑定本次请求的queryObj277 XHR.queryObj = self;278if (self.beforeSendFunc instanceof Function) {279 self.beforeSendFunc(XHR);280 }281282if (self.loadDom instanceof HTMLElement) {283 self.loadDom.innerText = "";284 $(self.loadDom).append("<div id="loadingDiv" class="loading"><img src="/image/loading.gif"/></div>");285 } elseif (self.loadDom instanceof jQuery) {286 self.loadDom.empty();287 self.loadDom.append("<div id="loadingDiv" class="loading"><img src="/image/loading.gif"/></div>");288 }289 },290//将QueryObj设置为上下文291 context: self,292 success: this._successFunc,293 error: this._errorFunc,294 complete:function(){295 console.log("ajax完成");296 },297 timeout: this.timeout,298 async: this.async299 }300 );301}302303//-----------------------------------下面提供了获取后台返回信息方法（帮忙封装了）304/**305 * 获取返回信息Response的Meta头306*/307 Query.prototype.getMeta = function () {308returnthis.response.meta;309}310311/**312 * 获得返回值里的data部分313 * @returns {*}314*/315 Query.prototype.getMsg = function () {316returnthis.response.data;317}318319/**320 * 获得返回值里的data部分，尝试将其转为Json对象321*/322 Query.prototype.getJsonMsg = function () {323var data = this.response.data;324if (data) {325//先将字符串里的&quot;转为双引号326var data = window.tool.replaceAll(data, "&quot;", """);327try{328var jsonData = JSON.parse(data);329return jsonData;330 }catch (e) {331return data;332 }333 }334}335336//------------------------以下为对Query的参数设置---------------------------337/**338 * 在ajax发送前设置参数，可以有加载的动画，并且请求完成后会自动取消339 * @param loadDom 需要显示动画的dom节点340 * @param beforeSendFunc ajax发送前的自定义函数341*/342 Query.prototype.setBeforeSend = function (loadDom, beforeSendFunc) {343this.loadDom = loadDom;344this.beforeSendFunc = beforeSendFunc;345}346347/**348 * 设置超时时间349 * @param timeout350*/351 Query.prototype.setTimeOut = function (timeout) {352this.timeout = timeout;353}354355 Query.prototype.setAsync = function (async) {356this.async = async;357 }