简述
一家人都生病了一周，病毒性感冒，传染性急强，我在家待了5天了，我女儿到现在还在咳嗽。
昨天和领导到一个客户现场聊完之后坐在车上说起了孩子的事，他说他不会在要第二个了，太折腾人了。不过我们领导年纪也大了，孩子也挺大的了。
其实不是身体累而是心累，睡觉都睡不安稳，总想着女儿有没有把被子给踢掉。不过开心的时候还是挺幸福的。生活就是如此。
这段时间做了如下的事情：
- 用户表单样式
- 用户增删改查
用户表单样式
效果
描述
表单验证的插件用的是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 : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次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(1).indexOf("/");
var result = pathName.substr(0,index+1);
return result;
}不知道Thymeleaf里面有没有更好的解决方案？我找了半天没有找到Thymeleaf里面是怎么处理js文件里面的地址的，而是在他的模板里面进行内联，js内联代码如下。
<script th:inline="javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {
QiYuUser.initUserAdd(/*[[@{/user}]]*/);
});
/*]]>*/
</script>这样写的话我的user.js所有用到ajax地址的都需要弄一个参数，如上代码所示。
用户增加
效果
描述
有很多共用的方法，比如说：增加表单、修改表单、删除表单、表格初始化。这些都可以封装成共用的。下次类似的功能只需要传入几个参数就可以了，很方便的。比如这里的增加用户功能。
//初始化用户增加页面
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 : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次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();
});
} 特别像后台管理系统之类的功能，很多都是表格、表格上面有几个按钮：增加、修改、删除等等。类似的功能可以单独抽出来，抽出共用的方法。非常方便。等做下一个这样的功能的时候我在说下有多方便了。
用户修改和删除
效果
描述
修改和增加的功能是类似的。多了一个修改密码的页签。都很简单。我把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==1){return "男";}else if(value==-1){return "女";}else{return "未知";}
}}
,{title: '用户状态',field: 'isLock',align: 'center',formatter:function (value,row,index) {
if(value==1){return "正常";}else if(value==-1){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==0){
QiYuComponents.bootstrapSweetAlert("","请选择一个用户","error");
return;
}
if(rows.length>=2){
QiYuComponents.bootstrapSweetAlert("","不能选择多个用户","error");
return;
}
//查看用户的基本信息
QiYuComponents.layerOpen("配置账户",'1000px','650px',"user/profile/view/"+rows[0].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 : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次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？待确定）。
3039
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
