天天看點
傳回

QiYuAdmin-使用者增删改查簡述結語

簡述

一家人都生病了一周，病毒性感冒，傳染性急強，我在家待了5天了，我女兒到現在還在咳嗽。

昨天和上司到一個客戶現場聊完之後坐在車上說起了孩子的事，他說他不會在要第二個了，太折騰人了。不過我們上司年紀也大了，孩子也挺大的了。

其實不是身體累而是心累，睡覺都睡不安穩，總想着女兒有沒有把被子給踢掉。不過開心的時候還是挺幸福的。生活就是如此。

這段時間做了如下的事情：

  • 使用者表單樣式
  • 使用者增删改查

使用者表單樣式

效果

QiYuAdmin-使用者增删改查簡述結語

描述

表單驗證的插件用的是BootStrapValidator，具體API和用法百度即可。

/**
     * 使用者增加頁面驗證表單
     */
    var initUserAddBootStrapValidate = function (addAjaxUrl) {
        $addUserForm.bootstrapValidator({
//          trigger: 'blur',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                userCode: {
                    validators: {
                        notEmpty: {
                            message: '員工編碼不能為空'
                        }
                    }
                },
                loginName: {
                    validators: {
                        notEmpty: {
                            message: '登入賬号不能為空'
                        },
                        remote: {//ajax驗證。server result:{"valid",true or false} 向服務發送目前input name值，獲得一個json資料。例表示正确：{"valid",true}
                            url: '/QiYuAdmin/user/uniqueness/loginName',//驗證位址
                            message: '賬号已存在',//提示消息
                            delay :  ,//每輸入一個字元，就發ajax請求，伺服器壓力還是太大，設定秒發送一次ajax（預設輸入一個字元，送出一次，伺服器壓力太大）
                            type: 'POST'//請求方式
                        }
                    }
                },
                userName:{
                    validators: {
                        notEmpty: {
                            message: '員工名稱不能為空'
                        }
                    }
                }
            }
        }).on("success.form.bv",function(e){
            QiYuComponents.qiYuAjaxFormSumbit(addAjaxUrl,addUserFormId,userTableId);
        });
    }

這裡有個規範問題，以上的代碼裡面的驗證賬号是否重複功能的url，QiYuAdmin是項目的Context，這裡是寫死的，有沒有好的辦法？我在網上找到相關的答案，是這樣寫的。

function getContextPath() {
    var pathName = document.location.pathname;
    var index = pathName.substr().indexOf("/");
    var result = pathName.substr(,index+);
    return result;
}

不知道Thymeleaf裡面有沒有更好的解決方案？我找了半天沒有找到Thymeleaf裡面是怎麼處理js檔案裡面的位址的，而是在他的模闆裡面進行内聯，js内聯代碼如下。

<script th:inline="javascript">
    /*<![CDATA[*/
    jQuery(document).ready(function() {
        QiYuUser.initUserAdd(/*[[@{/user}]]*/);
    });
    /*]]>*/
</script>

這樣寫的話我的user.js所有用到ajax位址的都需要弄一個參數，如上代碼所示。

使用者增加

效果

QiYuAdmin-使用者增删改查簡述結語
QiYuAdmin-使用者增删改查簡述結語
QiYuAdmin-使用者增删改查簡述結語

描述

有很多共用的方法，比如說：增加表單、修改表單、删除表單、表格初始化。這些都可以封裝成共用的。下次類似的功能隻需要傳入幾個參數就可以了，很友善的。比如這裡的增加使用者功能。

//初始化使用者增加頁面
        initUserAdd:function (addAjaxUrl) {
            initUserAddBootStrapValidate(addAjaxUrl);//表單驗證
            userAddEventHandler();//按鈕事件綁定
        }
        /**
     * 使用者增加頁面驗證表單
     */
    var initUserAddBootStrapValidate = function (addAjaxUrl) {
        $addUserForm.bootstrapValidator({
//          trigger: 'blur',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                userCode: {
                    validators: {
                        notEmpty: {
                            message: '員工編碼不能為空'
                        }
                    }
                },
                loginName: {
                    validators: {
                        notEmpty: {
                            message: '登入賬号不能為空'
                        },
                        remote: {//ajax驗證。server result:{"valid",true or false} 向服務發送目前input name值，獲得一個json資料。例表示正确：{"valid",true}
                            url: '/QiYuAdmin/user/uniqueness/loginName',//驗證位址
                            message: '賬号已存在',//提示消息
                            delay :  ,//每輸入一個字元，就發ajax請求，伺服器壓力還是太大，設定秒發送一次ajax（預設輸入一個字元，送出一次，伺服器壓力太大）
                            type: 'POST'//請求方式
                        }
                    }
                },
                userName:{
                    validators: {
                        notEmpty: {
                            message: '員工名稱不能為空'
                        }
                    }
                }
            }
        }).on("success.form.bv",function(e){
            QiYuComponents.qiYuAjaxFormSumbit(addAjaxUrl,addUserFormId,userTableId);
        });
    }
         /**
     * 使用者增加頁面事件綁定
     */
    var userAddEventHandler = function () {
        $addUserBtn.on("click",function () {
            $addUserForm.submit();
        });
    }

