Spring Boot + JSP 实现车辆质量投诉管理系统之 02-开发笔记（2）
AI 摘要
本文记录 Spring Boot + JSP 车辆质量投诉管理系统的增删改实现。IndexController 新增 /add、/update/{id} 的 GET 与 POST 映射，分别返回 add.jsp、update.jsp 并处理 Ajax 提交；JSP 页面通过 jQuery 完成非空校验与异步保存，支持品牌下拉与数据回显；列表页按钮跳转，实现投诉信息新增与修改闭环。
开发笔记
修改车辆质量投诉信息控制器（package.controller.IndexController），编写新增车辆质量投诉信息的视图方法。
@Controller
public class IndexController {
// ...
@GetMapping("/add")
public String add(Model model) {
model.addAttribute("brandList", brandService.getList());
return "add";
}
}新建添加车辆质量投诉信息的视图页面（webapp/WEB-INF/jsp/add.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>
投诉问题：<input type="text" id="problem"><br>
投诉品牌：<select id="brandId">
<option value="">请选择投诉品牌</option>
<c:forEach items="${brandList}" var="item">
<option value="${item.brandid}">${item.brandname}</option>
</c:forEach>
</select><br>
投诉状态：<select id="status">
<option value="">请选择投诉状态</option>
<option value="0">信息审核</option>
<option value="1">厂家受理</option>
</select><br>
投诉车系：<input type="text" id="cartype"><br>
<!-- 按钮类型必须是button普通按钮，否则会直接提交表单 -->
<button type="button">提交</button>
</form>
<!-- 导入jQuery -->
<script src="/jquery.min-1.9.1.js"></script>
<script>
$("button").click(function () {
// 非空校验
if ($("#problem").val() == "") {
alert("请输入投诉问题")
return
} else if ($("#brandId").val() == "") {
alert("请选择投诉品牌")
return
} else if ($("#status").val() == "") {
alert("请选择投诉状态")
return
} else if ($("#cartype").val() == "") {
alert("请输入投诉车系")
return
}
// 发送Ajax请求
$.ajax({
url: "/add",
type: "POST",
data: {
problem: $("#problem").val(),
brandId: $("#brandId").val(),
status: $("#status").val(),
cartype: $("#cartype").val()
},
success: function (data) {
if (data == "1") {
alert("添加成功");
window.location.href = "/";
} else {
alert("添加失败");
}
},
error: function () {
alert("请求失败")
}
})
})
</script>
</body>
</html>修改车辆质量投诉信息控制器（package.controller.IndexController），编写新增车辆质量投诉信息的请求处理方法。
@Controller
public class IndexController {
// ...
@PostMapping("/add")
@ResponseBody // 返回文本而不是视图
public String add(@RequestParam("problem") String problem,
@RequestParam("brandId") Integer brandId,
@RequestParam("status") Integer status,
@RequestParam("cartype") String cartype) {
// 将表单数据保存到实体类
Vehiclecomplaints vehiclecomplaints = new Vehiclecomplaints();
vehiclecomplaints.setProblem(problem);
vehiclecomplaints.setBrandid(brandId);
vehiclecomplaints.setStatus(status);
vehiclecomplaints.setCartype(cartype);
// 设置投诉时间
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
vehiclecomplaints.setComplainstime(sdf.format(new Date()));
// 调用Service层保存数据
vehiclecomplaintsService.insertSelective(vehiclecomplaints);
// 返回新增结果
return "1";
}
}修改车辆质量投诉信息列表的视图页面（webapp/WEB-INF/jsp/index.jsp），绑定按钮点击事件实现链接跳转。
<button onclick="javascript:location.href='/add'">添加投诉</button>运行项目，查看效果。
修改车辆质量投诉信息控制器（package.controller.IndexController），编写修改车辆质量投诉信息的视图方法。
@Controller
public class IndexController {
// ...
// URL使用RESTFul风格
// 在URL中使用{xx}设置参数占位符，在方法中使用@PathVariable注解获取占位符参数
@GetMapping("/update/{id}")
public String update(@PathVariable("id") Integer id, Model model) {
model.addAttribute("brandList", brandService.getList());
// 根据id查询车辆质量投诉信息并保存到模型对象中
model.addAttribute("ts", vehiclecomplaintsService.selectByPrimaryKey(id));
return "update";
}
}新建修改车辆质量投诉信息的视图页面（webapp/WEB-INF/jsp/update.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>
<!-- 修改表单需要实现数据回显 -->
投诉问题：<input type="text" id="problem" value="${ts.problem}"><br>
投诉品牌：<select id="brandId">
<option value="">请选择投诉品牌</option>
<c:forEach items="${brandList}" var="item">
<option value="${item.brandid}" <c:if test="${ts.brandid == item.brandid}">selected</c:if>>${item.brandname}</option>
</c:forEach>
</select><br>
投诉状态：<select id="status">
<option value="">请选择投诉状态</option>
<option value="0" <c:if test="${ts.status == 0}">selected</c:if>>信息审核</option>
<option value="1" <c:if test="${ts.status == 1}">selected</c:if>>厂家受理</option>
</select><br>
投诉车系：<input type="text" id="cartype" value="${ts.cartype}"><br>
<button type="button">提交</button>
</form>
<script src="/jquery.min-1.9.1.js"></script>
<script>
$("button").click(function () {
// 非空校验
if ($("#problem").val() == "") {
alert("请输入投诉问题")
return
} else if ($("#brandId").val() == "") {
alert("请选择投诉品牌")
return
} else if ($("#status").val() == "") {
alert("请选择投诉状态")
return
} else if ($("#cartype").val() == "") {
alert("请输入投诉车系")
return
}
// 发送Ajax请求
$.ajax({
url: "/update/${ts.id}", // 拼接Ajax请求的URL
type: "POST",
data: {
problem: $("#problem").val(),
brandId: $("#brandId").val(),
status: $("#status").val(),
cartype: $("#cartype").val()
},
success: function (data) {
if (data == "1") {
alert("修改成功");
window.location.href = "/";
} else {
alert("修改失败");
}
},
error: function () {
alert("请求失败")
}
})
})
</script>
</body>
</html>修改车辆质量投诉信息控制器（package.controller.IndexController），编写修改车辆质量投诉信息的请求处理方法。
@Controller
public class IndexController {
// ...
@PostMapping("/update/{id}")
@ResponseBody
public String update(@PathVariable("id") Integer id,
@RequestParam("problem") String problem,
@RequestParam("brandId") Integer brandId,
@RequestParam("status") Integer status,
@RequestParam("cartype") String cartype) {
// 将表单数据保存到实体类
Vehiclecomplaints vehiclecomplaints = new Vehiclecomplaints();
vehiclecomplaints.setId(id); // 保存要修改的数据的id到实体类中
vehiclecomplaints.setProblem(problem);
vehiclecomplaints.setBrandid(brandId);
vehiclecomplaints.setStatus(status);
vehiclecomplaints.setCartype(cartype);
// 调用Service层修改数据
vehiclecomplaintsService.updateByPrimaryKeySelective(vehiclecomplaints);
// 返回修改结果
return "1";
}
}修改车辆质量投诉信息列表的视图页面（webapp/WEB-INF/jsp/index.jsp），绑定按钮点击事件实现链接跳转。
<button onclick="javascript: location.href='/update/${item.id}'">修改</button>运行项目，查看效果。
