销售宝系统_Day03(CRUD)

一、准备前端页面

.1.employee.jsp

	<div id="tb" style="padding:5px;height:auto">
	    <!-- 这部分是加上增删改的按键:现在没有功能，我们先不管它 -->
	    <div style="margin-bottom:5px">
	        <a href="#"  data-method="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
	        <a href="#"  data-method="edit" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
	        <a href="#"  data-method="del" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
	    </div>
	    <!-- 这部门是查询的功能 -->
	    <div>
	        <form id="searchForm" action="/employee/download" method="post">
	            用户名： <input name="username" class="easyui-textbox" style="width:80px;height:32px">
	            邮件: <input name="email" class="easyui-textbox" style="width:80px;height:32px">
	            部门 :
	            <input  class="easyui-combobox" name="departmentId"
	                    data-options="valueField:'id',textField:'name',panelHeight:'auto',url:'/util/departmentList'">
	            <a href="#" data-method="search"  class="easyui-linkbutton" iconCls="icon-search">查找</a>
	        </form>
	    </div>
	</div>

2.1.employee.js

var itsource={
    //查询数据
    search:function () {
        //需要先引入 jquery.serializejson.js 才可以使用这个方法
        var params = searchForm.serializeJSON();
        employeeGrid.datagrid('load',params);
    },
    add:function () {
      //添加数据(弹出添加的模态框)
    },
    edit:function () {
       //修改数据(弹出修改的模态框)
    },
    del:function () {
       //删除数据
    }, 
    save:function () {
       //保存数据
    }
}

三、后台准备

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);
}

四、前台准备

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

五、数据丢失

让两个方法产生关联是@ModelAttribute(“editEmployee”),方法beforeEdit返回的 dbEmployee 就是update方法中的 emplloyee对象

@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());
        }
    }