个人项目总结(三)

最新推荐文章于 2021-02-26 17:07:57 发布

原创最新推荐文章于 2021-02-26 17:07:57 发布 · 766 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#SpringMvc #easyui

本文介绍如何使用EasyUI实现数据的增删改查功能，包括前端页面设计、数据验证、前后端交互及常见问题解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

easyui增删改查

easyui拓展库(http://www.easyui-extlib.com)

添加数据

1.创建一个弹出框

<div id="employeeDialog" class="easyui-dialog" data-options="closed:true,modal:true" title="员工操作" style="width:400px">
    <div style="padding:10px 60px 20px 40px">
        <form id="employeeForm" class="easyui-form" method="post" data-options="">
            <input type="hidden" id="employeeId" name="id" >
            <table cellpadding="5">
                <tr>
                    <td>用户名:</td>
                    <td><input class="easyui-validatebox" type="text" name="username" data-options="required:true"
                        validType="checkUsername"
                    ></input></td>
                </tr>
                <tr data-save="true">
                    <td>密码:</td>
                    <td><input id="password" class="easyui-validatebox" type="password" name="password" data-options="required:true"></input></td>
                </tr>
                <tr data-save="true">
                    <td>重复密码:</td>
                    <td><input class="easyui-validatebox" type="password" name="repassword" data-options="required:true"
                                validType="equals['password',’id’]"></input></td>
                </tr>
                <tr>
                    <td>邮件:</td>
                    <td><input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
                </tr>
                <tr>
                    <td>年龄:</td>
                    <td><input class="easyui-validatebox" type="text" name="age" data-options="required:true"></input></td>
                </tr>
                <tr>
                    <td>部门:</td>
                    <td>
                        <input class="easyui-combobox" name="department.id"
                                data-options="valueField:'id',textField:'name',panelHeight:'auto',url:'/util/departmentList'">
                    </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" "$(‘employeeDialog’).dialog('close')">取消</a>
        </div>
    </div>
</div>

2.点击弹出事件

add:function () {
        //如果有data-save属性，我们把它展示出来
        $("*[data-save]").show();
        //启动有data-save属性的input元素的验证功能
        $("*[data-save] input").validatebox("enable"); 
       employeeForm.form("clear");//清除数据
        //弹出表单窗口
        employeeDialog.dialog("center").dialog('open');
    },

3.用户名验证

$.extend($.fn.validatebox.defaults.rules, {
    equals: {
        validator: function(value,param){
            return value == $(param[0]).val();
        },
        message: '两次密码匹配.'
    }
});
//验证扩展：用户名是否可以重复使用
$.extend($.fn.validatebox.defaults.rules, {
    checkUsername: {
        validator: function(value,param){
            var employeeId = $("#employeeId").val();
            var result = $.ajax({
                type: "GET",
                url: "/employee/checkUsername",
                data:{username:value,id:employeeId},
                async: false //同步
            }).responseText;
            return result=="true";
        },
        message: '用户名不能重复.'
    }
});

4.后台用户名验证支持
EmployeeRepository

public interface EmployeeRepository extends BaseRepository<Employee,Long> {

     @Query("select o from Employee o where o.username=?1") 
     Employee findByUsername(String username);
}

IEmployeeService

public interface IEmployeeService extends IBaseService<Employee,Long> {

    /**
     * 如果根据用户名查询到了员工 -> 返回false（代表这个用户已经存在）
     * @param username
     * @return
     */
    boolean checkUsername(String username);

}

EmployeeServiceImpl

@Service
public class EmployeeServiceImpl extends BaseServiceImpl<Employee,Long> implements IEmployeeService {

    @Autowired
    private EmployeeRepository employeeRepository;

    @Override
    public boolean checkUsername(String username) {
        return employeeRepository.findByUsername(username)==null;
    }
}

EmployeeController

@RequestMapping("/checkUsername")
@ResponseBody
public Boolean checkUsername(Long id,String username){
    if(id!=null) {
        //1.根据id拿到对应的员工
        Employee dbEmp = employeeService.findOne(id);
        //2.判断数据库的员工的username与传过来的username是否相等
        if(username.equals(dbEmp.getUsername())){
            return true; //相同代表没有修改
        }
    }
    //正常验证
    return employeeService.checkUsername(username);
}

5.提交数据

save:function () {
    var url  = "/employee/save";
    var id = $("#employeeId").val();
    if(id){
        url = "/employee/update?cmd=update";
    }
    employeeForm.form('submit', {
        url:url,
        onSubmit: function(){
            //做验证
            return $("#employeeForm").form("validate");
        },
        success:function(data){
            var result = JSON.parse(data);//转成相应的json数据
            if(result.success) {
                $('#employeeGrid').datagrid('reload');
            }else{
                $.messager.alert('提示信息','操作失败!，原因:'+result.msg,"error");
            }
            employeeDialog.dialog('close');
        }
    })
}

删除数据

1.前台

   del:function () {
            //拿到选中的这条数据
            var row = employeeGrid.datagrid("getSelected");
            if(row){
                $.messager.confirm('确认框', '确定要狠心删除我么?', function(r){
                    if (r){
                        //进行删除
                        $.get("/employee/delete",{id:row.id},function (result) {
                            if(result.success){
                                $('#employeeGrid').datagrid('reload');
                            }else{
                                //alert("删除失败");
                                $.messager.alert('提示信息','删除失败!，原因:'+result.msg,"error");
                            }
                        })
                    }
                });
            }else{
                $.messager.alert('提示信息','请选择一行再进行删除!','info');
            }
        },

2.后台

@RequestMapping("/delete")
@ResponseBody
public Map delete(Long id){
    Map<String,Object> map = new HashMap<>();
    try {
        employeeService.delete(id);
        map.put(SUCCESS, true);
    } catch (Exception e) {
        e.printStackTrace();
        map.put(SUCCESS, false);
        map.put("msg", e.getMessage());
    }
    return map;
}

修改数据

1.打开修改窗口

 edit:function () {
        //选中了某一条数据才删除
        var row = employeeGrid.datagrid("getSelected");
        if(row){
            //隐藏有data-save属性的元素
            $("*[data-save]").hide();
            //禁用有data-save属性的input元素的验证功能
            $("*[data-save] input").validatebox("disable");

            employeeForm.form("clear");//清除数据
            employeeDialog.dialog("center").dialog('open');
            //单独解决部门的回显问题
            if(row.department){
                row["department.id"] = row.department.id;
            }
            //为form加载数据
            $("#employeeForm").form("load",row);
        }else{
            $.messager.alert('提示信息','请选择一行再进行修改!','info');
        }
    },

2.提交表单数据
和添加一样调用save()方法

数据丢失问题

在这里插入图片描述解决方法
~~① 用隐藏域传值~~
~~② 使用注解@Column，但后期需要修改数据时就会出错~~

③ @ModelAttribute
运用在方法上，会在每一个@RequestMapping标注的方法前执行，如果有返回值，则自动将该返回值加入到ModelMap中；

@ModelAttribute("editEmployee")
public Employee beforeEdit(Long id){
    if(id!=null){
        Employee employee = employeeService.findOne(id);
        return employee;
    }
    return  null;
}
@RequestMapping("/update")
@ResponseBody
public Map<String,Object> update(@ModelAttribute("editEmployee")Employee employee){
    return saveOrUpdate(employee);

}

No to No错误

在这里插入图片描述
错误原因是修改了持久化对象的ID
解决方法

@ModelAttribute("editEmployee")
public Employee beforeEdit(Long id, String cmd){
    //有id的时候-> 修改功能
    if(id!=null && "update".equals(cmd)) {
        Employee employee = employeeService.findOne(id);
        //把这个要修改的关联对象设置为null,可以解决n-to-n的问题
        employee.setDepartment(null);
        return employee;
    }
    return null;
}

当Department为空时，SpringDataJpa会通过反射创建一个对象
然后再设置Department的id