文档描述
第第5 5章章 数据绑定和表单标签库数据绑定和表单标签库主要内容主要内容 数据绑定数据绑定 表单标签库表单标签库 数据绑定应用数据绑定应用 JSON JSON数据交互数据交互5.1 5.1 数据绑定数据绑定 在在Spring MVCSpring MVC框架中，数据绑定有以下几层含义：框架中，数据绑定有以下几层含义：绑定请绑定请求参数输入值到领域模型求参数输入值到领域模型（如（如3.23.2节）、节）、模型数据到视图的绑模型数据到视图的绑定定（输入验证失败时）、（输入验证失败时）、模型数据到表单元素的绑定模型数据到表单元素的绑定（如下拉（如下拉列表选项值由控制器初始化）。列表选项值由控制器初始化）。主要内容主要内容 数据绑定数据绑定 表单标签库表单标签库 数据绑定应用数据绑定应用 JSON JSON数据交互数据交互5.2 Spring5.2 Spring的表单标签库的表单标签库 JSP JSP页面使用页面使用SpringSpring表单标签库时，必须在表单标签库时，必须在JSPJSP页面开头处声页面开头处声明明taglibtaglib指令，指令代码如下：指令，指令代码如下：%taglib prefix=form uri=http:/www.springframework.org/tags/form%5.2.1 5.2.1 表单标签表单标签 modelAttribute modelAttribute：暴露：暴露form backing objectform backing object的模型属性的模型属性名称，缺省为名称，缺省为commandcommand。RequestMapping(value=/input)public String inputUser(Model model)model.addAttribute(user,new User();return userAdd;5.2.2 input5.2.2 input标签标签 input input标签，语法格式如下：标签，语法格式如下：path path属性将文本框输入值绑定到属性将文本框输入值绑定到form backing objectform backing object的一的一个属性。个属性。5.2.3 password5.2.3 password标签标签5.2.4 hidden5.2.4 hidden标签标签5.2.5 textarea5.2.5 textarea标签标签5.2.6 checkbox5.2.6 checkbox标签标签 checkbox checkbox标签，语法格式如下：标签，语法格式如下：多个多个pathpath相同的相同的checkboxcheckbox标签，它们是一个选项组，允许标签，它们是一个选项组，允许多选。选项值绑定到一个数组属性。示例代码如下：多选。选项值绑定到一个数组属性。示例代码如下：form:checkbox path=friends value=/张三张三form:checkbox path=friends value=/李四李四form:checkbox path=friends value=/王五王五form:checkbox path=friends value=/赵六赵六5.2.7 checkboxes5.2.7 checkboxes标签标签 checkboxes checkboxes标签渲染多个复选框，是一个选项组，等价于标签渲染多个复选框，是一个选项组，等价于多个多个pathpath相同的相同的checkboxcheckbox标签。它有标签。它有3 3个非常重要的属性：个非常重要的属性：itemsitems、itemLabelitemLabel和和itemValueitemValue。itemsitems：用于生成：用于生成inputinput元素的元素的CollectionCollection、MapMap或或ArrayArray。itemLabelitemLabel：itemsitems属性中指定的集合对象的属性，为每个属性中指定的集合对象的属性，为每个inputinput元素提供元素提供labellabel。itemValueitemValue：itemsitems属性中指定的集合对象的属性，为每个属性中指定的集合对象的属性，为每个inputinput元素提供元素提供valuevalue。checkboxes checkboxes标签语法格式如下：标签语法格式如下：示例代码如下：示例代码如下：5.2.8 radiobutton5.2.8 radiobutton标签标签 radiobutton radiobutton标签，语法格式如下：标签，语法格式如下：多个多个pathpath相同的相同的radiobuttonradiobutton标签，它们是一个选项组，标签，它们是一个选项组，只允许单选。只允许单选。5.2.9 radiobuttons5.2.9 radiobuttons标签标签 radiobuttons radiobuttons标签渲染多个标签渲染多个radioradio，是一个选项组，等价于，是一个选项组，等价于多个多个pathpath相同的相同的radiobuttonradiobutton标签。标签。radiobuttonsradiobuttons标签，语法格标签，语法格式如下：式如下：该标签的该标签的itemLabelitemLabel和和itemValueitemValue属性与属性与checkboxescheckboxes标签的标签的itemLabelitemLabel和和itemValueitemValue属性完全一样，但只允许单选。属性完全一样，但只允许单选。5.2.10 select5.2.10 select标签标签或或xxxxxx或或 该标签的该标签的itemLabelitemLabel和和itemValueitemValue属性与属性与checkboxescheckboxes标签标签的的itemLabelitemLabel和和itemValueitemValue属性完全一样。属性完全一样。5.2.11 options5.2.11 options标签标签 options options标签生成一个标签生成一个selectselect标签的选项列表。因此，需要标签的选项列表。因此，需要与与selectselect标签一同使用，具体用法参见标签一同使用，具体用法参见5.2.10 select5.2.10 select标签。标签。5.2.12 errors5.2.12 errors标签标签 errors errors标签渲染一个或者多个标签渲染一个或者多个spanspan元素，每个元素，每个spanspan元素包元素包含一个错误消息。它可以用于显示一个特定的错误消息，也可含一个错误消息。它可以用于显示一个特定的错误消息，也可以显示所有错误消息。语法如下：以显示所有错误消息。语法如下：form:errors path=/或或 其中，其中，“*”表示显示所有错误消息；表示显示所有错误消息；“xxxxxx”表示显示由表示显示由“xxxxxx”指定的特定错误消息。指定的特定错误消息。主要内容主要内容 数据绑定数据绑定 表单标签库表单标签库 数据绑定应用数据绑定应用 JSON JSON数据交互数据交互5.3 5.3 数据绑定应用数据绑定应用 【例【例5-15-1】ch5_1ch5_1应用中实现了应用中实现了UserUser类属性和类属性和JSPJSP页面中表页面中表单参数的绑定，同时在单参数的绑定，同时在JSPJSP页面中分别展示了页面中分别展示了inputinput、textareatextarea、checkboxcheckbox、checkboxscheckboxs、selectselect等标签。等标签。5.3.1 5.3.1 创建创建MavenMaven项目并添加相关依赖项目并添加相关依赖 在在ch5_1ch5_1应用中需要使用应用中需要使用JSTLJSTL，因此，不仅需要将，因此，不仅需要将Spring Spring MVCMVC相关依赖添加到相关依赖添加到pom.xmlpom.xml文件中，还需要将文件中，还需要将JSTLJSTL相关依赖添相关依赖添加到加到pom.xmlpom.xml文件中。文件中。5.3.2 Spring MVC5.3.2 Spring MVC及及WebWeb相关配置相关配置ConfigurationEnableWebMvc/开启spring mvc的支持ComponentScan(basePackages=controller,service)/扫描基本包public class SpringMVCConfig implements WebMvcConfigurer/*配置视图解析器*/Beanpublic InternalResourceViewResolver getViewResolver()InternalResourceViewResolver viewResolver=new InternalResourceViewResolver();viewResolver.setPrefix(/WEB-INF/jsp/);viewResolver.setSuffix(.jsp);return viewResolver;/*注册Spring MVC的DispatcherServlet*/Dynamic servlet=arg0.addServlet(dispatcher,new DispatcherServlet(ctx);servlet.addMapping(/);servlet.setLoadOnStartup(1);/*注册字符编码过滤器*/javax.servlet.FilterRegistration.Dynamic filter=arg0.addFilter(characterEncodingFilter,CharacterEncodingFilter.class);filter.setInitParameter(encoding,UTF-8);filter.addMappingForUrlPatterns(null,false,/*);5.3.3 5.3.3 领域模型领域模型public class User private String userName;private String hobby;/兴趣爱好private String friends;/朋友private String carrer;private String houseRegister;private String remark;/省略setter和getter方法5.3.3 Service5.3.3 Service层层 应用中使用了应用中使用了ServiceService层，在层，在ServiceService层使用层使用静态集合变量静态集合变量usersusers模拟数据库存储用户信息模拟数据库存储用户信息，包括添加用户和查询用户两个，包括添加用户和查询用户两个功能方法。功能方法。5.3.4 Controller5.3.4 Controller层层 在在ControllerController类类UserControllerUserController中定义了请求处理方法，中定义了请求处理方法，其中包括处理其中包括处理user/inputuser/input请求的请求的inputUserinputUser方法，以及方法，以及user/saveuser/save请求的请求的addUseraddUser方法，其中在方法，其中在addUseraddUser方法中用到了方法中用到了重定向。在重定向。在UserControllerUserController类中，通过类中，通过AutowiredAutowired注解在注解在UserControllerUserController对象中主动注入对象中主动注入UserServiceUserService对象，实现对对象，实现对useruser对象的添加和查询等操作；通过对象的添加和查询等操作；通过modelmodel的的addAttributeaddAttribute方方法将法将UserUser类对象、类对象、HashMapHashMap类型的类型的hobbyshobbys对象、对象、StringString类型类型的的carrerscarrers对象以及对象以及StringString类型的类型的houseRegistershouseRegisters对象传递对象传递给给ViewView（userAdd.jspuserAdd.jsp）。）。5.3.5 View5.3.5 View层层 View View层包含两个层包含两个JSPJSP页面，一个是页面，一个是信息输入页面信息输入页面userAdd.jspuserAdd.jsp，一个是，一个是信息显示页面信息显示页面userList.jspuserList.jsp。在。在ch5_1ch5_1应用的应用的src/main/webapp/WEB-INF/jsp/src/main/webapp/WEB-INF/jsp/目录下，创建此两个目录下，创建此两个JSPJSP页面。页面。5.3.6 5.3.6 测试应用测试应用发布应用后，通过地址发布应用后，通过地址http:/localhost:8080/ch5_1/user/inputhttp:/localhost:8080/ch5_1/user/input测试应用测试应用。主要内容主要内容 数据绑定数据绑定 表单标签库表单标签库 数据绑定应用数据绑定应用 JSON JSON数据交互数据交互5.5 JSON5.5 JSON数据交互数据交互 Spring MVC Spring MVC在数据绑定的过程中，需要对传递数据的格式在数据绑定的过程中，需要对传递数据的格式和类型进行转换，它既可以转换和类型进行转换，它既可以转换StringString等类型的数据，也可以等类型的数据，也可以转换转换JSONJSON等其他类型的数据。等其他类型的数据。5.5.1 JSON5.5.1 JSON概述概述 JSON JSON（JavaScript Object NotationJavaScript Object Notation，JSJS对象标记）是一对象标记）是一种轻量级的数据交换格式。它有两种数据结构。种轻量级的数据交换格式。它有两种数据结构。1 1对象结构对象结构 2 2数组结构数组结构1 1对象结构对象结构key1:value1,key2:value2,pname:陈恒,password:123456,page:402 2数组结构数组结构value1,value2,sno:201802228888,sname:陈恒,hobby:篮球,足球,college:cname:清华大学,city:北京5.5.2 JSON5.5.2 JSON数据转换数据转换 为实现浏览器与控制器类之间的为实现浏览器与控制器类之间的JSONJSON数据交互，数据交互，Spring Spring MVCMVC提供了提供了MappingJackson2HttpMessageConverterMappingJackson2HttpMessageConverter实现类默认实现类默认处理处理JSONJSON格式请求响应。该实现类利用格式请求响应。该实现类利用JacksonJackson开源包开源包读写读写JSONJSON数据，将数据，将JavaJava对象转换为对象转换为JSONJSON对象和对象和XMLXML文档，同时也可以将文档，同时也可以将JSONJSON对象和对象和XMLXML文档转换为文档转换为JavaJava对象。对象。JacksonJackson开源包及其描述如下。开源包及其描述如下。jackson-annotations.jarjackson-annotations.jar：JSONJSON转换注解包。转换注解包。jackson-core.jarjackson-core.jar：JSONJSON转换的核心包。转换的核心包。jackson-databind.jarjackson-databind.jar：JSONJSON转换的数据绑定包。转换的数据绑定包。在使用注解开发时，需要用到两个重要的在使用注解开发时，需要用到两个重要的JSONJSON格式转换注格式转换注解，分别是解，分别是RequestBodyRequestBody和和ResponseBodyResponseBody。RequestBodyRequestBody：用于将请求体中的数据绑定到方法的形参：用于将请求体中的数据绑定到方法的形参中，该注解应用在方法的形参上。中，该注解应用在方法的形参上。ResponseBodyResponseBody：用于直接返回：用于直接返回returnreturn对象，该注解应用对象，该注解应用在方法上。在方法上。【例【例5-25-2】JSONJSON数据交互。数据交互。1 1创建创建MavenMaven项目并添加相关依赖项目并添加相关依赖 创建创建MavenMaven项目项目ch5_2ch5_2，在，在ch5_2ch5_2中需要使用中需要使用Spring MVCSpring MVC框架框架进行进行JSONJSON数据交互。因此，不仅需要将数据交互。因此，不仅需要将spring-webmvcspring-webmvc依赖添加依赖添加到到pom.xmlpom.xml文件中，还需要将文件中，还需要将JSONJSON相关依赖添加到相关依赖添加到pom.xmlpom.xml文件中文件中。因为。因为jackson-databindjackson-databind依赖于依赖于jackson-corejackson-core和和jackson-jackson-annotationsannotations，所以，这里只需添加，所以，这里只需添加spring-webmvcspring-webmvc和和jackson-jackson-databinddatabind依赖。依赖。2 2Spring MVCSpring MVC及及WebWeb相关配置相关配置 /*配置静态资源（不需要DispatcherServlet转发的请求）*/Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry)registry.addResourceHandler(/static/*).addResourceLocations(/static/);在在Spring MVCSpring MVC配置类中，除了配置视图解析器，还需要配配置类中，除了配置视图解析器，还需要配置不需要置不需要DispatcherServletDispatcherServlet转发的转发的BootStrapBootStrap等静态资源。等静态资源。3 3创建创建POJOPOJO类类public class Person private String pname;private String password;private Integer page;/省略setter和getter方法4 4创建创建JSPJSP页面测试页面测试JSONJSON数据交互数据交互 在在ch5_2ch5_2的的src/main/webappsrc/main/webapp目录下，创建页面目录下，创建页面index.jspindex.jsp来测试来测试JSONJSON数据交互。在数据交互。在index.jspindex.jsp页面中，使用页面中，使用BootStrapBootStrap美美化页面。并编写一个测试化页面。并编写一个测试JSONJSON交互的表单，当单击交互的表单，当单击“测试测试”按按钮时，执行页面中的钮时，执行页面中的testJson()testJson()函数。在该函数中使用函数。在该函数中使用jQueryjQuery的的AJAXAJAX方式将方式将JSONJSON格式的数据传递给格式的数据传递给“/testJson/testJson”结尾的请结尾的请求中。求中。5 5创建控制器类创建控制器类public class TestController/*接收页面请求的JSON数据，并返回JSON格式结果*/RequestMapping(/testJson)ResponseBodypublic ListMap testJson(RequestBody Person user)/打印接收的JSON格式数据System.out.println(pname=+user.getPname()+,password=+user.getPassword()+,page=+user.getPage();/返回Person对象/return user;6 6运行运行index.jspindex.jsp页面，测试程序页面，测试程序
展开阅读全文
