aisell项目Day03_细节

骑猪看日落 2022-03-06 05:42 178阅读 0赞

### （一 ）第三天主要实现的功能 ###

实现对员工信息的**增删改**

> 准备：  
> 在jsp页面中的from表单内的添加、修改、删除、查询的空间中添加自定义属性

data-method="add"  data-method="edit"  data-method="remove"    data-method="save"

> js代码中为jsp页面上所有的data-method内的属性添加事件

/*为页面上所有data-method内的属性添加事件*/
        $("*[data-method]").click(function () {
            lzj[$(this).data("method")]();
            /*两种调用方式： lzj.add()   lzj["add"]() */
        });
        
        lzj = {
            add(){},
            edit(){ },
            remove(){ },
            search(){},
            save(){ }
        }

### （二）删除细节 ###

*  前端js代码逻辑思路  
    ① 获取选中行（下面只考虑选中，没有选中直接弹出消息框，提示用户即可）  
    ② 弹出消息框，确认是否删除  
    ③ 使用ajax发送get请求，传入id进行删除  
    ④ 删除成功之后刷新页面  
    ⑤ 删除失败，弹出消息框提示用户，并告诉失败原因
 *  后台java代码逻辑思路  
    注意此处的删除的路径只能是delete，因为后期权限处理设置的此路径  
    ① 删除方法添加路径注解和json格式注解 @RequestMapping("/delete")  
    @ResponseBody  
    ② 创建一个JsonResult对象，目的用于返回错误消息对象，使用的是json格式  
    ③ 通过注入的业务层调用SpringDataJpa的删除方法  
    ④ 返回返回jsonResult对象

### （三）添加细节 ###

*  前台jsp代码思路  
    ① 创建一个对话框，放入一个表单  
    ② 对话框默认关闭，在data-options属性中设置：closed:true  
    ③ 对话框设置为模态框，在data-options属性中设置：modal:true  
    ④ 对话框中新增确认和取消按钮在data-options属性中设置：buttons:’\#dialogBtns’  
    因为textbox的验证功能比较少，所以此处使用validatebox的验证功能  
    ⑤ 简单验证：年龄:validType:‘integerRange\[18,70\]’,required:true、邮箱:equired:true,validType:‘email’  
    ⑥ 密码验证：需引入插件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTM2MjUw_size_16_color_FFFFFF_t_70]⑦ 用户名唯一验证—>前台通过ajax传入输入的用户名给后台，后台根据用户名在数据库中进行查询

> js代码中自定义验证规则  
> 注意  
> 1）ajax默认发送的是异步的请求，需要修改为同步请求：async: false。否则会导致检验失败  
> 2）同步请求返回的值是字符串，需要将其和字符串true进行绝对相等比较

//自定义验证： 验证用户名的唯一性
    $.extend($.fn.validatebox.defaults.rules, {
        checkUserName: {
            /**  用户名唯一的验证功能
             * @param value  前台用户在表单内输入的用户名
             * @param param  为数组，是调用验证功能时，输入的参数（此处不使用，因为从后台进行获取）
             * @returns {boolean}
             */
            validator: function(value, param){
                console.debug(param)
                /**
                 *  通过ajax发送请求，访问后台方法
                 *          注意此时传的参数必须和后台方法内的参数名一致username
                 *          ajax访问是异步的，需要修改为同步的访问，不能使用$.get的方法
                 */
               var empId = $("#employeeId").val(); //修改信息的时候，需要id
               var result= $.ajax({
                    url: "/employee/checkUsername",
                    data:{username:value,id: empId},
                    async: false //同步请求
                }).responseText;
                console.debug(result)
                //返回false，表示验证失败，在数据库中已经存在了一个相同的用户名
                return result==="true";
            },
            //不符合验证时，给以用户提示信息
            message: '亲~ ，此用户名已经被占用了，请换一个试试'
        }
    });

> 仓库层将根据用户名进行查询用户名是否存在

"select count(o) from Employee o where username = ?1"

> 业务层判断仓库层是否有查询到数据

public boolean checkName(String username) {
            Long count = employeeRepository.findCountByUsername(username);
            //count>0,代表在数据库中能查询到此用户，用户名已存在
            return !(count>0);
        }

> web层将数据库的用户名和前台传入的用户名进行判断

public boolean checkUsername(Long id ,String username) {
            if(id!=null){
                //1.根据id到数据库中获到数据
                Employee dbEmp = employeeService.findOne(id);
                //2.判断数据库的员工名称和传过来的是否相等
                if(dbEmp.getUsername().equals(username)){
                    //3.如果相等，代表这个用户名是可以使用的
                    return true;
                }
            }
            return employeeService.checkName(username);
        }

*  前台js代码  
    ① 将新增的表单的会话框设置在页面中心  
    ② 将自定义的show属性的控件展示并激活  
    ③ 添加前清空表单

add(){
                //打开添加或修改的表单，并将表单放置在页面的中心
                employeeDialog.dialog("open").dialog("center");
                //将密码和确认密码显示出来，即带有data-show属性的打开
                $("*[data-show]").show();
                //将data-show属性内的input控件激活，可以使用
                $("*[data-show] input").validatebox("enable");
                //每次添加数据的时候都清空表单内的数据，保证添加时，表单内不会回显之前编辑的数据
                employeeForm.form("clear");
            },

### （四）修改细节 ###

*  编辑的回显

① 将自定义属性（即密码和确认密码）进行禁用和隐藏

