易用宝项目记录day3-curd

易用宝项目记录day3-curd

1.删除

1. 先创建好employee.jsp页面(查easyui文档)

2. 判断前台用户是否选中要删除的内容

   ​ 是:提示真的要删除

   ​ 否:提示选中再操作

3. 前台页面传id到后台删除

4. 后台设置一个JsonResult来返回删除是否成功的Boolean值

   ​

2.增加

1. employee.jsp页面增加一个弹出验证框

   <%--添加与修改的表单对话框--%>
   <div id="editDialog" class="easyui-dialog" title="功能编辑" style="width:400px;"
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true">
       <form id="editForm" method="post">
           <input id="employeeId" type="hidden" name="id" />
           <table cellpadding="5">
               <tr>
                   <td>用户名:</td><%--data-options="required:true"必须输入--%>
                   <td><input class="easyui-validatebox" type="text" name="username" data-options="required:true,validType:'checkName'"/></td>
               </tr>
               <tr data-edit="true">
                   <td>密码:</td>
                   <td><input id="password" class="easyui-validatebox" type="password" name="password" data-options="required:true"/></td>
               </tr>
               <tr data-edit="true">
                   <td>确认密码:</td>
                   <td><input class="easyui-validatebox" type="password" data-options="required:true" validType="equals['password','id']"/></td>
               </tr>
               <tr>
                   <td>邮件:</td>
                   <td><input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"/></td>
               </tr>
               <tr>
                   <td>年龄:</td><%--integerRange[1,100]扩展插件--%>
                   <td><input class="easyui-validatebox" type="text" name="age" data-options="validType:'integerRange[1,100]'"/></td>
               </tr>
               <tr>
                   <td>部门:</td>
                   <td>
                       <input  name="department.id" class="easyui-combobox"   panelHeight="auto"
                               data-options="valueField:'id',textField:'name',url:'/util/dept',required:true" />
                   </td>
               </tr>
           </table>
       </form>
       <div style="text-align:center;padding:5px">
           <a href="javascript:void(0)" class="easyui-linkbutton" data-method="save">提交</a>
           <a href="javascript:void(0)" class="easyui-linkbutton" data-method="closeDialog">关闭</a>
       </div>
   </div>
   

2. 在employee.js设置弹窗居中,显示密码框(因为修改需要隐藏)

    //添加
           add() {
               //让密码框显示
               $("*[data-edit]").show();
               $("*[data-edit] input").validatebox("enable");
               //修改弹出框Title
               editDialog.dialog('setTitle', "添加");
               //清空form中的数据
               editForm.form("clear");
               //打开弹出框(居中)
               editDialog.dialog("center").dialog("open");
           }
   

3. 密码扩展插件验证,邮箱自带验证及名字的自定义验证

   密码扩展插件验证:

   <%--验证扩展的样式与js引入--%>
   <link rel="stylesheet" type="text/css" href="/easyui/plugin/validatebox/jeasyui.extensions.validatebox.css">
   <script src="/easyui/plugin/validatebox/jeasyui.extensions.validatebox.rules.js"></script>
   

   代码:

   <tr data-edit="true">
       <td>密码:</td>
       <td><input id="password" class="easyui-validatebox" type="password" name="password" data-options="required:true"/></td>
   </tr>
   <tr data-edit="true">
       <td>确认密码:</td>
       <td><input class="easyui-validatebox" type="password" data-options="required:true" validType="equals['password','id']"/></td>
   </tr>
   

   邮箱自带验证:

   <tr>
       <td>邮件:</td>
       <td><input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"/></td>
   </tr>
   

   名字的自定义验证:

   //自定义验证用户名是否存在
   $.extend($.fn.validatebox.defaults.rules, {
       //验证名称
       checkName: {
           //验证的规则
           /*
            value ：文本框当前的值
            param : 传过来的值(数组)
            */
           validator: function (value, param) {
               //拿到员工的id
               var employeeId = $("#employeeId").val();
               //用ajax的同步提交!!
               var result = $.ajax({
                   url: "/employee/checkUsername",
                   data: {username: value, id: employeeId},
                   async: false //false  同步
               }).responseText;
               result = JSON.parse(result);
               //返回false,代表验证失败
               return result;
           },
           //失败提示
           message: '用户名已存在!'
       }
   });
   

3.修改

1. 弹出验证框获取到id,传入后台查询数据回显,隐藏密码,头像和id字段

   ​

2. 关于密码问题

   添加时显示密码,并且把它启用

 //让密码框显示
 $("*[data-edit]").show();
 $("*[data-edit] input").validatebox("enable");

​ 修改时隐藏密码，并且把它禁用

 //让密码框失效且隐藏起来
 $("*[data-edit]").hide();
$("*[data-edit] input").validatebox("disable");

​ 修改回显

//把结果进行回显
  if (row.department) {
        row["department.id"] = row.department.id;
         }
        editForm.form("load", row);

###3.密码和头像丢失问题

三种解决方案(隐藏域,SQL不修改,先到数据库查)

最好的方法:在EmployeeController.java里设置

@ModelAttribute在执行其他方法前,先执行这个方法

//@ModelAttribute在执行其他方法前,先执行这个方法
@ModelAttribute("editEmployee")
public Employee beforeEdit(Long id, String cmd) {
    if (id != null && "_upd_".equals(cmd)) {
        Employee one = employeeService.findOne(id);
        //解决n-to-n的问题
        one.setDepartment(null);
        return one;
    }
    return null;
}
//修改
@RequestMapping("/update")
@ResponseBody
public JsonResult update(@ModelAttribute("editEmployee") Employee employee) {
    try {
        employeeService.save(employee);
        return new JsonResult();
    } catch (Exception e) {
        e.printStackTrace();
        return new JsonResult(false, e.getMessage());
    }
}