Spring MVC数据绑定和表单标签的应用（附带实例）

为了让读者进一步学习数据绑定和表单标签，本节给出了一个应用范例 springMVCDemo04。该应用中实现了 User 类属性和 JSP 页面中表单参数的绑定，同时在 JSP 页面中分别展示了 input、textarea、checkbox、checkboxs、select 等标签。

应用的相关配置

在 springMVCDemo04 应用中需要使用 JSTL，因此不仅需要将 Spring MVC 的相关 JAR 包复制到应用的 WEN-INF/lib 目录下，还需要从 Tomcat 的 webapps\examples\WEB-INF\lib 目录下将 JSTL 的相关 JAR 包复制到应用的 WEN-INF/lib 目录下。

springMVCDemo04 的 JAR 包如图 1 所示。

图 1 springMVCDemo04的JAR包

为了避免出现中文乱码问题，需要在 web.xml 文件中增加编码过滤器，同时将 JSP 页面编码设置为 UTF-8，form 表单的提交方式必须为 post。

web.xml 的代码如下：

1. <?xml version="1.0" encoding="UTF-8"?>
2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
3. xmlns="http://java.sun.com/xml/ns/javaee"
4. xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
5. xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
6. <!--配置DispatcherServlet-->
7. <servlet>
8. <servlet-name>springmvc</servlet-name>
9. <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
10. <load-on-startup>1</load-on-startup>
11. </servlet>
12. <servlet-mapping>
13. <servlet-name>springmvc</servlet-name>
14. <url-pattern>/</url-pattern>
15. </servlet-mapping>
16. <!--避免中文乱码-->
17. <filter>
18. <filter-name>encodingFilter</filter-name>
19. <filter-class>
20. org.springframework.web.filter.CharacterEncodingFilter
21. </filter-class>
22. <init-param>
23. <param-name>encoding</param-name>
24. <param-value>UTF-8</param-value>
25. </init-param>
26. <init-param>
27. <param-name>forceEncoding</param-name>
28. <param-value>true</param-value>
29. </init-param>
30. </filter>
31. <filter-mapping>
32. <filter-name>encodingFilter</filter-name>
33. <url-pattern>/*</url-pattern>
34. </filter-mapping>
35. </web-app>

配置文件 springmvc-servlet.xml 与教程前面的示例中学习过的配置文件没有区别，这里不再赘述。

领域模型

应用中实现了 User 类属性和 JSP 页面中表单参数的绑定，User 类包含了和表单参数名对应的属性，以及属性的 set 和 get 方法。在 springMVCDemo04 应用的 src 目录下创建 pojo 包，并在该包中创建 User 类。

User 类的代码如下：

1. package pojo;
2. public class User {
3. private String userName;
4. private String[] hobby; // 兴趣爱好
5. private String[] friends; // 朋友
6. private String carrer;
7. private String houseRegister;
8. private String remark;
9. // 省略setter和getter方法
10. }

Service 层

应用中使用了 Service 层，在 Service 层使用静态集合变量 users 模拟数据库存储用户信息，包括添加用户和查询用户两个功能方法。在 springMVCDemo04 应用的 src 目录下创建 service 包，并在该包中创建 UserService 接口和 UserServiceImpl 实现类。

UserService 接口的代码如下：

1. package service;
2. import java.util.ArrayList;
3. import pojo.User;
4. public interface UserService {
5. boolean addUser(User u);
6. ArrayList<User> getUsers();
7. }

UserServiceImpl 实现类的代码如下：

1. package service;
2. import java.util.ArrayList;
3. import pojo.User;
4. @Service
5. public class UserServiceImpl implements UserService {
6. // 使用静态集合变量users模拟数据库
7. private static ArrayList<User> users = new ArrayList<User>();
8. @Override
9. public boolean addUser(User u) {
10. if (!"IT民工".equals(u.getCarrer())) { // 不允许添加IT民工
11. users.add(u);
12. return true;
13. }
14. return false;
15. }
16. @Override
17. public ArrayList<User> getUsers() {
18. return users;
19. }
20. }

Controller 层

在 Controller 类 UserController 中定义了请求处理方法，包括处理 user/input 请求的 inputUser 方法以及处理 user/save 请求的 addUser 方法，其中在 addUser 方法中用到了重定向。

在 UserController 类中，通过 @Autowired 注解在 UserController 对象中主动注入 UserService 对象，实现对 user 对象的添加和查询等操作。

通过 model 的 addAttribute 方法将 User 类对象、HashMap 类型的 hobbys 对象、String[] 类型的 carrers 对象以及 String[] 类型的 houseRegisters 对象传递给 View（userAdd.jsp）。

在 springMVCDemo04 应用的 src 目录下创建 controller 包，并在该包中创建 UserController 控制器类。

UserController 类的代码如下：

1. package controller;
2. import java.util.HashMap;
3. import java.util.List;
4. import org.apache.commons.logging.Log;
5. import org.apache.commons.logging.LogFactory;
6. import org.springframework.beans.factory.annotation.Autowired;
7. import org.springframework.stereotype.Controller;
8. import org.springframework.ui.Model;
9. import org.springframework.web.bind.annotation.ModelAttribute;
10. import org.springframework.web.bind.annotation.RequestMapping;
11. import pojo.User;
12. import service.UserService;
13. @Controller
14. @RequestMapping("/user")
15. public class UserController {
16. // 得到一个用来记录日志的对象,这样在打印信息的时候能够标记打印的是哪个类的信息
17. private static final Log logger = LogFactory.getLog(UserController.class);
18. @Autowired
19. private UserService userService;
20. @RequestMapping(value = "/input")
21. public String inputuser(Model model) {
22. HashMap<String, String> hobbys = new HashMap<String, String>();
23. hobbys.put("篮球", "篮球");
24. hobbys.put("乒乓球", "乒乓球");
25. hobbys.put("电玩", "电玩");
26. hobbys.put("游泳", "游泳");
27. // 如果model中没有user属性，userAdd.jsp会抛出异常，因为表单标签无法找到
28. // modelAttribute 属性指定的 form backing object
29. model.addAttribute("user", new User());
30. model.addAttribute("hobbys", hobbys);
31. model.addAttribute("carrers", new String[] { "教师", "学生", "coding 搬运工",
32. "IT民工", "其他" });
33. model.addAttribute("houseRegisters", new String[] { "北京", "上海", "广州",
34. "深圳", "其他" });
35. return "userAdd";
36. }
37. @RequestMapping(value = "/save")
38. public String addUser(@ModelAttribute User user, Model model) {
39. if (userService.addUser(user)) {
40. logger.info("成功");
41. return "redirect:/user/list";
42. } else {
43. logger.info("失败");
44. HashMap<String, String> hobbys = new HashMap<String, String>();
45. hobbys.put("篮球", "篮球");
46. hobbys.put("乒乓球", "乒乓球");
47. hobbys.put("电玩", "电玩");
48. hobbys.put("游泳", "游泳");
49. // 这里不需要 model.addAttribute ("user", new User ()),因为 @ModelAttribute
50. // 指定 form backing object
51. model.addAttribute("hobbys", hobbys);
52. model.addAttribute("carrers", new String[] { "教师", "学生",
53. " coding搬运工", "IT民工", "其他" });
54. model.addAttribute("houseRegisters", new String[] { "北京", "上海",
55. "广州", "深圳", "其他" });
56. return "userAdd";
57. }
58. }
59. @RequestMapping(value = "/list")
60. public String listUsers(Model model) {
61. List<User> users = userService.getUsers();
62. model.addAttribute("users", users);
63. return "userList";
64. }
65. }

View 层

View 层包含两个 JSP 页面，一个是信息输入页面 userAdd.jsp，一个是信息显示页面 userList.jsp。在 springMVCDemo04 应用的 WEB-INF/jsp 目录下创建这两个 JSP 页面。

在 userAdd.jsp 页面中将 Map 类型的 hobbys 绑定到 checkboxes 上，将 String[] 类型的 carrers 和 houseRegisters 绑定到 select 上，实现通过 option 标签对 select 添加选项，同时表单的 method 方法需指定为 post 来避免中文乱码问题。

在 userList.jsp 页面中使用 JSTL 标签遍历集合中的用户信息 。

userAdd.jsp 的代码如下：

1. <%@ page language="java" contentType="text/html; charset=UTF-8"
2. pageEncoding="UTF-8"%>
3. <%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
5. <html>
6. <head>
7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
8. <title>Insert title here</title>
9. </head>
10. <body>
11. <form:form modelAttribute="user" method="post" action="${pageContext.request.contextPath }/user/save">
12. <fieldset>
13. <legend> 添加一个用户 </legend>
14. <P>
15. <label>用户名:</label>
16. <form:input path="userName" />
17. </p>
18. <P>
19. <label>爱好:</label>
20. <form:checkboxes items="${hobbys}" path="hobby" />
21. </p>
22. <P>
23. <label>朋友:</label>
24. <form:checkbox path="friends" value="张三" /> 张三
25. <form:checkbox path="friends" value="李四" /> 李四
26. <form:checkbox path="friends" value="王五" /> 王五
27. <form:checkbox path="friends" value="赵六" /> 赵六
28. </p>
29. <P>
30. <label>职业:</label>
31. <form:select path="carrer">
32. <option />请选择职业
33. <form:options items="${carrers }" />
34. </form:select>
35. </p>
36. <P>
37. <label>户籍：</label>
38. <form:select path="houseRegister">
39. <option />请选择户籍
40. <form:options items="${houseRegisters }" />
41. </form:select>
42. </p>
43. <P>
44. <label>个人描述:</label>
45. <form:textarea path="remark" rows="5" />
46. </p>
47. <p id="buttons">
48. <input id="reset" type="reset">
49. <input id="submit" type="submit" value="添加">
50. </p>
51. </fieldset>
52. </form:form>
53. </body>
54. </html>

userList.jsp 的代码如下：

1. <%@ page language="java" contentType="text/html; charset=UTF-8"
2. pageEncoding="UTF-8"%>
3. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
5. <html>
6. <head>
7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
8. <title>用户列表</title>
9. </head>
10. <body>
11. <h1>用户列表</h1>
12. <a href="<c:url value="${pageContext.request.contextPath }/user/input"/>">继续添加</a>
13. <table>
14. <tr>
15. <th>用户名</th>
16. <th>兴趣爱好</th>
17. <th>朋友</th>
18. <th>职业</th>
19. <th>户籍</th>
20. <th>个人描述</th>
21. </tr>
22. <c:forEach items="${users}" var="user">
23. <tr>
24. <td>${user.userName }</td>
25. <td>
26. <c:forEach items="${user.hobby }" var="hobby">
27. ${hobby } 
28. </c:forEach>
29. </td>
30. <td>
31. <c:forEach items="${user.friends}" var="friend">
32. ${friend } 
33. </c:forEach>
34. </td>
35. <td>${user.carrer }</td>
36. <td>${user.houseRegister }</td>
37. <td>${user.remark }</td>
38. </tr>
39. </c:forEach>
40. </table>
41. </body>
42. </html>

测试应用

通过地址“http://localhost:8080/springMVCDemo04/user/input”测试应用，添加用户信息页面效果如图 2 所示。

如果在图 2 中职业选择“IT民工”，添加失败。失败后还回到添加页面，输入过的信息不再输入，自动回填（必须结合 form 标签）。自动回填是数据绑定的一个优点。失败页面如图 3 所示。

图 2 添加用户信息页面

图 3 添加用户信息失败页面 

在图 3 中输入正确信息，添加成功后重定向到信息显示页面，效果如图 4 所示。

图 4 信息显示页面