AI 摘要

本文记录 Spring Boot + JSP 车辆投诉系统开发要点：在 IndexController 新增 @PostMapping("/delete/{id}") 实现 AJAX 删除；前端 index.jsp 用 jQuery 弹出确认并刷新列表。随后集成 PageHelper，Service 层返回 PageInfo，Controller 按 brandId、pageNo 分页查询；视图添加隐藏页码、品牌筛选及首页/末页按钮，实现分页效果。

此摘要根据文章内容自动生成，仅用于文章内容的解释与总结

开发笔记

修改车辆质量投诉信息控制器（package.controller.IndexController），编写删除车辆质量投诉信息的请求处理方法。

@Controller
public class IndexController {

    // ...

    @PostMapping("/delete/{id}")
    @ResponseBody
    public String delete(@PathVariable Integer id) {
        vehiclecomplaintsService.deleteByPrimaryKey(id);

        return "1";
    }

}

修改车辆质量投诉信息列表的视图页面（webapp/WEB-INF/jsp/index.jsp），绑定按钮点击事件触发删除方法。

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <!-- ... -->
</head>
<body>
<!-- ... -->
<table>
    <!-- ... -->
    <tbody>
    <c:forEach items="${tsList}" var="item">
        <tr>
            <!-- ... -->
            <td>
                <!-- ... -->
                <button onclick="javascript:deleted(${item.id})">删除</button>
            </td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<script src="/jquery.min-1.9.1.js"></script>
<script>
    // 定义删除方法，传入要删除的数据id
    function deleted(id) {
        if(confirm("是否要删除该数据")) {
            $.ajax({
                url: "/delete/" + id,
                type: "POST",
                success: function (data) {
                    if (data == "1") {
                        alert("删除成功");
                        window.location.reload();
                    } else {
                        alert("删除失败")
                    }
                },
                error: function () {
                    alert("请求失败");
                }
            })
        }
    }
</script>
</body>
</html>

运行项目，查看效果。

修改 pom.xml，引入 PageHelper 分页插件的依赖。

<dependency>
    <groupId>com.github.pagehelper</groupId>
    <artifactId>pagehelper-spring-boot-starter</artifactId>
    <version>1.4.5</version>
</dependency>

修改车辆质量投诉信息业务逻辑接口（package.service.VehiclecomplaintsService）和车辆质量投诉信息业务逻辑接口实现类（package.service.VehiclecomplaintsServiceImpl），优化查询车辆质量投诉信息列表的方法。

@Service
public class VehiclecomplaintsServiceImpl implements VehiclecomplaintsService {

    // ...

    @Override
    public PageInfo<Vehiclecomplaints> getList(Integer brandId, Integer pageNo) {
        // 调用分页插件开始分页，传入页码和页大小
        PageHelper.startPage(pageNo, 3);

        // 查询全部数据列表
        List<Vehiclecomplaints> tsList = vehiclecomplaintsMapper.getList(brandId);

        // 实例化分页对象，传入全部数据列表实现分页
        PageInfo<Vehiclecomplaints> pageInfo = new PageInfo<>(tsList);

        // 返回分页对象
        return pageInfo;
    }

}

修改车辆质量投诉信息控制器（package.controller.IndexController），为查询车辆质量投诉信息列表的视图方法添加分页查询。

@Controller
public class IndexController {

    // ...

    @GetMapping("/")
    public String index(Model model,
                        @RequestParam(name = "pageNo", required = false, defaultValue = "1") Integer pageNo,
                        @RequestParam(name = "brandId", required = false) Integer brandId) {
        // 调用Service层查询分页数据（分页对象）
        model.addAttribute("tsList", vehiclecomplaintsService.getList(brandId, pageNo));

        // ...
    }

    // ...

}

修改车辆质量投诉信息列表的视图页面（webapp/WEB-INF/jsp/index.jsp），编写分页查询按钮。

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <!-- ... -->
</head>
<body>
<!-- ... -->
<!-- 条件查询表单 -->
<form action="/" method="GET">
    <select name="brandId">
        <option value="">请选择投诉品牌</option>
        <!-- ... -->
    </select>

    <!-- 条件查询中添加一个隐藏表单域，表示要查询的页码 -->
    <input name="pageNo" value="${tsList.pageNum}" hidden="hidden">
    <button type="submit">查询</button>
</form>
<table>
    <!-- ... -->
    <tbody>
    <!--
        c:forEach：遍历列表
        items：要遍历的列表，使用$选择器选择模型中保存的列表
        var：列表中元素的别名
        遍历时，注意数据的属性名与相应实体类的属性名一致

        实现分页功能时，要遍历的列表需要从分页对象中取出
    -->
    <c:forEach items="${tsList.list}" var="item">
        <!-- ... -->
    </c:forEach>
    </tbody>
</table>
<br>
<!--
    页码数据保存在分页对象PageInfo中
    分页按钮点击后触发分页方法
    可以实现条件判断，动态显示上一页下一页按钮
-->
<button onclick="javascript: pager(1)">首页</button>
<c:if test="${tsList.hasPreviousPage}">
    <button onclick="javascript: pager(${tsList.pageNum-1})">上一页</button>
</c:if>
<c:if test="${tsList.hasNextPage}">
    <button onclick="javascript: pager(${tsList.pageNum+1})">下一页</button>
</c:if>
<button onclick="javascript: pager(${tsList.pages})">末页</button>
<button>当前第${tsList.pageNum}页/共${tsList.pages}页/共${tsList.total}条数据</button>

<script src="/jquery.min-1.9.1.js"></script>
<script>
    // 定义分页方法
    function pager(pageNo) {
        // 设置条件查询表单中的页码
        $("input[name=pageNo]").val(pageNo);
        // 提交条件查询表单
        $("form").submit();
    }

    // ...
</script>
</body>
</html>

运行项目，查看效果。