完善工具类

lib/layui_plugins/okLayer/okLayer.js

@@ -1,8 +1,15 @@
 layui.define(["layer"], function (exports) {
     var $ = layui.jquery;
     var okLayer = {
-        skinStyle: 2,
+        // 控制了msg() confirm() open()方法的弹窗皮肤
+        skinStyle: 3,
+        // 控制了msg() confirm() open()方法的弹窗动画
         animStyle: 2,
+        /**
+         * 主要用于针对表格批量操作操作之前的检查
+         * @param table
+         * @returns {string}
+         */
         tableCheck: function (table) {
             var checkStatus = table.checkStatus("tableId");
             var rows = checkStatus.data.length;
@@ -16,15 +23,33 @@ layui.define(["layer"], function (exports) {
                 layer.msg("未选择有效数据", {offset: "t", anim: 6});
             }
         },
-        tableOperationMsg: function (content) {
+        /**
+         * 在表格页面操作成功后弹窗提示
+         * @param content
+         */
+        tableOperationSuccessMsg: function (content) {
             layer.msg(content, {icon: 1, time: 1000}, function () {
+                // 刷新当前table数据
                 $(".layui-laypage-btn")[0].click();
             });
         },
+        /**
+         * confirm()函数二次封装
+         * @param content
+         * @param yesFunction
+         */
         confirm: function (content, yesFunction) {
             var options = {skin: okLayer.skinChoose(), icon: 2, title: "提示", anim: okLayer.animChoose()};
             layer.confirm(content, options, yesFunction);
         },
+        /**
+         * open()函数二次封装,支持在table页面和普通页面打开
+         * @param title
+         * @param content
+         * @param width
+         * @param height
+         * @param isRefreshTable
+         */
         open: function (title, content, width, height, isRefreshTable) {
             layer.open({
                 title: title,
@@ -38,23 +63,83 @@ layui.define(["layer"], function (exports) {
                 zIndex: layer.zIndex,
                 skin: okLayer.skinChoose(),
                 end: function () {
-					if (isRefreshTable) {
+                    if (isRefreshTable) {
-						$(".layui-laypage-btn")[0].click();
+                        $(".layui-laypage-btn")[0].click();
-					}
+                    }
                 }
             });
         },
-        skinChoose: function () {
+        /**
-            if (okLayer.skinStyle == 1) {
+         * msg()函数二次封装
-                return "layui-layer-lan";
+         */
-            } else if (okLayer.skinStyle == 2) {
+        msg: {
-                return "layui-layer-molv";
+            // msg弹窗默认消失时间
+            time: 1000,
+            // 绿色勾
+            greenTick: function (content, time, callbackFunction) {
+                var options = {icon: 1, time: okLayer.msg.timeCompute(time), anim: okLayer.animChoose()};
+                layer.msg(content, options, callbackFunction);
+            },
+            // 红色叉
+            redCross: function (content, callbackFunction) {
+                var options = {icon: 2, time: okLayer.msg.timeCompute(time), anim: okLayer.animChoose()};
+                layer.msg(content, options, callbackFunction);
+            },
+            // 黄色问号
+            yellowQuestion: function (content, callbackFunction) {
+                var options = {icon: 3, time: okLayer.msg.timeCompute(time), anim: okLayer.animChoose()};
+                layer.msg(content, options, callbackFunction);
+            },
+            // 灰色锁
+            grayLock: function (content, callbackFunction) {
+                var options = {icon: 4, time: okLayer.msg.timeCompute(time), anim: okLayer.animChoose()};
+                layer.msg(content, options, callbackFunction);
+            },
+            // 红色哭脸
+            redCry: function (content, callbackFunction) {
+                var options = {icon: 5, time: okLayer.msg.timeCompute(time), anim: okLayer.animChoose()};
+                layer.msg(content, options, callbackFunction);
+            },
+            // 绿色笑脸
+            greenLaugh: function (content, callbackFunction) {
+                var options = {icon: 6, time: okLayer.msg.timeCompute(time), anim: okLayer.animChoose()};
+                layer.msg(content, options, callbackFunction);
+            },
+            // 黄色感叹号
+            yellowSigh: function (content, callbackFunction) {
+                var options = {icon: 7, time: okLayer.msg.timeCompute(time), anim: okLayer.animChoose()};
+                layer.msg(content, options, callbackFunction);
+            },
+            timeCompute: function (time) {
+                return time ? time : okLayer.msg.time;
             }
         },
+        /**
+         * 皮肤选择
+         * @returns {string}
+         */
+        skinChoose: function () {
+            if (okLayer.skinStyle == 1) {
+                // 默认皮肤
+                return "";
+            } else if (okLayer.skinStyle == 2) {
+                // 墨绿色
+                return "layui-layer-molv";
+            } else if (okLayer.skinStyle == 3) {
+                // 蓝色
+                return "layui-layer-lan";
+            }
+        },
+        /**
+         * 动画选择
+         * @returns {number}
+         */
         animChoose: function () {
             if (okLayer.animStyle == 1) {
+                // 默认动画
                 return 0;
             } else if (okLayer.animStyle == 2) {
+                // 随机动画
                 return Math.floor(Math.random() * 7);
             }
         }

lib/layui_plugins/okUtils/okUtils.js

@@ -1,8 +1,15 @@
 layui.define("layer", function (exports) {
     var $ = layui.jquery;
     var okUtils = {
-		isFrontendBackendSeparate: true,
+        isFrontendBackendSeparate: true,
         baseUrl: "http://localhost:8080",
+        /**
+         * ajax()函数二次封装
+         * @param url
+         * @param type
+         * @param param
+         * @returns {*|*|*}
+         */
         ajax: function (url, type, param) {
             var deferred = $.Deferred();
             var loadIndex;
@@ -19,7 +26,7 @@ layui.define("layer", function (exports) {
                         // 业务正常
                         deferred.resolve(data.data)
                     } else {
-                        // 业务错误
+                        // 业务异常
                         layer.msg(data.msg, {icon: 7, time: 2000});
                         deferred.reject("okUtils.ajax warn: " + data.msg);
                     }

pages/user/login.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <meta name="keywords" content="ok-admin v1.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
     <meta name="description" content="ok-admin v1.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
-    <link rel="shortcut icon" href="imgs/favicon.ico"/>
+    <link rel="shortcut icon" href="../../imgs/favicon.ico"/>
     <link rel="stylesheet" href="../../css/okadmin.css"/>
     <link rel="stylesheet" href="../../lib/animate/animate.css"/>
     <link rel="stylesheet" href="../../lib/nprogress/nprogress.css">
@@ -41,6 +41,12 @@
 <script src="../../lib/layui/layui.js"></script>
 <script src="../../lib/nprogress/nprogress.js"></script>
 <script type="text/javascript">
+    // 进度条
+    // NProgress.start();
+    // window.onload = function () {
+    //     NProgress.done();
+    // }
+
     layui.config({
         base: "../../lib/layui_plugins/"
     }).extend({
@@ -49,14 +55,8 @@
     }).use(["form", "okLayer", "okUtils"], function () {
         var form = layui.form;
         var $ = layui.jquery;
-		var okLayer = layui.okLayer;
+        var okLayer = layui.okLayer;
-		var okUtils = layui.okUtils;
+        var okUtils = layui.okUtils;
-
-        // 进度条
-//         NProgress.start();
-//         window.onload = function () {
-//             NProgress.done();
-//         }
 
         // 修改copyright结束时间
         var data = new Date();
@@ -65,14 +65,14 @@
 
         // 登陆逻辑
         form.on('submit(login)', function (data) {
-			 okUtils.ajax("/login", "post", data.field).done(function (response) {
+            okUtils.ajax("/login", "post", data.field).done(function (response) {
-			    console.log(response)
+                console.log(response)
-				layer.msg("登陆成功", {icon: 6, time: 1000, anim: 4}, function () {
+                okLayer.msg.greenTick("登陆成功", function () {
-					window.location = "../../index.html";
+                    window.location = "../../index.html";
-				});
+                })
-			}).fail(function (error) {
+            }).fail(function (error) {
-			    console.log(error)
+                console.log(error)
-			}); 
+            });
             return false;
         });
 

pages/user/user.html

@@ -130,7 +130,7 @@
                 if (idsStr) {
                     okUtils.ajax("/user/batchNormal", "post", {idsStr: idsStr}).done(function (response) {
                         console.log(response)
-                        okLayer.tableOperationMsg("批量启用成功");
+                        okLayer.tableOperationSuccessMsg("批量启用成功");
                     }).fail(function (error) {
                         console.log(error)
                     });
@@ -145,7 +145,7 @@
                 if (idsStr) {
                     okUtils.ajax("/user/batchStop", "post", {idsStr: idsStr}).done(function (response) {
                         console.log(response)
-                        okLayer.tableOperationMsg("批量停用成功");
+                        okLayer.tableOperationSuccessMsg("批量停用成功");
                     }).fail(function (error) {
                         console.log(error)
                     });
@@ -160,7 +160,7 @@
                 if (idsStr) {
                     okUtils.ajax("/user/batchDel", "post", {idsStr: idsStr}).done(function (response) {
                         console.log(response)
-                        okLayer.tableOperationMsg("批量删除成功");
+                        okLayer.tableOperationSuccessMsg("批量删除成功");
                     }).fail(function (error) {
                         console.log(error)
                     });