Spring Web MVC 视图渲染

[superstonne]

配置ViewResolver

• Java Config配置方式

  @Bean
  public ViewResolver viewResolver() {
  InternalResourceViewResolver resolver =
  new InternalResourceViewResolver();
  resolver.setPrefix("/WEB-INF/views/");
  resolver.setSuffix(".jsp");
  //设置resolver可以处理JSTL标签
  resolver.setViewClass(
  org.springframework.web.servlet.view.JstlView.class);
  return resolver;
  }

  上面是一种最常用的JSP的视图解析器，Spring Web MVC提供了多种视图解析器，根据需求配置相关的解析器即可。

• XML配置方式

  <bean id="viewResolver"
  class="org.springframework.web.servlet.view.
  InternalResourceViewResolver"
  p:prefix="/WEB-INF/views/"
  p:suffix=".jsp"
  p:viewClass="org.springframework.web.servlet.view.JstlView" />

  使用Spring Web MVC的标签库

  我们需要在JSP的顶部引入标签库的申明

  <%@ taglib uri="http://www.springframework.org/tags/form" prefix="sf" %>

  Sample：

  <sf:form method="POST" commandName="spitter">
  First Name: <sf:input path="firstName" /><br/>
  Last Name: <sf:input path="lastName" /><br/>
  Email: <sf:input path="email" /><br/>
  Username: <sf:input path="username" /><br/>
  Password: <sf:password path="password" /><br/>
  <input type="submit" value="Register" />
  </sf:form>

  在视图解析器渲染的时候，发现引入了Spring 的标签库，解析器会调用对应的标签解析器来完成标签到HTML的转化。标签中的path属性指向的是ModelAndView存储中Key的值。

  显示验证出错的标签

  <sf:errors path="firstName" />

  在server端的validator验证器中可以制定具体显示的错误信息。

  @NotNull
  @Size(min=2, max=30, message="{lastName.size}")
  private String lastName;

  此处Size注解中的message内容会在出错时候放入ModelAndView中。

  国际化

  配置国际化解析器

  @Bean
  public MessageSource messageSource() {
  ReloadableResourceBundleMessageSource messageSource =
  new ReloadableResourceBundleMessageSource();
  // 如果没有写具体路径，则会在classpath目录去寻找国际化的资源文件
  messageSource.setBasename("file:///etc/spittr/messages");
  // 设置缓存时间
  messageSource.setCacheSeconds(10);
  return messageSource;
  }

  编写国际化资源文件

  • 前端配置

    <h1><s:message code="spittr.welcome" /></h1>

    ​

  • server端配置

    classpath目录新建message.properties文件, 添加内容

    spittr.welcome=Welcome to Spittr!

    新建国家化目标国家，例如西班牙则建文件messages_es.properties，添加内容

    spittr.welcome=Bienvenidos a Spittr!

    ​

整合Apache Tiles Views

• 配置Tiles解析器

  1. Java Config 配置方式

     // 配置Tiles 资源目录
     @Bean
     public TilesConfigurer tilesConfigurer() {
     TilesConfigurer tiles = new TilesConfigurer();
     tiles.setDefinitions(new String[] {
     "/WEB-INF/layout/tiles.xml"
     });
     tiles.setCheckRefresh(true);
     return tiles;
     }
     // 加载Tiles视图解析器
     @Bean
     public ViewResolver viewResolver() {
     return new TilesViewResolver();
     }

     ​

  2. XML配置方式

     <bean id="tilesConfigurer" class=
     "org.springframework.web.servlet.view.tiles3.TilesConfigurer">
     <property name="definitions">
     <list>
     <value>/WEB-INF/layout/tiles.xml.xml</value>
     <value>/WEB-INF/views/**/tiles.xml</value>
     </list>
     </property>
     </bean>
     <bean id="viewResolver" class=
     "org.springframework.web.servlet.view.tiles3.TilesViewResolver" />

  ​

• 定义Tiles

  <?xml version="1.0" encoding="ISO-8859-1" ?>
  <!DOCTYPE tiles-definitions PUBLIC
  "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
  "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
  <tiles-definitions>
  <definition name="base"
  template="/WEB-INF/layout/page.jsp">
  <put-attribute name="header"
  value="/WEB-INF/layout/header.jsp" />
  <put-attribute name="footer"
  value="/WEB-INF/layout/footer.jsp" />
  </definition>
  <definition name="home" extends="base">
  <put-attribute name="body"
  value="/WEB-INF/views/home.jsp" />
  </definition>
  <definition name="registerForm" extends="base">
  <put-attribute name="body"
  value="/WEB-INF/views/registerForm.jsp" />
  </definition>
  <definition name="profile" extends="base">
  <put-attribute name="body"
  value="/WEB-INF/views/profile.jsp" />
  </definition>
  <definition name="spittles" extends="base">
  <put-attribute name="body"
  value="/WEB-INF/views/spittles.jsp" />
  </definition>
  <definition name="spittle" extends="base">
  <put-attribute name="body"
  value="/WEB-INF/views/spittle.jsp" />
  </definition>
  </tiles-definitions>

  page.jsp

  <%@ taglib uri="http://www.springframework.org/tags" prefix="s" %>
  <%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
  <%@ page session="false" %>
  <html>
  <head>
  <title>Spittr</title>
  <link rel="stylesheet"
  type="text/css"
  href="<s:url value="/resources/style.css" />" >
  </head>
  <body>
  <div id="header">
  <t:insertAttribute name="header" />
  </div>
  <div id="content">
  <t:insertAttribute name="body" />
  </div>
  <div id="footer">
  <t:insertAttribute name="footer" />
  </div>
  </body>
  </html>

  ​

用Thymeleaf来替代依赖于Servlet的JSP

• 配置Thymeleaf视图解析器

  Java Config 方式

  @Bean
  public ViewResolver viewResolver(
  SpringTemplateEngine templateEngine) {
  ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
  viewResolver.setTemplateEngine(templateEngine);
  return viewResolver;
  }
  @Bean
  public TemplateEngine templateEngine(
  TemplateResolver templateResolver) {
  SpringTemplateEngine templateEngine = new SpringTemplateEngine();
  templateEngine.setTemplateResolver(templateResolver);
  return templateEngine;
  }
  @Bean
  public TemplateResolver templateResolver() {
  TemplateResolver templateResolver =
  new ServletContextTemplateResolver();
  templateResolver.setPrefix("/WEB-INF/templates/");
  templateResolver.setSuffix(".html");
  templateResolver.setTemplateMode("HTML5");
  return templateResolver;
  }

  XML方式

  <bean id="viewResolver"
  class="org.thymeleaf.spring3.view.ThymeleafViewResolver"
  p:templateEngine-ref="templateEngine" />
  <bean id="templateEngine"
  class="org.thymeleaf.spring3.SpringTemplateEngine"
  p:templateResolver-ref="templateResolver" />
  <bean id="templateResolver" class=
  "org.thymeleaf.templateresolver.ServletContextTemplateResolver"
  p:prefix="/WEB-INF/templates/"
  p:suffix=".html"
  p:templateMode="HTML5" />

  ​

• 定义Thymeleaf模板文件

  <html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org">
  <head>
  <title>Spittr</title>
  <link rel="stylesheet"
  type="text/css"
  th:href="@{/resources/style.css}"></link>
  </head>
  <body>
  <h1>Welcome to Spittr</h1>
  <a th:href="@{/spittles}">Spittles</a> |
  <a th:href="@{/spitter/register}">Register</a>
  </body>
  </html>

  模板中以@开始的是Thymeleaf的表达式，需要在运行时解析器解析为具体的值，和JSP不同的是这是一个真正的HTML文件，无需启动Web Server我们就可以预览页面样式，完全脱离了Servlet的舒服。

• 表单绑定

  Thymeleaf也可以向Spring Web MVC的标签一样来和后端返回的ModelAndView中的元素进行绑定

  <form method="POST" th:object="${spitter}">
  <div class="errors" th:if="${#fields.hasErrors('*')}">
  <ul>
  <li th:each="err : ${#fields.errors('*')}"
  th:text="${err}">Input is incorrect</li>
  </ul>
  </div>
  <label th:class="${#fields.hasErrors('firstName')}? 'error'">
  First Name</label>:
  <input type="text" th:field="*{firstName}"
  th:class="${#fields.hasErrors('firstName')}? 'error'" /><br/>
  <label th:class="${#fields.hasErrors('lastName')}? 'error'">
  Last Name</label>:
  <input type="text" th:field="*{lastName}"
  th:class="${#fields.hasErrors('lastName')}? 'error'" /><br/>
  <label th:class="${#fields.hasErrors('email')}? 'error'">
  Email</label>:
  <input type="text" th:field="*{email}"
  th:class="${#fields.hasErrors('email')}? 'error'" /><br/>
  <label th:class="${#fields.hasErrors('username')}? 'error'">
  Username</label>:
  <input type="text" th:field="*{username}"
  th:class="${#fields.hasErrors('username')}? 'error'" /><br/>
  <label th:class="${#fields.hasErrors('password')}? 'error'">
  Password</label>:
  <input type="password" th:field="*{password}"
  th:class="${#fields.hasErrors('password')}? 'error'" /><br/>
  <input type="submit" value="Register" />
  </form>

  ​