天天看点
返回

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的第三天之反射

继续阅读