三，crud基本功能的实现，及一些数据验证

最新推荐文章于 2022-02-12 09:26:09 发布

chunniang8044

最新推荐文章于 2022-02-12 09:26:09 发布

阅读量492

点赞数

文章标签： json

原文链接：https://my.oschina.net/u/4108565/blog/3071808

版权

删除功能 1.employee.js delete(){ //1.获取你选中的一行employeeGrid:标签id, var row = employeeGrid.datagrid("getSelected"); //2.如果没有选中，给出提示 if(!row){ $.messager.alert('警告','请选中想要删除的行',"warning"); return ; } //3.如果有选择，确认是否真的要删除 $.messager.confirm('确认','您确认想要删除记录吗？',function(r){ if (r){ //4.如果确定,发送请求到后台进行删除 //5.后台会返回{success:true/false} -> 知道是成功还是失败 $.get("/employee/delete",{id:row.id},function(result){ //判断返回对象的属性值为true/false if(result.success){ //删除成功-刷新页面(datagrid的数据) employeeGrid.datagrid("reload"); }else{ //失败，给出提示 $.messager.alert('错误','删除失败 ,原因:'+result.msg,"error"); } }) } });

}

	2.Controller层封装一个对象来返回

//删除功能，前台要求返回(success:true/false,msg:xxx) @RequestMapping("/delete") @ResponseBody public JsonResult delete(Long id){ try { employeeService.delete(id); //删除成功，返回无参构造-默认为true. return new JsonResult(); } catch (Exception e) { e.printStackTrace(); //删除失败-返回有参构造-将success的值改为false. return new JsonResult(false,e.getMessage()); }

}

3.定义一个类

package com.wzh.common;

public class JsonResult {

private boolean success=true;
private String msg;

public JsonResult(){};
public JsonResult(boolean success,String msg){
    this.success=success;
    this.msg=msg;
}

2.完成添加和修改功能 1.准备表单

