2022/10/16作业实现前端和后端的数据交换的作业（增加删除功能）

1、在昨天的代码基础上，今天增加一个删除功能

(提示：小白请先完成2022/10/15发布的实现查询和增加功能，以及相关的目录配置）

第一次作业：http://t.csdn.cn/Pp0Et

1、 顺着昨天的代码继续向下编写。在java/com/mapper目录下

在BrandMapper里面编写新的抽象方法BrandByIdDelete

代码：

    // 根据id删除数据
    int BrandByIdDelete( @Param("id") int id);

和昨天的代码整合后：将有3个抽象方法

2、找到resource/com/mapper里面的 BrandMapper.xml文件，实现相应的删除SQL语句

代码：

    <!-- 指定 id 删除数据-->
    <delete id="BrandByIdDelete">
        delete
        from tb_brand
        where id = #{id};

    </delete>

将代码与昨天的代码整合后，将会有3个实现SQL语句的方法

3、在完成了删除的SQL语句后,推荐使用测试类去测试，看一下 通过 id 去删除数据 这一步是否存在错误

编写测试类

运行后，如果控制台返回值为1，并且数据库这个id对应的数据被删除，那就说明我们写的删除的SQL语句没有问题。现在开始处理前后端的数据传输。

4、找到webapp目录下的brand.html文件

进行下面的修改，这样我们就把前端获取到的id返回给后端。

这一部分的代码：

        for (let i = 0; i < brands.length; i++) {
            let brand = brands[i];

            // 获取id
            let id = brand.id;
            // 拼接（GET）
            let DeleteUrl = "http://localhost:8080/webDemo7_war/brandDeleteServlet?id=" + id;

            tableDates +=
                " <tr align=\"center\">\n" +
                "        <td>" + (i + 1) + "</td>\n" +
                "        <td>" + brand.brandName + "</td>\n" +
                "        <td>" + brand.companyName + "</td>\n" +
                "        <td>" + brand.ordered + "</td>\n" +
                "        <td>" + brand.description + "</td>\n" +
                "        <td>" + brand.status + "</td>\n" +
                "\n" +
                "        <td><a href=\"#\">修改</a> <a href=" + DeleteUrl + ">删除</a></td>\n" +
                "    </tr>";
        }
        document.getElementById("brandTable").innerHTML = tableDates;
    });

5、之后，我们开始处理从前端发过来的请求(id)

找到main/java/com/web目录，在里面新建立BrandDeleteServletl类

代码：

package com.web;

import com.service.BrandService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/brandDeleteServlet")
public class BrandDeleteServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 接收到前端的数据id值
        String id = req.getParameter("id");
        // 将String 类型的 id 强转成 Integer
        Integer integer = Integer.valueOf(id);
        Integer brandByIdDelete = BrandService.BrandByIdDelete(integer);
        if (brandByIdDelete != null ) {
            // 重定向 （这里的地址根据自己的brand.html的地址去写）
            resp.sendRedirect("http://localhost:8080/webDemo7_war/brand.html");
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }
}

6、如过以上步骤都成功完成，那么就可以进行最终的效果测试了

启动项目。。
(这一点我要说一下，利用idea里面的tomcat运行，和使用tomcat插件运行的路径可能会有所不同，注意观察地址栏的变化)

运行后，进入brand.html,页面如下，内容是根据自己的数据查询出来的

当我们点击删除按钮后，会响应到后端，进行数据的删除，再通过重定位，回到当前的页面。页面如下

😄😄😄😄😄
恭喜，在这里，我们又完成了一个小功能。