SpringMVC+Thymeleaf 簡單使用

一、簡介

1、Thymeleaf 在有網絡和無網絡的環境下皆可運行，而且完全不需啟動WEB應用，即它可以讓美工在瀏覽器查看頁面的靜態效果，也可以讓程序員在服務器查看帶數據的動態頁面效果。瀏覽器解釋 html 時會忽略未定義的標簽屬性，所以 thymeleaf 的模板可以靜態地運行；當有數據返回到頁面時，Thymeleaf 標簽會動態地替換掉靜態內容，使頁面動態顯示。

2、Thymeleaf 開箱即用的特性。它提供標准和spring標准兩種方言，可以直接套用模板實現JSTL、 OGNL表達式效果，避免每天套模板、該jstl、改標簽的困擾。同時開發人員也可以擴展和創建自定義的方言。

3、Thymeleaf 提供spring標准方言和一個與 SpringMVC 完美集成的可選模塊，可以快速的實現表單綁定、屬性編輯器、國際

化等功能。

二、目的

    為了修改樣式的時候不需要啟動服務器。直接打開html。

三、解析器

Thymeleaf模板視圖解析器配置步驟：模板解析器->模板引擎->視圖解析器，注釋掉的代碼為個人JSP、Tiles視圖解析器的測試代碼，與本例無關。

四、SpringMVC+Thymeleaf

 

Pom.xml

 

<project xmlns="http://maven.apache.org/POM/4.0.0" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.springthymeleaf</groupId>
    <artifactId>springmvc-thymeleaf</artifactId>
    <packaging>war</packaging>
    <version>1.0-SNAPSHOT</version>
    <name>Spring Thymeleaf Example</name>
    <url>http://maven.apache.org</url>

    <properties>
        <spring.version>4.1.3.RELEASE</spring.version>
        <thymeleaf.version>2.1.2.RELEASE</thymeleaf.version>
    </properties>

    <dependencies>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <!-- <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
            <scope>provided</scope>
        </dependency> -->

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-beans</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf-spring4</artifactId>
            <version>${thymeleaf.version}</version>
        </dependency>
        <dependency>
            <groupId>org.thymeleaf</groupId>
            <artifactId>thymeleaf</artifactId>
            <version>${thymeleaf.version}</version>
        </dependency>

    </dependencies>

    <build>
        <outputDirectory>src/main/webapp/WEB-INF/classes</outputDirectory>
        <plugins>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.6</source>
                    <target>1.6</target>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

 

Web.xml

 

<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

    <display-name>springmvc thymeleaf</display-name>

    <servlet>
        <servlet-name>mvc-dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>mvc-dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/mvc-dispatcher-servlet.xml</param-value>
    </context-param>

    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

</web-app>

 

mvc-dispatcher-servlet.xml

 注：可以深入了解thymeleef 模板解析器的源碼，生命周期等

<beans xmlns="http://www.springframework.org/schema/beans" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans     
        http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
        http://www.springframework.org/schema/context 
        http://www.springframework.org/schema/context/spring-context-3.0.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

    <context:component-scan base-package="com.springthymeleaf"/>

    <mvc:annotation-driven />
    
    <mvc:resources location="/static/" mapping="/static/**" />
    
    <!-- 模板解析器  -->
    <bean id="templateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
        <property name="prefix" value="/WEB-INF/templates/" />
        <property name="suffix" value=".html" />
        <property name="templateMode" value="HTML5" />
        <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>

</beans>

 

hello.html

 

 <html  xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="static/js/jquery-1.10.2.min.js" th:src="@{/static/js/jquery-1.10.2.min.js}" ></script>

<script th:inline="javascript">
  $(function(){
   var _ctx = [[${application.ctx}]];
    alert("Project ContextPath:"+_ctx);
    alert("路徑:"+$("#ctx").val());
  });
</script>
<title>Spring MVC + Thymeleaf Example</title>
</head>
<body>
    <!-- Project ContextPath -->
    <input type="hidden" id="ctx" th:value="${application.ctx}" /> Hello,
    <span th:text="${name}" />!
    <br /> Hello,
    <span th:text="${query}" />!
    <br /> Hello,
    <span th:text="${submit}" />!
    <br />
    <a th:href="@{/query?name=a_href}"> query</a>
    <br />
    <form th:action="@{/submit}">
        <input type="text" name="name" />
        <button type="submit">submit</button>
    </form> 

</body>
</html>

 

HelloController.java

 

package com.springthymeleaf.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
@RequestMapping("/")
public class HelloController {

    @RequestMapping(value = "/{name}", method = RequestMethod.GET)
    public String getMovie(@PathVariable String name, ModelMap model) {
        model.addAttribute("name", name);
        model.addAttribute("query", "");
        model.addAttribute("submit", "");
        return "hello";
    }

    @RequestMapping(value = "/query", method = RequestMethod.GET)
    public String query(@RequestParam("name") String name, ModelMap model) {
        model.addAttribute("name", "");
        model.addAttribute("query", name);
        model.addAttribute("submit", "");
        return "hello";
    }

    @RequestMapping(value = "/submit", method = RequestMethod.GET)
    public String submit(@RequestParam("name") String name, ModelMap model) {
        model.addAttribute("name", "");
        model.addAttribute("query", "");
        model.addAttribute("submit", name);
        return "hello";
    }

}

 

ApplicationContext.java

 

package com.springthymeleaf;

import javax.servlet.ServletContext;

import org.springframework.stereotype.Component;
import org.springframework.web.context.ServletContextAware;

/**
 * 將ContextPath寫入application中，給靜態文件引用時用、及URL鏈接地址用
 */
@Component
public class ApplicationContext implements ServletContextAware {

    @Override
    public void setServletContext(ServletContext context) {
        String ctx = context.getContextPath();
        System.out.println("ctx=" + ctx);
        context.setAttribute("ctx", ctx);
    }

}

 

 

五、參考鏈接：

thymeleaf 模板語言簡介 http://blog.csdn.net/mlin_123/article/details/51816533

org.thymeleaf.spring4.templateresolver模板視圖解析器 http://http://blog.csdn.net/mayi92/article/details/77720663