Spring实战（六：渲染Web视图）(未改)

迈不过友情╰ 2022-05-22 08:45 55阅读 0赞

### 1.理解视图解析 ###

将控制器中请求处理的逻辑和视图中的渲染实现解耦是Spring MVC的一个重要特性。如果控制器中的方法直接负责产生HTML的话，就很难在不影响请求处理逻辑的前提下，维护和更新视图。控制器方法和视图的实现会在模型内容上达成一致，这是两者的最大关联，除此之外，两者应该保持足够的距离。  
    Spring MVC定义了一个名为ViewResolver的接口，它大致如下所示：

![70][]

当给resolveViewName()方法传入一个视图名和Locale对象时，它会返回一个View实例。View是另外一个接口，如下所示：  
  
![70 1][]

View接口的任务就是接受模型以及Servlet的request和response对象，并将输出结果渲染到response中。

![70 2][]

![70 3][]

![70 4][]

Spring 4和Spring 3.2支持表6.1中的所有视图解析器。Spring 3.1支持除Tiles 3 TilesViewResolver之外的所有视图解析器。  
  
    对于大部分视图解析器来讲，每一项都对应Java Web应用中特定的某种视图技术。InternalResourceViewResolver一般会用于JSP，TilesViewResolver用于Apache Tiles视图，而FreeMarkerViewResolver和VelocityViewResolver分别对应FreeMarker和Velocity模板视图。

### 2.创建JSP视图 ###

Spring提供了两种支持JSP视图的方式：  
    InternalResourceViewResolver会将视图名解析为JSP文件。另外，如果在你的JSP页面中使用了JSP标准标签库（JavaServer Pages Standard Tag Library，JSTL）的话，InternalResourceViewResolver能够将视图名解析为JstlView形式的JSP文件，从而将JSTL本地化和资源bundle变量暴露给JSTL的格式化（formatting）和信息（message）标签。  
    Spring提供了两个JSP标签库，一个用于表单到模型的绑定，另一个提供了通用的工具类特性。

配置适用于JSP的视图解析器

有一些视图解析器，如ResourceBundleViewResolver会直接将逻辑视图名映射为特定的View接口实现，而InternalResourceViewResolver所采取的方式并不那么直接。它遵循一种约定，会在视图名上添加前缀和后缀，进而确定一个Web应用中视图资源的物理路径。

![70 5][]

当使用@Bean注解的时候，我们可以按照如下的方式配置Internal-ResourceView Resolver，使其在解析视图时，遵循上述的约定。  
![70 6][]  
如果更喜欢使用基于XML的Spring配置，那么可以按照如下的方式配置InternalResourceViewResolver：  
![70 7][]  
![70 8][]

InternalResourceViewResolver配置就绪之后，它就会将逻辑视图名解析为JSP文件，如下所示：  
    home将会解析为“/WEB-INF/views/home.jsp”

productList将会解析为“/WEB-INF/views/productList.jsp”

books/detail将会解析为“/WEB-INF/views/books/detail.jsp”

JSTL的格式化标签需要一个Locale对象，以便于恰当地格式化地域相关的值，如日期和货币。信息标签可以借助Spring的信息资源和Locale，从而选择适当的信息渲染到HTML之中。通过解析JstlView，JSTL能够获得Locale对象以及Spring中配置的信息资源。如果想让InternalResourceViewResolver将视图解析为JstlView，而不InternalResourceView的话，那么我们只需设置它的viewClass属性即可：  
![70 9][]

![70 10][]

使用Spring的JSP库

使用表单绑定库，需要在JSP页面中对其进行声明：

![70 11][]

![70 12][]

![70 13][]

因为不常用到所以不做过多介绍有兴趣的可以去百度查询相关资料。需要添加：

![70 14][]

Spring通用的标签库：  
要使用Spring通用的标签库，我们必须要在页面上对其进行声明：

![70 15][]

![70 16][]

![70 17][]

因为不常用到所以不做过多介绍有兴趣的可以去百度查询相关资料。

### 3.使用Apache Tiles视图定义布局    ###

1.配置Thymeleaf视图解析器

要在Spring中使用Thymeleaf，我们需要配置三个启用Thymeleaf与Spring集成的bean：  
  
1.ThymeleafViewResolver：将逻辑视图名称解析为Thymeleaf模板视图；  
2.SpringTemplateEngine：处理模板并渲染结果；  
3.TemplateResolver：加载Thymeleaf模板。

使用Java代码的方式，配置Spring对Thymeleaf的支持

![70 18][]

用XML配置：

![70 19][]

ThymeleafViewResolver是Spring MVC中ViewResolver的一个实现类。像其他的视图解析器一样，它会接受一个逻辑视图名称，并将其解析为视图。不过在该场景下，视图会是一个Thymeleaf模板。

