基于ajax、json、Restful、SSM的CRUD

基于SSM的ajax、json、jsp，Reslful风格编写crud的一些思想

首先基础是使用Mybatis的逆向工程将要使用的Mapper和Bean等基本的东西创建出来
其中Mapper层和Service层的对象都是用Spring在托管，实现@Autowired来代理

一、增加一个对象数据

首先是service层用Mapper的insertSelective方法，会将传进去的对象添到数据库中

    public void saveEmp(Employee employee) {
        employeeMapper.insertSelective(employee);
    }

使用Controller层来调用相应的service对象

 @RequestMapping(value = "/emp", method = RequestMethod.POST)
    @ResponseBody
    public Msg saveEmp(Employee employee) {
            employeeService.saveEmp(employee);
            return Msg.success();
    }

public class Msg {
    // 状态码
    private int code;
    // 提示信息
    private String msg;
    // 用户返回给浏览器的数据
    private Map<String, Object> extend = new HashMap<>();

@RequestMapping：
指定资源访问路径和访问时使用的请求数据发送的方法
@ResponseBody：
将java对象转为json格式的数据。@responseBody注解的作用是将controller的方法返回的对象通过适当的转换器转换为指定的格式之后，写入到response对象的body区，通常用来返回JSON数据或者是XML数据。在使用此注解之后不会再走视图处理器，而是直接将数据写入到输入流中，他的效果等同于通过response对象输出指定格式的数据。
在类上用@RestController，其内的所有方法都会默认加上@ResponseBody，也就是默认返回JSON格式。如果某些方法不是返回JSON的，就只能用@Controller了吧，这也是它们俩的区别。

使用@ResponseBody注解之前要导入相应的maven依赖（jackson）

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-core</artifactId>
    <version>2.4.3</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.4.3</version>
</dependency>

二、查询所有的数据

首先前端发送ajax请求

    function to_page(pn) {
        $.ajax({
            url: "${APP_PATH}/emps",
            data: "pn=" + pn,
            type: "GET",
            success: function (result) {
                // 解析并显示员工数据
                build_emps_table(result);
                // 解析并且显示分页信息
                build_page_info(result);
                build_page_nav(result);
            }
        });
    }

这里的 pn就是页码，页码就是要向后端发送页码请求，这个pn要和后端调用的参数的pn是一样的，这样就可以从前端的信息自动传递到后端。

    function build_emps_table(result) {
        // 清空table（每次查询之前都需要将之前的内容给清空）
        $("#emps_table tbody").empty();
        var emps = result.extend.pageInfo.list;
        $.each(emps, function (index, item) {
            var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>")
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genterTd = $("<td></td>").append(item.gender == "M" ? "男" : "女");
            var emailTd = $("<td></td>").append(item.email);
            var deptNameTd = $("<td></td>").append(item.department.deptName);
            var editBtn = $("<button></button>").addClass("btn btn-success btn-sm edit_btn")
                .append("<span></span>").addClass("glyphicon glyphicon-pencil").append("编辑");

            // 给编辑按钮添加自定义的属性，来表示当前员工的id
            editBtn.attr("edit-id", item.empId);

            var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                .append("<span></span>").addClass("glyphicon glyphicon-trash").append("删除");

            // 给删除按钮添加自定义的属性，来表示当前员工的id
            delBtn.attr("delete-id", item.empId);

            var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);

            $("<tr></tr>").append(checkBoxTd)
                .append(empIdTd)
                .append(empNameTd)
                .append(genterTd)
                .append(emailTd)
                .append(deptNameTd)
                .append(btnTd)
                .appendTo("#emps_table tbody");
        })
    }

请求出现的是一个json文件格式的数据

在每一个信息的编辑和删除的btn上面要加入相应信息的id，用来根据id进行一些相应的操作。

  //    需要导入jackon包
    @RequestMapping("/emps")
    //    将Java的对象转换成json格式
    @ResponseBody
    public Msg getEmpsWithJson(@RequestParam(value = "pn", defaultValue = "1") Integer pn) {
        PageHelper.startPage(pn, 5);
        List<Employee> all = employeeService.getAll();
        PageInfo pageInfo = new PageInfo(all, 5);
        return Msg.success().add("pageInfo", pageInfo);
    }

pageInfo是一个分页的插件，使用需要实现导入相应的maven依赖

   <!--引入pageHelper分页插件 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.0.0</version>
        </dependency>

接下来调用相应的Service层

    public List<Employee> getAll() {
        EmployeeExample example = new EmployeeExample();
        example.setOrderByClause("emp_id");
        return employeeMapper.selectByExampleWithDept(example);
    }

这里是根据表的主键来排序的，因为在查询的时候使用了左外连接，导致数据的排序混乱，因此在这里添加了排序。加左外连接的目的就是在查询emp员工数据的同时可以查询到相应的dept的数据。

<select id="selectByExampleWithDept" resultMap="WithDeptResultMap">
        select
        <if test="distinct">
            distinct
        </if>
        <include refid="Base_Column_List_With_Dept"/>
        from tbl_emp
        left join tbl_dept
        on tbl_emp.d_id=tbl_dept.dept_id
        <if test="_parameter != null">
            <include refid="Example_Where_Clause"/>
        </if>
        <if test="orderByClause != null">
            order by ${orderByClause}
        </if>
    </select>

三、根据id修改一个数据

点击编辑

首先在之前就将对象的id属性添加到了相应的编译按钮上面，自定义了一个属性来保存这个数据
再在按钮上面添加了一个edit-btn的一个类，用来添加点击事件

        // 给编辑按钮添加自定义的属性，来表示当前员工的id
            editBtn.attr("edit-id", item.empId);

点击按钮，发送ajax请求

    $(document).on("click", ".edit_btn", function () {
		// 首先将之前出现的错误或者正确的输入框的样式给清除掉
        $("#email_update_input").parent().removeClass("has-success has-error");
        $("#email_update_input").next("span").text("");
        // 查出信息，并且显示信息列表
        getDepts("#dept_update_select");
        getEmp($(this).attr("edit-id"));
        // 将员工的id传给模态框的更新按钮
        $("#emp_update_btn").attr("edit-id", $(this).attr("edit-id"));
        // 显示模态框
        $("#empUpdateModal").modal();
    });

显示部门信息在下拉列表

    // 显示部门信息在下拉列表
    function getDepts(ele) {

        $(ele).empty();
        //{"code":100,"msg":"处理成功","extend":{"depts":[{"deptId":1,"deptName":"开发部"},{"deptId":2,"deptName":"测试部"}]}}
        $.ajax({
                url: "${APP_PATH}/depts",
                type: "GET",
                success: function (result) {
                    // 显示部门信息在下拉列表
                    $.each(result.extend.depts, function () {
                        var optionEle = $("<option></option>").append(this.deptName).attr("value", this.deptId);
                        optionEle.appendTo(ele);
                    });
                }
            }
        );
    }

获得当前的员工的数据，并且填写在这个模态框中

    // 查询员工的信息并且显示
    function getEmp(id) {
        $.ajax({
            url: "${APP_PATH}/emp/" + id,
            type: "GET",
            success: function (result) {

                var empEle = result.extend.emp;
                $("#empName_update_static").text(empEle.empName);
                $("#email_update_input").val(empEle.email);
                $("#empUpdateModal input[name=gender]").val([empEle.gender]);
                $("#empUpdateModal select").val([empEle.dId]);
            }
        });
    }

点击保存

点击保存以后，首先验证信息是否正确，然后发送一个ajax请求来将修改以后的信息保存进数据库，这个保存按钮上有这个信息的di

// 点击更新员工的信息
    $("#emp_update_btn").click(function () {
        ///  清除当前元素的校验状态
        // 验证邮箱是否合法
        var email = $("#email_update_input").val();
        var regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

        if (!regEmail.test(email)) {
            show_validate_msg("#email_update_input", "error", "邮箱的格式不正确");
            return false;
        }
        else {
            show_validate_msg("#email_update_input", "success", "");
        }

        // 发送ajax请求，保存员工的数据
        $.ajax({
            url: "${APP_PATH}/emp/" + $(this).attr("edit-id"),
            type: "PUT",
            data: $("#empUpdateModal form").serialize(),
            success: function (result) {
                // 关闭对话框
                $("#empUpdateModal").modal("hide");
                // 回到本页面
                to_page(currentPage);
            }
        })
    });

调用controller层的相应的service处理请求

@ResponseBody
    @RequestMapping(value = "/emp/{empId}", method = RequestMethod.PUT)
    public Msg saveEmp(Employee employee) {
        employeeService.updateEmp(employee);
        return Msg.success();
    }

接着调用Service中的Mapper

 public void updateEmp(Employee employee) {
        employeeMapper.updateByPrimaryKeySelective(employee);
    }

调用mapper层的是有选择性的更新信息

<update id="updateByPrimaryKeySelective" parameterType="com.itlf.bean.Employee">
        update tbl_emp
        <set>
            <if test="empName != null">
                emp_name = #{empName,jdbcType=VARCHAR},
            </if>
            <if test="gender != null">
                gender = #{gender,jdbcType=CHAR},
            </if>
            <if test="email != null">
                email = #{email,jdbcType=VARCHAR},
            </if>
            <if test="dId != null">
                d_id = #{dId,jdbcType=INTEGER},
            </if>
        </set>
        where emp_id = #{empId,jdbcType=INTEGER}
    </update>

四、根据id删除单个信息

首先和修改一样，先将每一个删除按钮上添加一个本信息对应的自定义属性对应id，在添加一个class用来绑定这个按钮的点击事件
先绑定点击事件，发送删除的ajax请求，在发送请求之前要先来一个confirm提示是否要删除，确定以后再发送ajax请求

// 删除单个员工的信息
    $(document).on("click", ".delete_btn", function () {
        // 弹出确认删除的按钮
        var empName = $(this).parents("tr").find("td:eq(2)").text();
        if (confirm("确认删除" + empName + "吗？")) {
            $.ajax({
                url: "${APP_PATH}/emp/" + $(this).attr("delete-id"),
                type: "DELETE",
                success: function (result) {
                    alert(result.msg);
                    to_page(currentPage);
                }
            });
        }
    });

find(“td:eq(2)”) 这句话的意思是找到这些 td标签 的第三个元素

controller层的请求处理

@RequestMapping(value = "/emp/{id}", method = RequestMethod.DELETE)
    @ResponseBody
    public Msg deleteEmpById(@PathVariable("id") String id) {
            Integer id_int = Integer.valueOf(id);
            employeeService.deleteEmp(id_int );
        return Msg.success();
    }

这里将id定义为String类型是为了后面的多个删除和单个删除合并为一个方法
调用service层

   public void deleteEmp(Integer id) {
        employeeMapper.deleteByPrimaryKey(id);
    }

五、删除选中的信息

首先得先实现选中的效果
先添加前面的多选框

添加点击事件，点击最上边的要选中下面的所有的

// 删除   全选/全不选
    $("#check_all").click(function () {
        var checked = $(this).prop("checked");
        $(".check_item").prop("checked", checked);
    });

还有就是将下面的所有的都选中以后，最上面的也要选中
可以判断下面有几个选中了的，然后当下面的选中的数量和页面一页显示的记录总数一样了以后，然后将最上面的也选中

    $(document).on("click", ".check_item", function () {
        var checkedLenght = $(".check_item:checked").length;
        var flag = checkedLenght == $(".check_item").length
        $("#check_all").prop("checked", flag);
    });

点击全部删除按钮

 // 点击全部删除
    $("#emp_delete_all_btn").click(function () {
        var empNames = "";
        var del_idstr = "";
        $.each($(".check_item:checked"), function () {
            empNames += $(this).parents("tr").find("td:eq(2)").text() + ",";
            // 员工id字符串
            del_idstr += $(this).parents("tr").find("td:eq(1)").text() + "-";
        });
        // 出去多余的符号
        empNames = empNames.substring(0, empNames.length - 1);
        del_idstr = del_idstr.substring(0, del_idstr.length - 1);
        if (confirm("确认删除" + empNames + "吗？")) {
            // 发送ajax请求
            $.ajax({
                url: "${APP_PATH}/emp/" + del_idstr,
                type: "DELETE",
                success: function (result) {
                    alert(result.msg);
                    to_page(currentPage);
                }
            })
        }
    })

ajax请求地址内容

 @RequestMapping(value = "/emp/{ids}", method = RequestMethod.DELETE)
    @ResponseBody
    public Msg deleteEmpById(@PathVariable("ids") String ids) {
        if (ids.contains("-")) {
            List<Integer> del_ids = new ArrayList<>();
            String[] str_ids = ids.split("-");
            for (String str_id : str_ids) {
                del_ids.add(Integer.parseInt(str_id));
            }
            employeeService.deleteBatch(del_ids);

        } else {
            Integer id = Integer.valueOf(ids);
            employeeService.deleteEmp(id);
        }

        return Msg.success();
    }

调用service层

    public void deleteBatch(List<Integer> ids) {
        EmployeeExample example = new EmployeeExample();
        EmployeeExample.Criteria criteria = example.createCriteria();
        criteria.andEmpIdIn(ids);
        employeeMapper.deleteByExample(example);

    }

完成多条删除