项目搭建+删除(单/批)

一 : 删除没有单独的页面,在列表页面写

二 : 删除在列表的页面

1.删除(单/双)的按钮

        ① : 在列表文档就绪函数的ajax里面,成功回调函数追加数据里写删除按钮

                注意点 : 删除/修改/回显都是根据id来的,记得传id

        ② : 批删给批删按钮,定义批删的方法

one : 示例(单删) : 

//循环追加表数据
                    for (let x of arr) {
                        $("#table").append(`
                        <tr>
                           <td>
                                <input type="checkbox" class="ck" value="\${x.userId}">
                           </td>
                           <td>\${x.userId}</td>
                           <td>\${x.userName}</td>
                           <td>\${x.userState==0?'启用':'禁用'}</td>
                           <td>
                            <img src="/file/showImg?imgUrl=\${x.imgUrl}" alt="" height="100" width="75">
                            </td>
                           <td>\${x.userDel}</td>
                           <td>\${x.userTime}</td>
                           <td>
                                <input type="button" value="删除" onclick="delOne(\${x.userId})">
                                <input type="button" value="修改" onclick="userUpd(\${x.userId})">
                           </td>
                        /tr>
                        `)
                    }

tow : 示例(批删按钮)

<%--批删按钮--%>
<input type="button" value="批删" onclick="delAll()">

2.给(单删)绑定js事件

        ① : 先判断

        ② : 添加友情提示 : 弹出确认删除的警告框

        ③ : ajax

                        删除走的是路径传参,不用写请求方式,传id

                        删除成功走200,刷新,回列表页面

示例 : 

/**
     * 单删
     */
    function delOne(userId) {
        //判断
        if (!userId){
            alert("请先输入")
            //结束
            return
        }
        if (confirm("确定要删除吗")){
            //ajax
            $.ajax({
                url:"/user/userDel?userId="+userId,
                type:"post",
                dataType: "json",
                success(res) {
                    console.log(res)
                    if (res===200){
                        //刷新
                        location.reload()
                        alert("删除成功")
                        //跳转页面
                        location.href="list.jsp"
                    }
                }
            })
        }
    }

3.给(批删)写js事件

        ① : 定义数组

        ② : 获取选中的复选框

        ③ : 获取选中复选框的值

        ④ : 添加进数组里

        ⑤ : 将数组转换成字符串

        ⑥ : 调用单删的方法

//批删
    function delAll() {
        //定义数组
        let arr=[];
        //获取选中的复选框
        $(".ck:checked").each(function () {
            //获取被选中的复选框的值
            let userId =$(this).val()
            //添加进数组里
            arr.push(userId)
        })
        //将数组转字符串
        let s = arr.join(",");
        //调用单删除方法
        delOne(s)
    }

4.全选/全不选

//全选/全不选
    $(document).on('click',"#check",function () {
        $('.ck').prop("checked",this.checked)
    })

 三 : 删除的Controller

1. 接参 : 接路径传参传过来的id

2. 传给service 带着id传过去

3. 响应 200

        注意点 : 单删/批删走一个Controller,写一个就可以了

示例 : 

/**
     * 删除
     */
    protected void userDel(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接参
        String userId = req.getParameter("userId");
        //传给service
        service.userDel(userId);
        //响应
        resp.getWriter().println(JSONObject.toJSONString(200));
    }

四 : 删除service层

1.调用dao层方法,处理返回值 (单/批走一个service)

/**
     * 删除
     * @param userId
     */
    @Override
    public void userDel(String userId) {
        //调用方法
        userDao.userDel(userId);
    }

五 : dao层

1.定义sql    2.执行sql

                ① : 单删的sql语句

/**
     * 删除
     * @param userId
     */
    @Override
    public void userDel(String userId) {
        //定义sql  in ("+userId+") 
        String sql="UPDATE t_user SET user_del=1 WHERE user_id=? ";
        //打印
        System.out.println(sql);
        //执行sql
        baseUpdate(sql,userId);
    }

                ② : 批删的sql语句

/**
     * 删除
     * @param userId
     */
    @Override
    public void userDel(String userId) {
        //定义sql
        String sql="UPDATE t_user SET user_del=1 WHERE user_id in ("+userId+") ";
        //打印
        System.out.println(sql);
        //执行sql
        baseUpdate(sql);
    }