//将密码和确认密码显示出来，即带有data-show属性的打开
          $("*[data-show]").hide();
          //将input组件禁用，避免在修改保存数据的时候，确认密码控件导致数据无法保存
          $("*[data-show] input").validatebox("disable");

② 清除多余的内容，即确认密码的内容清空

employeeForm.form("clear");

③ 部门额的回显需要转换  
（因为回显需要字段"[department.id][]" [row中存放的是department.id][row_department.id]）

if(selectRow.department){
          selectRow["department.id"] = selectRow.department.id;
           }

④ 将选中的数据放入表单内（因为此时选中的数据，已经存放在了rows内，所以直接将rows中的数据，加载进form内即可）

employeeForm.form("load",selectRow);

### （五）保存细节 ###

添加数据和修改数据都需要进行保存

*  前台js代码逻辑  
    ① 判断是修改保存还是编辑保存，  
    编辑保存多传入一个参数，后台进行核对

url = "/employee/save";
                var id = $("#employeeId").val();
                if(id){
                    //在编辑保存的时候，避免数据丢失，使用SpringMVC的注解只对更新方法，进行数据进行查询，于是添加cmd（名字随意）条件，后台进行判断
                    url = "/employee/update?cmd=update";
                }

② 提交表单之前先进行验证

onSubmit: function(){
              //当前from，提交保存信息之前，判断验证
               return  $(this).form('validate');
           },

③ 保存成功之后的回调函数，返回的是一个字符串，需要转为json格式  
④ 保存成功：刷新页面并关闭对话窗口  
⑤ 失败，则弹出消息框，提示用户

employeeForm.form({
           url:url,
             onSubmit: function(){
                 //当前from，提交保存信息之前，判断验证
                 return  $(this).form('validate');
             },
             //保存成功后的回调函数，返回的是一个字符串，需要转换为一个JSON对象
             success:function(data){
                 /*console.debug(data);*///data是一个字符串
                /*var result = eval("("+data+")");*/
                 var result = JSON.parse(data);
                 //操作成功
                 if (result.success) {
                     //刷新页面
                     employeeGrids.datagrid("reload");
                     //关闭窗口
                     employeeDialog.dialog("close");
                 }else{
                     //5、获取后台返回结果：{susscee:true/false,msg:"失败原因"}，并提示给用户
                     $.messager.alert('提示',`删除失败，，原因是：${result.msg}`,'error');
                 }
             }
         });
         employeeForm.submit();

====  
**技术点①**：修改和添加的保存方法是一致的，但为了后期的权限处理，添加和修改的保存路径不能一致，所以在web层**抽取一个私有的保存方法**，然后以供调用，前台**传入不同的参数**进行兼容判断  
数据丢失问题  
**技术点②**：修改数据出现的**数据丢失**问题  
分析：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTM2MjUw_size_16_color_FFFFFF_t_70 1]

解决方案：  
① 使用**隐藏域**，将隐藏域中的值传入到后台（不推荐，因为安全性太低且麻烦，隐藏域内的值，易被不法分子进行数据抓包）  
② 使用SpringMVC的**注解@Column(updateble=false)**，在domain对象上对应的字段上贴此注解，告诉SpringDataJpa，修改的时候不对此字段进行操作（不推荐，因为如果需要对此字段进行操作时，很麻烦，并且扩展性太低）  
③**避免使用反射**，在web层，直接通过id获取此对象，将传入的值进行set修改，前台没有传入则不会进行set设置（不推荐因为前台修改，后台也必须跟着进行修改，耦合度高）  
④ 使用SpringMVC的 @ModelAttribute注解，贴在查询方法上  
此注解认识：  
1）在执行任何一个路径之前，都会先执行被贴的方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTM2MjUw_size_16_color_FFFFFF_t_70 2]  
2）此时update中的查询的对象，已经是从数据库中查询出来的对象，并且SpringMVC已经对齐进行了修改操作  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTM2MjUw_size_16_color_FFFFFF_t_70 3]

修改部门出现n-to-no异常

**技术点③**  
错误分析：  
因为find方法获取的员工对象是持久化对象，员工的部门是懒加载数据，[传入的是department.id][department.id 1]，SpringMVC只要发现输入的字符串有"."，它就会把这个字符串进行拆分，前面都是get属性，最后一个“.”就是set属性，而懒加载获取的对象的id被修改，就会出现脏数据更新，从而导致n-to-no错误  
解决方案：在find查询获取了员工对象之后，**将员工的部设置为null**，因为部门为空，SpringMVC就会新创建一个部门对象，此时就不是持久化对象，可以修改成功  
即凡是传入的关联对象，都需要设置为null，否则就会出现n-to-n

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTM2MjUw_size_16_color_FFFFFF_t_70]: /images/20220306/fde79a331b104486ba828f6dbef099fc.png
[department.id]: http://department.id
[row_department.id]: http://xn--rowdepartment-dj1uj64mod7acmdhq1h.id
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTM2MjUw_size_16_color_FFFFFF_t_70 1]: /images/20220306/23e2ed0ca0d0490cb94fed33a4423092.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTM2MjUw_size_16_color_FFFFFF_t_70 2]: /images/20220306/34bef4812c11453d85ec1789e6eac390.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTM2MjUw_size_16_color_FFFFFF_t_70 3]: /images/20220306/19989762662a49e8988621f4a02a54c9.png
[department.id 1]: http://xn--department-7z4p21t009en16b.id