        <tr>
            <td>邮箱:</td>
            <td><input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'"></input>
            </td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td><input class="easyui-validatebox" type="text" name="age"
                       data-options="validType:'integerRange[18,60]'"></input>
            </td>
        </tr>
        <tr>
            <td>部门:</td>
            <td>
                <!--动态获取部门数据
                    url:
                    method:'get' --请求方式：Hbuilder需要用get，因为它的内部服务器只支持get方法，不支持post方法
                    valueField:'id' --选项的id，与.json文件一致（id）
                    textField:'name' --显示的内容，与.json文件一致（text
                    panelHeight:'auto' --下拉列表自适应，内容有多少就占多少
                     value:'请选择' -- 设置显示的默认值-->
                <input id="cc" class="easyui-combobox" name="department.id"
                       data-options="valueField:'id',
                        textField:'name',
                        url:'/util/dept',
                        panelHeight:'auto',
                        value:'请选择'"/>
            </td>
        </tr>
    </table>
</form>

</div>  <div id="bb"> <a href="#" data-method="save" class="easyui-linkbutton c1">保存</a> <a href="#" data-method="close" class="easyui-linkbutton c9">关闭</a> </div>

2.验证用户名是否唯一

1.前台发送原生Js请求 //自定义验证--验证用户名是否存在 $.extend($.fn.validatebox.defaults.rules, { //验证的名称 checkName: { //验证的规则 /** * * @param value 文本框中的值 * @param param 传过来的值(数组) * @returns {boolean} */ validator: function(value, param){ //返回false,代表验证失败，true表示成功 var result=$.ajax({ url:"/employee/checkUsername", data:{username:value}, async:false //false就是同步 }).responseText; //将字符串转换为json格式 result=JSON.parse(result); return result; }, //失败提示 message: '用户名已存在' } });

2.后台进行数据处理-repository-service-controller EmployeeRepository

//判断用户名是否存在-只要判断传过来的用户查询出来的员工数量是否大于0 @Query("select count(o) from Employee o where o.username=?1") Long getCountByUsername(String username);

IEmployeeService Boolean checkUsername(String username);

EmployeeServiceImpl

@Autowired private EmployeeRepository employeeRepository;

/**

如果得到的结果大于0，返回false,说明用户名已存在
@param username
@return */ @Override public Boolean checkUsername(String username) { return employeeRepository.getCountByUsername(username)>0?false:true; }

Controller //验证用户名 @RequestMapping("/checkUsername") @ResponseBody public Boolean checkUsername(String username){ return employeeService.checkUsername(username); }

3.保存添加 1.js页面 save(){ var url="/employee/add"; //根据id值判断是添加还是修改 var employeeId = $("#employeeId").val(); if(employeeId){ url="/employee/update?cmd=_update"; } editForm.form('submit', { url:url, onSubmit: function(){ //提交之前做一些验证，验证输入项。 var isValid = $(this).form('validate'); return isValid; // 返回false终止表单提交 }, //data : {success:true/false,msg:xxx} -> 字符串 success: function(data){ var result=JSON.parse(data); if(result.success){ //保存成功，刷新页面 employeeGrid.datagrid("reload"); }else { $.messager.alert('错误',保存失败！原因是:${result.msg},"error"); } //关闭模态框 itsource.close(); } });

}

2.再次添加需要先清空数据

add(){ //1.先清空 editForm.form("clear"); //打开且居中 editDialog.dialog("open").dialog("center");

}

2.保存修改 1.js代码 update(){ //1.获取到选中的那一行 var row = employeeGrid.datagrid("getSelected"); //2.如果没有选中，给出提示 if(!row){ $.messager.alert('警告','请选中后再操作！',"warning"); return ; } //3.清空form中的数据 editForm.form("clear"); //4.修改的时候不会对密码框进行操作，所以设置密码框验证失效且隐藏 $("[data-edit]").hide(); $("[data-edit] input").validatebox("disable"); //5.回显结果 /** * 部门：<input name="department.id" * row: department.id = 4 -> "department.id"= 4 */ if(row.department){ row["department.id"]=row.department.id; } editForm.form("load",row); //打开模态框且居中显示 editDialog.dialog("center").dialog("open");

}

2.解决修改的时候-不改用户名也可以通过验证的问题

//验证用户名 @RequestMapping("/checkUsername") @ResponseBody //传递参数判断-有id的话就是修改 public Boolean checkUsername(Long id,String username){ //1.判断id是否存在 if(id!=null){ //修改操作-判断用户名是否有修改 Employee dbEmp = employeeService.findOne(id); //判断名称是否相等 if(username.equals(dbEmp.getUsername())){ //4.如果相等-没有修改用户名，直接返回true. return true; } } return employeeService.checkUsername(username); }

3.解决--部门没有回显的问题

/**

部门：<input name="department.id"
row: department.id = 4 -> "department.id"= 4 */ if(row.department){ row["department.id"]=row.department.id; } editForm.form("load",row);

4.密码框不需要修改 //4.修改的时候不会对密码框进行操作，所以设置密码框验证失效且隐藏 $("[data-edit]").hide(); $("[data-edit] input").validatebox("disable");

3.解决数据丢失问题 headImage --------------passowrd：这两个字段在修改的时候都没有提交给后台导致保存后-出现数据丢失问题

@ModelAttribute /** *ModelAttribute:路径访问Controller的每个方法，都会先执行它里面的代码

解决数据丢失问题- */ @ModelAttribute("editEmployee") public Employee beforeEdit(Long id,String cmd){ //设置一个参数，只有当修改的时候才会执行如下代码-提高性能 if(id!=null && "_update".equals(cmd)){ //修改才执行这个代码 Employee dbEmployee = employeeService.findOne(id); //解决n-to-n的问题,把关联对象设置为null dbEmployee.setDepartment(null); return dbEmployee; } 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()); } }

转载于:https://my.oschina.net/u/4108565/blog/3071808