特别像背景管理系統之類的功能，很多都是表格、表格上面有幾個按鈕：增加、修改、删除等等。類似的功能可以單獨抽出來，抽出共用的方法。非常友善。等做下一個這樣的功能的時候我在說下有多友善了。

使用者修改和删除

效果

QiYuAdmin-使用者增删改查簡述結語
QiYuAdmin-使用者增删改查簡述結語
QiYuAdmin-使用者增删改查簡述結語

描述

修改和增加的功能是類似的。多了一個修改密碼的頁簽。都很簡單。我把user.js子產品的源碼貼下就知道了。

/**
 * 使用者子產品js:包括使用者主界面、使用者增加修改界面
 */
var QiYuUser = function () {
    //使用者首頁面屬性開始
    var userTableId = "userTable";
    var $userTable=$("#userTable");
    var tableAjaxUrl="user/page/list";
    var userTableColum=[{checkbox: true}
                        ,{title: 'id',field: 'id',align: 'center',valign: 'middle',visible:false}
                        ,{title: '登入賬号',field: 'loginName',align: 'center',valign: 'middle'}
                        ,{title: '使用者名稱',field: 'userName',align: 'center',valign: 'middle'}
                        ,{title: '使用者性别',field: 'gender',align: 'center',valign: 'middle',formatter:function (value,row,index) {
                            if(value==){return "男";}else if(value==-){return "女";}else{return "未知";}
                        }}
                        ,{title: '使用者狀态',field: 'isLock',align: 'center',formatter:function (value,row,index) {
            if(value==){return "正常";}else if(value==-){return "鎖定";}else{return "未知";}
        }}];
    var $addUserView=$("#addUserView");
    var $updateUserView=$("#updateUserView");
    var $deleteUsers=$("#deleteUsers");
    //使用者首頁面屬性結束
    //使用者修改頁面屬性開始
    var $updateUserInfo = $("#updateUserInfo");//修改使用者資訊按鈕
    var $resetUserInfo = $("#resetUserInfo");//取消使用者資訊按鈕
    var updateUserFormId="updateUserForm";//個人資訊表單
    var $updateUserForm=$("#updateUserForm");
    var $updateUserBtn = $("#updateUserBtn");

    var updateUserPwdFormId="updateUserPwdForm";
    var $updateUserPwdForm = $("#updateUserPwdForm");//修改密碼表單
    var $updateUserPwdBtn = $("#updateUserPwdBtn");//修改密碼按鈕
    //使用者修改頁面屬性結束

    //使用者增加頁面屬性開始
    var $cancelUserBtn = $("#cancelUserBtn");
    var $addUserBtn = $("#addUserBtn");
    var addUserFormId = "addUserForm";
    var $addUserForm = $("#addUserForm");
    //使用者增加頁面屬性結束
    /**
     * 使用者首頁面初始化使用者表格資料
     */
    var initTable=function () {
        QiYuComponents.initBootStrapTable($userTable,tableAjaxUrl,userTableColum);
    }
    /**
     * 使用者首頁面按鈕綁定事件:增加、修改、删除
     */
    var userMainEventHandler=function () {
        //綁定增加使用者彈出頁面的按鈕事件
        $addUserView.on("click",function () {
            QiYuComponents.layerOpen("添加賬戶",'1000px','650px',"user/add/view");
        });
        //綁定修改使用者彈出頁面的按鈕事件
        $updateUserView.on("click",function () {
           var rows =  QiYuComponents.getTableSelections($userTable);
            if(rows.length==){
                QiYuComponents.bootstrapSweetAlert("","請選擇一個使用者","error");
                return;
            }
            if(rows.length>=){
                QiYuComponents.bootstrapSweetAlert("","不能選擇多個使用者","error");
                return;
            }
            //檢視使用者的基本資訊
            QiYuComponents.layerOpen("配置賬戶",'1000px','650px',"user/profile/view/"+rows[].id+"?operator=admin");
        });
        //綁定删除按鈕事件
        $deleteUsers.on("click",function () {
            QiYuComponents.qiYuAjaxDelete("user/batch",$userTable);
        });
    }
    /**
     * 使用者修改頁面事件綁定
     */
    var userProfileEventHandler = function () {

        $updateUserInfo.on("click",function () {

        });
    }
    /**
     * 使用者增加頁面事件綁定
     */
    var userAddEventHandler = function () {
        $addUserBtn.on("click",function () {
            $addUserForm.submit();
        });
    }
    /**
     * 使用者增加頁面驗證表單
     */
    var initUserAddBootStrapValidate = function (addAjaxUrl) {
        $addUserForm.bootstrapValidator({
//          trigger: 'blur',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                userCode: {
                    validators: {
                        notEmpty: {
                            message: '員工編碼不能為空'
                        }
                    }
                },
                loginName: {
                    validators: {
                        notEmpty: {
                            message: '登入賬号不能為空'
                        },
                        remote: {//ajax驗證。server result:{"valid",true or false} 向服務發送目前input name值，獲得一個json資料。例表示正确：{"valid",true}
                            url: '/QiYuAdmin/user/uniqueness/loginName',//驗證位址
                            message: '賬号已存在',//提示消息
                            delay :  ,//每輸入一個字元，就發ajax請求，伺服器壓力還是太大，設定秒發送一次ajax（預設輸入一個字元，送出一次，伺服器壓力太大）
                            type: 'POST'//請求方式
                        }
                    }
                },
                userName:{
                    validators: {
                        notEmpty: {
                            message: '員工名稱不能為空'
                        }
                    }
                }
            }
        }).on("success.form.bv",function(e){
            QiYuComponents.qiYuAjaxFormSumbit(addAjaxUrl,addUserFormId,userTableId);
        });
    }

    /**
     * 使用者修改頁面驗證表單
     */
    var initUserUpdateBootStrapValidate = function (updateAjaxUrl) {
        $updateUserForm.bootstrapValidator({
//          trigger: 'blur',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                userCode: {
                    validators: {
                        notEmpty: {
                            message: '員工編碼不能為空'
                        }
                    }
                },
                userName:{
                    validators: {
                        notEmpty: {
                            message: '員工名稱不能為空'
                        }
                    }
                }
            }
        }).on("success.form.bv",function(e){
            QiYuComponents.qiYuAjaxFormSumbit(updateAjaxUrl,updateUserFormId,userTableId);
        });
    }

    /**
     * 使用者修改頁面驗證表單
     */
    var initUserPwsUpdateBootStrapValidate = function (updateAjaxUrl) {
        $updateUserPwdForm.bootstrapValidator({
//          trigger: 'blur',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                loginPwd:{
                    validators: {
                        notEmpty: {
                            message: '新密碼不能為空'
                        }
                    }
                },
                loginRepPwd:{
                    validators: {
                        notEmpty: {
                            message: '新重複密碼不能為空'
                        },
                        identical: {//相同
                            field: 'loginPwd', //需要進行比較的input name值
                            message: '兩次密碼不一緻'
                        }
                    }
                }
            }
        }).on("success.form.bv",function(e){
            QiYuComponents.qiYuAjaxFormSumbit(updateAjaxUrl,updateUserPwdFormId,userTableId);
        });
    }

    /**
     * 使用者增加頁面事件綁定
     */
    var userUpdateEventHandler = function () {
        $updateUserBtn.on("click",function () {
            $updateUserForm.submit();
        });

        $updateUserPwdBtn.on("click",function () {
            $updateUserPwdForm.submit();
        });
    }


    return{
        //初始化使用者管理的首頁面:使用者清單
        initUserMain:function () {
            initTable();
            userMainEventHandler();
        },
        //初始化使用者管理的修改頁面:user_profile.html
        initUserProfile:function (updateAjaxUrl) {
            initUserUpdateBootStrapValidate(updateAjaxUrl);
            userUpdateEventHandler();
            initUserPwsUpdateBootStrapValidate(updateAjaxUrl);

        },
        //初始化使用者增加頁面
        initUserAdd:function (addAjaxUrl) {
            initUserAddBootStrapValidate(addAjaxUrl);
            userAddEventHandler();
        }

    }
}();

結語

下一篇部落格将內建FastDfs和上傳圖檔的一個插件（這個插件待确認中，還在調研中，webuploader？zyuploder？待确定）。

QiYuAdmin從0到1 權限管理系統 背景管理系統 metronic架構 QiYuAdmin 使用者管理系統
上一篇: Asp.Net Core SignalR 分組使用示例
下一篇: 學JAVA的第三天之反射

繼續閱讀