ThymeleafViewResolverbean中注入了一个对SpringTemplate Enginebean的引用。SpringTemplateEngine会在Spring中启用Thymeleaf引擎，用来解析模板，并基于这些模板渲染结果。可以看到，我们为其注入了一个TemplateResolverbean的引用。

TemplateResolver会最终定位和查找模板。与之前配置InternalResource-ViewResolver类似，它使用了prefix和suffix属性。前缀和后缀将会与逻辑视图名组合使用，进而定位Thymeleaf引擎。它的templateMode属性被设置成了HTML 5，这表明我们预期要解析的模板会渲染成HTML 5输出。  
  
2. 定义Thymeleaf模板

Thymeleaf之所以能够发挥作用，是因为它通过自定义的命名空间，为标准的HTML标签集合添加Thymeleaf属性。

使用Thymeleaf命名空间的首页模板引擎  
![70 20][]

在这里th:href属性的特殊之处在于它的值中可以包含Thymeleaf表达式，用来计算动态的值。它会渲染成一个标准的href属性，其中会包含在渲染时动态创建得到的值。这是Thymeleaf命名空间中很多属性的运行方式：它们对应标准的HTML属性，并且具有相同的名称，但是会渲染一些计算后得到的值。在本例中，使用th:href属性的三个地方都用到了“@\{\}”表达式，用来计算相对于URL的路径（就像在JSP页面中的JSTL <c:url>标签或Spring<s:url>标签类似）。

借助Thymeleaf实现表单绑定

表单绑定是Spring MVC的一项重要特性。它能够将表单提交的数据填充到命令对象中，并将其传递给控制器，而在展现表单的时候，表单中也会填充命令对象中的值。如果没有表单绑定功能的话，我们需要确保HTML表单域要映射后端命令对象中的属性，并且在校验失败后展现表单的时候，还要负责确保输入域中值要设置为命令对象的属性。

![70 21][]

th:class属性会渲染为一个class属性，它的值是根据给定的表达式计算得到的。在上面的这两个th:class属性中，它会直接检查firstName域有没有校验错误。如果有的话，class属性在渲染时的值为error。如果这个域没有错误的话，将不会渲染class属性。<input>标签使用了th:field属性，用来引用后端对象的firstName域。

![70 22][]

表单的顶部使用Thymeleaf，它会用来渲染所有的错误。<div>元素使用th:if属性来检查是否有校验错误。如果有的话，会渲染<div>，否则的话，它将不会渲染。  
  
（对于Thymeleaf的使用请查看别的博文或者视频学习）

参考：《Spring实战》

[70]: /images/20220522/17cce0cb794745df9fa787d59c19aa19.png
[70 1]: /images/20220522/d921e11aff324ae3904711f180133981.png
[70 2]: /images/20220522/ef66aa3d6afe4828a4e293e78c67b4e7.png
[70 3]: /images/20220522/13bf1129215b4fa9af7dc94794dc567d.png
[70 4]: /images/20220522/df7ab7d2b3724990a13bf736660a9733.png
[70 5]: /images/20220522/f6537550d2f340c38a3afe1b7450d298.png
[70 6]: /images/20220522/97e5a5255c814fb19a6047a45713bb80.png
[70 7]: /images/20220522/ab898d906bd048a4b5df167d129a4aef.png
[70 8]: /images/20220522/92ba660c7a794095af0c7f0373bd659a.png
[70 9]: /images/20220522/eb6ef27f0668453c933fa41ec80f167e.png
[70 10]: /images/20220522/607c0df8657241918a48a6e980fe4642.png
[70 11]: /images/20220522/22ef0a027dd8434a8022ebf5984698f4.png
[70 12]: /images/20220522/3ebdb52dd9a542f3ae24b4080f9d8d9e.png
[70 13]: /images/20220522/693af056a279469587384156f70d6cbb.png
[70 14]: /images/20220522/ae3534a94bcf4e1c84680fb3d76cdcca.png
[70 15]: /images/20220522/67b6e80bcbea401a8e342759de5d0328.png
[70 16]: /images/20220522/abe44a02dd154c4ca34f080d66d57be3.png
[70 17]: /images/20220522/2b1068a10b0f43c5ae91377462aea45d.png
[70 18]: /images/20220522/fa642d0c159f4f63bfad66005ac6545b.png
[70 19]: /images/20220522/d92b773bc20542f49d8f7155f93e8690.png
[70 20]: /images/20220522/8d4f039b7cca40f9ac1973b5e2ad955f.png
[70 21]: /images/20220522/a798412c6d0343869fdfa6f344d4a0d2.png
[70 22]: /images/20220522/1493f59bbc6449318e428713f7a0e9aa.png