实验十: Spring MVC数据绑定和响应
一、实验目的
1.熟悉简单数据类型的绑定
2.熟悉复杂数据类型的绑定
3.掌握Spring MVC数据绑定的使用
4.掌握Spring MVC的数据响应
5.掌握不同类型返回值的页面跳转
二、实验内容
1.实现默认类型数据绑定、简单数据类型绑定、POJO绑定、自定义类型转换器
2.实现数组绑定、集合绑定、复杂POJO绑定—属性为对象类型的数据绑定
3.JSON数据格式应用
三、实验步骤
1.实现默认类型数据绑定、简单数据类型绑定、POJO绑定、自定义类型转换器
(1)实现默认类型数据绑定
① 在IDEA中创建项目,在pom.xml中引入相关依赖,并在SpringMVC的配置文件spring-mvc.xml中完成相关配置
② 创建处理器类
在src\main\java文件夹中创建com\sun\controller文件夹,在文件夹中创建UserController类
package com.sun.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
@Controller
public class UserController {
@RequestMapping("/getUserId")
public void getUserId(HttpServletRequest request){
String userid=request.getParameter("userid");
System.out.println("userid="+userid);
}
}
运行结果:
启动项目后在浏览器输入http://localhost:8090/sy_ch10/getUserId?userid=1
(2)简单数据类型绑定
修改文件UserController.java,新增getUserNameAndId方法
@RequestMapping("/getUserNameAndId")
public void getUserNameAndId(String username,Integer id){
System.out.println("username"+username+",id"+id);
}
运行结果:
启动项目后在浏览器输入
http://localhost:8090/sy_ch10/getUserNameAndId?username=Spring&id=1
(3)POJO绑定
①创建User类
在src\main\java文件夹中创建com\sun\pojo文件夹,在文件夹中创建User类
package com.sun.pojo;
public class User {
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
private String username;
private String password;
}
②定义registerUser方法
修改文件UserController.java,新增registerUser方法
@RequestMapping("/registerUser")
public void registerUser(User user){
String username=user.getUsername();
String password=user.getPassword();
System.out.println("username="+username+",password="+password);
}
③创建register.jsp文件
在src\main\webapp下创建register.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>注册</title>
</head>
<body>
<form action="${pageContext.request.contextPath}/registerUser" method="post">
用户名<input type="text" name="username"/><br>
密 码<input type="password" name="password"/><br>
<input type="submit" value="注册">
</form>
</body>
</html>
运行结果:
启动项目后在浏览器输入http://localhost:8090/sy_ch10/register.jsp
(4)自定义类型转换器
① 创建日期转换类
在src\main\java\com\sun\controller文件夹中创建UserController类
package com.sun.convert;
import org.springframework.core.convert.converter.Converter;
import java.text.SimpleDateFormat;
import java.util.Date;
public class DateConverter implements Converter<String, Date> {
private String datePattern = "yyy-MM-dd";
@Override
public Date convert(String source) {
SimpleDateFormat sdf = new SimpleDateFormat(datePattern);
try {
return sdf.parse(source);
} catch (Exception e) {
throw new IllegalArgumentException("无效的日期格式,请使用这种格式:" + datePattern);
}
}
}
② 配置spring-mvc.xml文件
在src\main\resources文件夹中创建spring-mvc.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
<context:component-scan base-package="com.sun.controller"/>
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/pages/"/>
<property name="suffix" value=".jsp"/>
</bean>
<mvc:annotation-driven/>
</beans>
③ 定义方法
修改文件UserController.java,新增getBirthday方法
@RequestMapping("/getBirthday")
public void getBirthday(@DateTimeFormat(pattern = "yyyy-MM-dd") Date birthday){
System.out.println("birthday="+birthday);
}
运行结果:
启动项目后在浏览器输入http://localhost:8090/sy_ch10/getBirthday?birthday=2001-08-30
2.实现数组绑定、集合绑定、复杂POJO绑定—属性为对象类型的数据绑定
(1)实现数组绑定
① 创建实体类
在src\main\java\com\sun\pojo文件夹中创建Product类
package com.sun.pojo;
public class Product {
public String getProId() {
return proId;
}
public void setProId(String proId) {
this.proId = proId;
}
public String getProName() {
return proName;
}
public void setProName(String proName) {
this.proName = proName;
}
private String proId;
private String proName;
}
② 创建jsp页面
在src\main\webapp下创建products.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>提交商品</title>
</head>
<body>
<form action="${pageContext.request.contextPath}/getProducts" method="post">
<table width="220px" border="1">
<tr>
<td>选择</td>
<td>商品名称</td>
</tr>
<tr>
<td>
<input type="checkbox" name="proIds" value="1"/>
</td>
<td>Java基础教程</td>
</tr>
<tr>
<td>
<input type="checkbox" name="proIds" value="2"/>
</td>
<td>JavaWeb案例</td>
</tr>
<tr>
<td>
<input type="checkbox" name="proIds" value="3"/>
</td>
<td>SSM框架实战</td>
</tr>
</table>
<input type="submit" value="提交商品">
</form>
</body>
</html>
③ 创建商品处理类
在src\main\java\com\sun\controller文件夹中创建ProductController类
package com.sun.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class ProductController {
@RequestMapping("/getProducts")
public void getProducts(String[] proIds){
for (String proId:proIds){
System.out.println("获取到了ID为"+proId+"的商品");
}
}
}
运行结果:
启动项目后在浏览器输入http://localhost:8090/sy_ch10/products.jsp
点击多选框后点击提交:
(2)集合绑定
修改ProductController类的getProducts()方法
@RequestMapping("/getProducts")
public void getProducts(@RequestParam("proIds")List<String> proIds){
for (String proId:proIds){
System.out.println("获取到了ID为"+proId+"的商品");
}
}
运行结果:
启动项目后在浏览器输入http://localhost:8090/sy_ch10/products.jsp
(3)复杂POJO绑定—属性为对象类型的数据绑定
① 创建订单实体类
在src\main\java\com\sun\pojo文件夹中创建Order类
package com.sun.pojo;
public class Order {
public String getOrderId() {
return orderId;
}
public void setOrderId(String orderId) {
this.orderId = orderId;
}
private String orderId;
}
② 修改User类
在User.java中添加
public Order getOrder() {
return order;
}
public void setOrder(Order order) {
this.order = order;
}
private Order order;
③ 添加方法
在UserController类中定义方法
@RequestMapping("/findOrderWithUser")
public void findOrderWithUser(User user){
String username=user.getUsername();
String orderId=user.getOrder().getOrderId();
System.out.println("username="+username+",orderId="+orderId);
}
④ 创建jsp页面
在src\main\webapp下创建order.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>订单</title>
</head>
<body>
<form action="${pageContext.request.contextPath}/findOrderWithUser" method="post">
所属用户<input type="text" name="username"/><br>
订单编号<input type="text" name="order.orderId"><br>
<input type="submit" value="查询">
</form>
</body>
</html>
运行结果:
启动项目后在浏览器输入http://localhost:8090/sy_ch10/order.jsp
3.JSON数据格式应用
(1)添加依赖
在项目的pom.xml中导入Jackson的依赖
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.9.2</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.2</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.9.0</version>
</dependency>
(2)导入jQuery文件
在项目\webapp文件夹下创建名为js文件夹,将jQuery-3.6.0.js文件导入
(3)创建jsp页面
在src\main\webapp下创建product.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>异步提交商品</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.6.0.js"></script>
</head>
<body>
<form id="products">
<table border="1">
<tr>
<th>商品id</th>
<th>商品名称</th>
<th>提交</th>
</tr>
<tr>
<td>
<input name="proId" value="1" id="proId" type="text">
</td>
<td>
<input name="proName" value="三文鱼" id="proName" type="text">
</td>
<td>
<input type="button" value="提交单个商品" onclick="sumbmitProduct()">
</td>
</tr>
<tr>
<td>
<input name="proId" value="2" id="proId2" type="text">
</td>
<td>
<input name="proName" value="红牛" id="proName2" type="text">
</td>
<td>
<input type="button" value="提交多个商品" onclick="submitProducts()">
</td>
</tr>
</table>
</form>
<script type="text/javascript">
function sumbmitProduct() {
var proId = $("#proId").val();
var proName = $("#proName").val();
$.ajax({
url: "${pageContext.request.contextPath }/getProduct",
type: "post",
data: JSON.stringify({proId: proId, proName: proName}),
contentType: "application/json;charset=UTF-8",
dataType: "json",
success: function (response) {
alert(response);
}
});
}
function submitProducts() {
var pro1 = {proId: $("#proId").val(), proName: $("#proName").val()}
var pro2 = {proId: $("#proId2").val(), proName: $("#proName2").val()}
$.ajax({
url: "${pageContext.request.contextPath }/getProductList",
type: "post",
data: JSON.stringify([pro1, pro2]),
contentType: "application/json;charset=UTF-8",
dataType: "json",
success: function (response) {
alert(response);
}
});
}
</script>
</body>
</html>
(4)修改ProductController类中方法
在ProductController类中新增getProduct()方法和getProductList()方法
@RequestMapping("/getProduct")
public void getProduct(@RequestBody Product product){
String proId=product.getProId();
String proName=product.getProName();
System.out.println("获取到了Id为"+proId+"名称为"+proName+"的商品");
}
@RequestMapping("/getProductList")
public void getProductList(@RequestBody List<Product> products){
for (Product product:products){
String proId=product.getProId();
String proName=product.getProName();
System.out.println("获取到了Id为"+proId+"名称为"+proName+"的商品");
}
}
(5)配置spring-mvc.xml文件
在spring-mvc.xml文件中添加
<mvc:resources mapping="/js/**" location="/js/"/>
运行结果:
启动项目后在浏览器输入http://localhost:8090/sy_ch10/product.jsp
点击“提交单个按钮”后