【前端】重构http的请求封装，将登陆和首页调用新的http工具类

src/main/webapp/assets/common/js/common.js

@@ -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";
             }
-
         }
     });
 

src/main/webapp/assets/expand/module/HttpRequest/HttpRequest.js

@@ -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);
+});

src/main/webapp/assets/expand/module/ax/ax.js

@@ -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);
-});

src/main/webapp/pages/index.html

@@ -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 HttpRequest = layui.HttpRequest;
-
-        //获取支持的语言列表
-        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();
 
         // 默认加载主页
         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>

src/main/webapp/pages/login.html

@@ -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,13 +171,6 @@
             <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>
@@ -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());
+            request.set("account", $("#username").val());
-            ajax.set("password", $("#password").val());
+            request.set("password", $("#password").val());
-            @if(constants.getTenantOpen()){
+            request.start(true);
-                ajax.set("tenantCode", $("#tenantCode").val());
-            @}
-            @if(constants.getCaptchaOpen()){
-                ajax.set("kaptcha", $("#kaptcha").val());
-            @}
-            ajax.start();
         });
 
     });