mirror of https://gitee.com/stylefeng/guns
【前端】重构http的请求封装，将登陆和首页调用新的http工具类
fengshuonan
parent
26e761a710
commit
bc09b61a36
|
|
@ -120,7 +120,7 @@ layui.config({
|
|||
selectPlus: '../../expand/module/selectPlus/selectPlus',
|
||||
iconPicker: '../../expand/module/iconPicker/iconPicker',
|
||||
ztree: '../../expand/module/ztree/ztree-object',
|
||||
ax: '../../expand/module/ax/ax',
|
||||
HttpRequest: '../../expand/module/HttpRequest/HttpRequest',
|
||||
func: '../../expand/module/func/func'
|
||||
}).use(['layer', 'admin'], function () {
|
||||
var $ = layui.jquery;
|
||||
|
|
@ -136,12 +136,10 @@ layui.config({
|
|||
$.ajaxSetup({
|
||||
contentType: "application/x-www-form-urlencoded;charset=utf-8",
|
||||
complete: function (XMLHttpRequest, textStatus) {
|
||||
|
||||
//如果超时就处理 ，指定要跳转的页面
|
||||
if (XMLHttpRequest.getResponseHeader("Guns-Session-Timeout") === "true") {
|
||||
window.location = Feng.ctxPath + "/global/sessionError";
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,153 @@
|
|||
/**
|
||||
* http请求对ajax封装，减少一些重复业务逻辑的编写
|
||||
* @author fengshuonan
|
||||
*/
|
||||
layui.define(['jquery'], function (exports) {
|
||||
var $ = layui.$;
|
||||
|
||||
/**
|
||||
* 创建一个ajax的请求类
|
||||
*
|
||||
* @param url 请求后端的url
|
||||
* @param method http请求方法，写get或者post
|
||||
* @param successCallback 请求成功的回调函数
|
||||
* @param errorCallback 请求失败的回调函数，后端返回http状态码500
|
||||
*
|
||||
* 使用方法：
|
||||
*
|
||||
* var request = new HttpRequest('/user/list', 'get', function(data){
|
||||
* // ...
|
||||
* }, function(){
|
||||
* // ...
|
||||
* });
|
||||
* request.start();
|
||||
*/
|
||||
var HttpRequest = function (url, method, successCallback, errorCallback) {
|
||||
|
||||
// 请求的url，一般传参时候需要带上contextPath
|
||||
this.url = url;
|
||||
|
||||
// http请求的方法，默认不传为post，一般传 'get' 或 'post'
|
||||
if (method === "" || method == null) {
|
||||
this.method = "post";
|
||||
} else {
|
||||
this.method = method;
|
||||
}
|
||||
|
||||
// 请求成功的回调
|
||||
this.successCallback = successCallback;
|
||||
|
||||
// 请求失败的回调
|
||||
this.errorCallback = errorCallback;
|
||||
|
||||
// 请求的数据
|
||||
this.dataObject = {};
|
||||
|
||||
// 请求的content-type，默认 "application/json"
|
||||
this.contentType = "application/json";
|
||||
|
||||
// 预期服务器返回的数据类型，默认都为 json
|
||||
this.dataType = "json";
|
||||
|
||||
// 默认请求都是同步，不开启异步
|
||||
this.async = false;
|
||||
};
|
||||
|
||||
HttpRequest.prototype = {
|
||||
|
||||
/**
|
||||
* 执行http请求
|
||||
*
|
||||
* @param parseJsonFlag 是否在请求时，参数转化为json，如果传 true 就是
|
||||
*/
|
||||
start: function (parseJsonFlag) {
|
||||
var me = this;
|
||||
var result = "";
|
||||
|
||||
// 如果请求需要转化为json则将data转为json
|
||||
if (parseJsonFlag === true) {
|
||||
me.dataObject = JSON.stringify(me.dataObject);
|
||||
}
|
||||
|
||||
// 防止http请求缓存
|
||||
if (this.url.indexOf("?") === -1) {
|
||||
this.url = this.url + "?jstime=" + new Date().getTime();
|
||||
} else {
|
||||
this.url = this.url + "&jstime=" + new Date().getTime();
|
||||
}
|
||||
|
||||
// 初始化ajax
|
||||
$.ajax({
|
||||
type: me.method,
|
||||
url: me.url,
|
||||
contentType: me.contentType,
|
||||
dataType: me.dataType,
|
||||
async: me.async,
|
||||
data: me.dataObject,
|
||||
beforeSend: function (data) {
|
||||
},
|
||||
success: function (data) {
|
||||
result = data;
|
||||
if (me.successCallback !== undefined) {
|
||||
me.successCallback(data);
|
||||
}
|
||||
},
|
||||
error: function (xhr) {
|
||||
if (me.errorCallback !== undefined) {
|
||||
me.errorCallback(xhr.responseJSON);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置 key-value 形式的参数
|
||||
*
|
||||
* 此参数组装的是param方式传参的参数，如需传递json请用 setJsonData(data)
|
||||
*
|
||||
* @param key 参数的key
|
||||
* @param value 参数值
|
||||
*/
|
||||
set: function (key, value) {
|
||||
this.dataObject[key] = (typeof value === "undefined") ? $("#" + key).val() : value;
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* 清空传递参数
|
||||
*/
|
||||
clear: function () {
|
||||
this.dataObject = {};
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置请求的content-type
|
||||
*/
|
||||
setContentType: function (contentType) {
|
||||
this.contentType = contentType;
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置预期服务器返回的数据类型，默认都为 json
|
||||
*/
|
||||
setDataType: function (dataType) {
|
||||
this.dataType = dataType;
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置请求同步还是异步，true-异步，false-同步
|
||||
*/
|
||||
setAsync: function (async) {
|
||||
this.async = async;
|
||||
return this;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
exports('HttpRequest', HttpRequest);
|
||||
});
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
layui.define(['jquery'], function (exports) {
|
||||
var $ = layui.$;
|
||||
|
||||
var $ax = function (url, success, error) {
|
||||
this.url = url;
|
||||
this.type = "post";
|
||||
this.data = {};
|
||||
this.contentType = "application/json";
|
||||
this.dataType = "json";
|
||||
this.async = false;
|
||||
this.success = success;
|
||||
this.error = error;
|
||||
};
|
||||
|
||||
$ax.prototype = {
|
||||
start: function () {
|
||||
var me = this;
|
||||
var result = "";
|
||||
|
||||
if (this.url.indexOf("?") === -1) {
|
||||
this.url = this.url + "?jstime=" + new Date().getTime();
|
||||
} else {
|
||||
this.url = this.url + "&jstime=" + new Date().getTime();
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: me.type,
|
||||
url: me.url,
|
||||
contentType: me.contentType,
|
||||
dataType: me.dataType,
|
||||
async: me.async,
|
||||
data: JSON.stringify(me.data),
|
||||
beforeSend: function (data) {
|
||||
|
||||
},
|
||||
success: function (data) {
|
||||
result = data;
|
||||
if (me.success !== undefined) {
|
||||
me.success(data);
|
||||
}
|
||||
},
|
||||
error: function (data) {
|
||||
if (me.error !== undefined) {
|
||||
me.error(data);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
set: function (key, value) {
|
||||
if (typeof key === "object") {
|
||||
for (var i in key) {
|
||||
if (typeof i === "function")
|
||||
continue;
|
||||
this.data[i] = key[i];
|
||||
}
|
||||
} else {
|
||||
this.data[key] = (typeof value === "undefined") ? $("#" + key).val() : value;
|
||||
}
|
||||
return this;
|
||||
},
|
||||
|
||||
setData: function (data) {
|
||||
this.data = data;
|
||||
return this;
|
||||
},
|
||||
|
||||
clear: function () {
|
||||
this.data = {};
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
exports('ax', $ax);
|
||||
});
|
||||
|
|
@ -43,48 +43,12 @@
|
|||
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
|
||||
|
||||
<script>
|
||||
layui.use(['layer', 'element', 'admin', 'index', 'ax'], function () {
|
||||
layui.use(['layer', 'element', 'admin', 'index', 'HttpRequest'], function () {
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
var admin = layui.admin;
|
||||
var index = layui.index;
|
||||
var $ax = layui.ax;
|
||||
|
||||
//获取支持的语言列表
|
||||
var ajax = new $ax(Feng.ctxPath + "/translation/languages", function (data) {
|
||||
for (var i = 0; i < data.data.length; i++) {
|
||||
var code = data.data[i].code;
|
||||
var description = data.data[i].description;
|
||||
$("#languageDiv").append('<dd lay-unselect><a id="tran-' + code + '" href="javascript:;">' + description + '</a></dd>');
|
||||
|
||||
//设置监听事件，设置点击按钮切换当前系统语言
|
||||
(function (code) {
|
||||
$('#tran-' + code).click(function () {
|
||||
var ajax = new $ax(Feng.ctxPath + "/translation/changeUserTranslation", function (data) {
|
||||
window.location.href = Feng.ctxPath + "/";
|
||||
}, function (data) {
|
||||
layer.msg("切换多语言失败！" + data.responseJSON.message, {icon: 5, anim: 6});
|
||||
});
|
||||
ajax.set("code", code);
|
||||
ajax.start();
|
||||
});
|
||||
})(code);
|
||||
}
|
||||
}, function (data) {
|
||||
layer.msg("获取语言列表失败！" + data.responseJSON.message, {icon: 5, anim: 6});
|
||||
});
|
||||
ajax.start();
|
||||
|
||||
// 加载当前语言字典并缓存
|
||||
var getUserTranslationAjax = new $ax(Feng.ctxPath + "/translation/getUserTranslation", function (data) {
|
||||
layui.data('system', {
|
||||
key: "lang",
|
||||
value: data.data
|
||||
});
|
||||
}, function (data) {
|
||||
layer.msg("加载语言字典失败！" + data.responseJSON.message, {icon: 5, anim: 6});
|
||||
});
|
||||
getUserTranslationAjax.start();
|
||||
var HttpRequest = layui.HttpRequest;
|
||||
|
||||
// 默认加载主页
|
||||
index.loadHome({
|
||||
|
|
@ -94,7 +58,6 @@
|
|||
|
||||
// 修改密码点击事件
|
||||
$('#setPsw').click(function () {
|
||||
|
||||
admin.open({
|
||||
id: 'pswForm',
|
||||
type: 2,
|
||||
|
|
@ -106,13 +69,13 @@
|
|||
|
||||
// 退出登录点击事件
|
||||
$('#btnLogout').click(function () {
|
||||
var ajax = new $ax(Feng.ctxPath + "/logout", function (data) {
|
||||
var request = new HttpRequest(Feng.ctxPath + "/logout", 'post', function (data) {
|
||||
Feng.success("退出成功!");
|
||||
window.location.href = Feng.ctxPath + "/";
|
||||
}, function (data) {
|
||||
layer.msg("退出失败！" + data.responseJSON.message, {icon: 5, anim: 6});
|
||||
layer.msg("退出失败！" + data.message, {icon: 5, anim: 6});
|
||||
});
|
||||
ajax.start();
|
||||
request.start();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -163,14 +163,6 @@
|
|||
<div class="login-wrapper layui-anim layui-anim-scale layui-hide">
|
||||
<div class="layui-form">
|
||||
<h2>用户登录</h2>
|
||||
@if(constants.getTenantOpen()){
|
||||
<div class="layui-form-item layui-input-icon-group">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
<select name="tenantCode" id="tenantCode">
|
||||
<option value="">默认租户</option>
|
||||
</select>
|
||||
</div>
|
||||
@}
|
||||
<div class="layui-form-item layui-input-icon-group">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
<input class="layui-input" id="username" name="username" placeholder="请输入登录账号" value="admin" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
|
||||
|
|
@ -179,20 +171,13 @@
|
|||
<i class="layui-icon layui-icon-password"></i>
|
||||
<input class="layui-input" id="password" name="password" placeholder="请输入登录密码" value="111111" type="password" lay-verType="tips" lay-verify="required" required/>
|
||||
</div>
|
||||
@if(constants.getCaptchaOpen()){
|
||||
<div class="layui-form-item layui-input-icon-group login-captcha-group">
|
||||
<i class="layui-icon layui-icon-auz"></i>
|
||||
<input class="layui-input" id="kaptcha" placeholder="请输入验证码" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
|
||||
<img class="login-captcha" src="${ctxPath}/kaptcha" alt=""/>
|
||||
</div>
|
||||
@}
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn layui-btn-fluid" id="submit">登录</button>
|
||||
</div>
|
||||
<div class="layui-form-item login-oauth-group text-center">
|
||||
<a href="${ctxPath}/oauth/render/qq"><i class="layui-icon layui-icon-login-qq" style="color:#3492ed;"></i></a> 
|
||||
<a href="${ctxPath}/oauth/render/gitee">
|
||||
<img class="layui-icon" style="height: 28px;width: 28px; margin-top: -12px !important;" src="${ctxPath}/assets/expand/images/git.png" />
|
||||
<img class="layui-icon" style="height: 28px;width: 28px; margin-top: -12px !important;" src="${ctxPath}/assets/expand/images/git.png"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -211,57 +196,34 @@
|
|||
<script type="text/javascript" src="${ctxPath}/assets/common/libs/layui/layui.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=${constants.getReleaseVersion()}"></script>
|
||||
<script>
|
||||
layui.use(['layer', 'form', 'index', 'ax'], function () {
|
||||
layui.use(['layer', 'form', 'index', 'HttpRequest'], function () {
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
var form = layui.form;
|
||||
var $ax = layui.ax;
|
||||
var HttpRequest = layui.HttpRequest;
|
||||
var index = layui.index;
|
||||
|
||||
$('.login-wrapper').removeClass('layui-hide');
|
||||
|
||||
/* 图形验证码 */
|
||||
$('img.login-captcha').click(function () {
|
||||
this.src = this.src + '?t=' + (new Date).getTime();
|
||||
});
|
||||
|
||||
var errorMsg = "${tips!}";
|
||||
if (errorMsg) {
|
||||
layer.msg(errorMsg, {icon: 5, anim: 6});
|
||||
}
|
||||
|
||||
@if(constants.getTenantOpen()){
|
||||
//初始化租户列表
|
||||
var ajax = new $ax(Feng.ctxPath + "/tenantInfo/listTenants", function (data) {
|
||||
for (var i = 0; i < data.data.length; i++) {
|
||||
var name = data.data[i].name;
|
||||
var code = data.data[i].code;
|
||||
$("#tenantCode").append('<option value="' + code + '">' + name + '</option>');
|
||||
}
|
||||
form.render();
|
||||
}, function (data) {
|
||||
});
|
||||
ajax.start();
|
||||
@}
|
||||
|
||||
//登录操作
|
||||
// 登录操作
|
||||
$('#submit').click(function () {
|
||||
var ajax = new $ax(Feng.ctxPath + "/loginAction", function (data) {
|
||||
var request = new HttpRequest(Feng.ctxPath + "/loginAction", 'post', function (data) {
|
||||
Feng.success("登录成功!");
|
||||
// 清除顶部选择应用的缓存
|
||||
index.clearTabCache();
|
||||
// 重定向到首页
|
||||
window.location.href = Feng.ctxPath + "/";
|
||||
}, function (data) {
|
||||
layer.msg("登录失败！" + data.responseJSON.message, {icon: 5, anim: 6});
|
||||
Feng.error("登录失败!" + data.message);
|
||||
});
|
||||
ajax.set("account", $("#username").val());
|
||||
ajax.set("password", $("#password").val());
|
||||
@if(constants.getTenantOpen()){
|
||||
ajax.set("tenantCode", $("#tenantCode").val());
|
||||
@}
|
||||
@if(constants.getCaptchaOpen()){
|
||||
ajax.set("kaptcha", $("#kaptcha").val());
|
||||
@}
|
||||
ajax.start();
|
||||
request.set("account", $("#username").val());
|
||||
request.set("password", $("#password").val());
|
||||
request.start(true);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue