2021-07-21（idea版）尚硅谷项目尚筹网学习第十天

今天我们来做Role的更新操作

1、role的更新逻辑

        ①将模态框抽取成一个页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="editModal" class="modal fade" tabindex="-1" role="dialog">
    <div  class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">系统弹窗</h4>
            </div>
            <div class="modal-body">
                <form class="form-signin" role="form">
                    <div class="form-group has-success has-feedback">
                        <input type="text" class="form-control" name="roleName"
                               placeholder="请输入角色名称" autofocus>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="updateBtn" type="button" class="btn btn-success">更新</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->

        ②在role-page.jsp中引入。

<%@include file="/WEB-INF/modal-role-add.jsp" %>
<%@include file="/WEB-INF/modal-role-edit.jsp" %>
<%@include file="/WEB-INF/modal-role-confirm.jsp" %>

        ③更新操作的js

                这里我们使用了jQuery里面的on函数，因为这三个按钮是动态生成的，可以用on将单机时间保存上去。

                此时我们通过Ajax发送：类路径/role/update.json这个请求。

                并将需要更新的Role的Id和name值通"key":"value"的方式传递给后端。

                 "data": {
                    "id":window.roleId,
                    "name":roleName
                },

  /*使用jQuery对象的on()函数可以解决上面问题
        * ①首先找到所有”动态生成“的元素所依附的”静态“元素
        * ②on()函数的第一个参数是事件类型
        * ③on()函数第二个参数是选择器
        * ③on()函数第三个参数是事件的响应函数
        * */
        $("#rolePageBody").on("click",".pencilBtn",function (){

            // 生成模态框
            $("#editModal").modal("show");

            // 获得表格中当前行的角色名称、
            var roleName = $(this).parent().prev().text();

            window.roleId = this.id;

            $("#editModal [name=roleName]").val(roleName);
        });

        $("#updateBtn").click(function (){

            // 从文本框中取出name的值
            var roleName = $("#editModal [name=roleName]").val();
            $.ajax({
                "url":"role/update.json",
                "type":"post",
                "data": {
                    "id":window.roleId,
                    "name":roleName
                },
                "dataType":"json",
                "success":function (response){
                    var result = response.result;
                    if (result == "SUCCESS"){
                        layer.msg("操作成功");

                        //重新加载分页
                        generatePage();
                    }
                    if (result == "FAILED"){
                        layer.msg("操作失败"+response.message);
                    }
                },
                "error":function (response){
                    layer.msg(response.status+""+response.statusText);
                }

            });
            // 关闭模态框
            $("#editModal").modal("hide");
        });

        ③controller：

                @RequestMapping(value = "/role/update.json")

                spring帮助我们自动封装Role对象，然后以ResultEntity<T>统一整个ajax的数据。

// 更新逻辑
    @ResponseBody
    @RequestMapping(value = "/role/update.json")
    public ResultEntity<PageInfo<String>> updateRole(Role role){

        roleService.updateRole(role);

        return ResultEntity.successWithoutData();

    }

        ④service-api 和 serviceImpl

// 更新    service-api
    void updateRole(Role role);

//更新role     serviceImpl
    @Override
    public void updateRole(Role role) {
        roleMapper.updateByPrimaryKey(role);
    }

测试：

        我们将role4 更改为 tom4

        可以看到点击更新按钮后有数据的回显。

         修改成功，弹出操作成功窗口。

 2、role的删除逻辑

         ①抽取删除模态框，并在主页面引入

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="confirmModal" class="modal fade" tabindex="-1" role="dialog">
    <div  class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">系统弹窗</h4>
            </div>
            <div class="modal-body">
            </div>
            <h4>请确认是否要删除下列角色：</h4>
            <div id="roleNamediv"></div>
            <div class="modal-footer">
                <button id="removeBtn" type="button" class="btn btn-primary">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->

               ②删除逻辑的js

                        my-role.js中的代码；

// 显示删除时确认的模态框
function showConfirmModal(roleArray){

    // 打开模态框
    $("#confirmModal").modal("show");

    // 清除原来的数据
    $("#roleNamediv").empty();

    // 创建全局角色Id
    window.roleIdArray = [];

    // 遍历roleArray数组
    for (var i = 0; i < roleArray.length; i++){
        var role = roleArray[i];
        var roleName = role.roleName;
        var roleId = role.roleId;

        // 调用push()方法
        window.roleIdArray.push(roleId);
        $("#roleNamediv").append(roleName+"<br/>")
    }
}

                page中的代码；

                        可以看到我们的删除逻辑分两种情况，单个删除和多个删除。

                        逻辑分析：我们将需要删除的Role的Id用一个数组存放起来传递给后端。

                                如我们需要删除1号传递数组[1]，如果需要删除1，2，3，4号则传递数                                    组[1,2,3,4]。

                        此时我们使用ajax发出请求：

                             role/remove/by/role/id/array.json

                             并将选中的id的数组传递过去，我们将数组封装在requestBody变量里面；

                                "data":requestBody,

 // 删除
        $("#removeBtn").click(function (){

            var requestBody = JSON.stringify(window.roleIdArray);

            $.ajax({
                "url":"role/remove/by/role/id/array.json",
                "type":"post",
                "data":requestBody,
                "contentType":"application/json;charset=UTF-8",
                "dataType":"json",
                "success":function (response){
                    var result = response.result;
                    if (result == "SUCCESS"){
                        layer.msg("操作成功");

                        //重新加载分页
                        generatePage();
                    }
                    if (result == "FAILED"){
                        layer.msg("操作失败"+response.message);
                    }
                },
                "error":function (response){
                    layer.msg(response.status+""+response.statusText);
                }
            });
            // 关闭模态框
            $("#confirmModal").modal("hide");
        });

        // 9、给单条删除绑定单机响应函数
        $("#rolePageBody").on("click",".removeBth",function (){

            // 获得表格中当前行的角色名称、
            var roleName = $(this).parent().prev().text();

            // 创建role对象存入数组
            var roleArray = [{
                roleId:this.id,
                roleName:roleName
            }];

            // 生成模态框
            showConfirmModal(roleArray);

        });

        // 10、给总的checkBox增加单击事件
        $("#summaryBox").click(function (){

            // 获取当前多选框自身的状态
            var currentStatus = this.checked;

            // 用当前多选框去设置其他的多选框
            $(".itemBox").prop("checked",currentStatus);

        });

        // 全选和全不选的反向操作
        $("#rolePageBody").on("click",".itemBox",function (){

            // 获取当前已经选中的box数量
            var checkedBoxCount = $(".itemBox:checked").length;

            // 获取全部box的数量
            var totalBoxCount = $(".itemBox").length;

            $("#summaryBox").prop("checked", checkedBoxCount == totalBoxCount);
        });

        // 11、批量删除按钮单击事件
        $("#batchRemoveBtn").click(function (){

            // 创建数组对象来存放后面获取到的角色对象
            var roleArray = [];

            // 获取当前已经被勾选的
            $(".itemBox:checked").each(function (){

                // 使用遍历得到多选框
                var roleId = this.id;

                // 通过dom操作获取名称
                var roleName = $(this).parent().next().text();

                // 将id和名字放入数组中
                roleArray.push([{
                    "roleId":roleId,
                    "roleName":roleName
                }]);
            });

            // 判断数组是否为0
            if (roleArray.length == 0){
                layer.msg("请至少选择一个进行删除");
                return ;
            }

            showConfirmModal(roleArray);

        });

                ③controller

                        使用@RequestBody List<Integer> roleList，接收前端传来需要删除的id数组。

                

// 删除逻辑
    @ResponseBody
    @RequestMapping(value = "/role/remove/by/role/id/array.json")
    public ResultEntity<String> removeByRoleIdArray(@RequestBody List<Integer> roleList){

        roleService.removeRole(roleList);

        return ResultEntity.successWithoutData();
    }

                        ④service-api 和 serviceImpl

                                使用RoleExample的形式进行删除。

// 删除    service-api
    void removeRole(List<Integer> roleList);

// 删除    serviceImpl
    @Override
    public void removeRole(List<Integer> roleList) {

        RoleExample example = new RoleExample();

        RoleExample.Criteria criteria = example.createCriteria();

        criteria.andIdIn(roleList);

        roleMapper.deleteByExample(example);

    }

测试：

        ①单个删除

                删除tom4。

                点击删除按钮。信息回显（界面做的有点丑）

 

                删除成功 ！

        ②多个删除 

                删除role16，role17，role18三个role。点击大按钮删除。

                信息回显。

删除成功！