构建Maven多模块项目+SSM框架整合+Thymeleaf(二)

上一篇写了构建Maven多模块项目+SSM框架整合(一)，基本框架已经搭建好，访问Controller也能测试通过，现在编写前端页面，在传统的Javaweb项目中，大家习惯使用jsp作为前端视图显示，但是jsp依赖于servlet容器，不利于调试，前后端分离不是很好。若不用jsp，我们是否还有其他的选择，答案是肯定的。HTML加载速度会比jsp快，但是又不能使用JSTL的标签库。现在介绍一种模板引擎可解决问题，Thymeleaf.

Java生态圈广泛，自然有很多视图框架，除了JSP之外，还有Freemarker、Velocity、Thymeleaf等很多框架。Thymeleaf的优点是它是基于HTML的，即使视图没有渲染成功，也是一个标准的HTML页面。因此它的可读性很不错，也可以作为设计原型来使用。而且它是完全独立于Java EE容器的，意味着我们可以在任何需要渲染HTML的地方使用Thymeleaf。

Thymeleaf也提供了Spring的支持，我们可以非常方便的在Spring配置文件中声明Thymeleaf Beans，然后用它们渲染视图。

1. 配置Thymeleaf视图解析器

要在Spring中使用Thymeleaf，我们需要配置三个启用Thymeleaf与Spring集成的bean：

1. ThymeleafViewResolver：将逻辑视图名称解析为Thymeleaf模板视图；
2. SpringTemplateEngine：处理模板并渲染结果；
3. TemplateResolver：加载Thymeleaf模板。

在SSM项目中引入Thymeleaf
pom.xml文件中添加需要的依赖

<dependency>            <groupId>org.thymeleaf</groupId>            <artifactId>thymeleaf</artifactId>            <version>3.0.9.RELEASE</version></dependency><dependency>            <groupId>org.thymeleaf</groupId>            <artifactId>thymeleaf-spring4</artifactId>            <version>3.0.9.RELEASE</version></dependency>

配置web.xml 文件

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"    version="3.0">    <!-- Spring IOC配置     <context-param>        <param-name>contextConfigLocation</param-name>        <param-value>classpath:applicationContext.xml</param-value>    </context-param> -->    <!-- 以下3项参数与log4j的配置相关 -->    <context-param>        <param-name>log4jConfigLocation</param-name>        <param-value>classpath:log4j.properties</param-value>    </context-param>    <context-param>        <param-name>log4jRefreshInterval</param-name>        <param-value>60000</param-value>    </context-param>     <listener>          <listener-class>         org.springframework.web.util.Log4jConfigListener </listener-class>    </listener>    <!-- end --><!--    <listener>         <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>     </listener> -->    <!-- SpringMVC -->    <servlet>        <servlet-name>spring_mvc</servlet-name>        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>        <init-param>            <param-name>contextConfigLocation</param-name>            <param-value>classpath:spring-mvc.xml;classpath:applicationContext.xml</param-value>        </init-param>        <load-on-startup>1</load-on-startup>    </servlet>    <servlet-mapping>        <servlet-name>spring_mvc</servlet-name>        <url-pattern>/*</url-pattern>    </servlet-mapping>    <!--配置thymeleaf一定要加这个啊 不然404传不到给Controller !!! -->    <servlet-mapping>        <servlet-name>spring_mvc</servlet-name>        <url-pattern>*.html</url-pattern>    </servlet-mapping></web-app>

Spring-mvc.xml(springMVC 的配置文件)中注入相关的bean

    <!-- 使用thymeleaf解析 -->    <bean id="templateResolver"          class="org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver">        <property name="prefix" value="/WEB-INF/views/" />        <property name="suffix" value=".html" />        <property name="templateMode" value="HTML" />        <property name="cacheable" value="false" />        <property name="characterEncoding" value="UTF-8"/><!--不加会乱码-->    </bean>    <bean id="templateEngine"          class="org.thymeleaf.spring4.SpringTemplateEngine">        <property name="templateResolver" ref="templateResolver" />    </bean>    <bean class="org.thymeleaf.spring4.view.ThymeleafViewResolver">        <property name="templateEngine" ref="templateEngine" />        <!--解决中文乱码-->        <property name="characterEncoding" value="UTF-8"/>    </bean>

2. 配置好了之后编写测试
写一个Controller

@RequestMapping(value = "/thymeleaf", method=RequestMethod.GET)    public  String  thymeleaf(Model model) {        model.addAttribute("test", "hello world!");        List<User> users = new ArrayList<>();        User user = new User();        user.setId(1);        user.setAge(22);        user.setUserName("zhangsan");        users.add(user);        user = new User();        user.setId(2);        user.setAge(22);        user.setUserName("lisi");        users.add(user);        model.addAttribute("users", users);        return "demo";    }

根据我们的配置，在WEB-INF/views/目录下建立demo.html

<!DOCTYPE html><HTML  xmlns="http://www.thymeleaf.org">         <!--声明Thymeleaf命名空间--><head>  <title>Spittr</title>  <link rel="stylesheet" type="text/css" th:href="@{/resources/style.css}"></link>    <!--到样式表的th:href链接--></head><body>    <h1>Welcome to Spittr</h1>    <h1 th:text="${test}"></h1>    <table>      <tr>        <th>ID</th>        <th>NAME</th>        <th>AGE</th>      </tr>      <tr th:each="user : ${users}">        <td th:text="${user.id}">Onions</td>        <td th:text="${user.userName}">2.41</td>        <td th:text="${user.age}">2.41</td>      </tr>    </table></body></html>

OK，现在可以启动项目开始测试了，浏览器访问 http://localhost:8080/项目名/thymeleaf
得到如期结果，后台传过来的值和集合都可以在前台显示

知识补充：
SSM+THYMELEAF整合 - CSDN博客
http://blog.csdn.net/plotu_charon/article/details/62108217
Spring Boot学习记录(二)–thymeleaf模板 - CSDN博客
http://blog.csdn.net/u012706811/article/details/52185345
Spring Web MVC框架（十二） 使用Thymeleaf - 简书
http://www.jianshu.com/p/3204a904f615

努力学习，好好工作