一、項目配置
以前在SpringBoot中使用過Thymeleaf，感覺非常好用，可是現在准備做一個ssm的項目，里面需要集成一個前端模版引擎。為什么選擇Thymeleaf，他有以下好處
- Thymeleaf 在有網絡和無網絡的環境下皆可運行，即它可以讓美工在瀏覽器查看頁面的靜態效果，也可以讓程序員在服務器查看帶數據的動態頁面效果。這是由於它支持 html 原型，然后在 html 標簽里增加額外的屬性來達到模板+數據的展示方式。瀏覽器解釋 html 時會忽略未定義的標簽屬性，所以 thymeleaf 的模板可以靜態地運行；當有數據返回到頁面時，Thymeleaf 標簽會動態地替換掉靜態內容，使頁面動態顯示。
- Thymeleaf 開箱即用的特性。它提供標准和spring標准兩種方言，可以直接套用模板實現JSTL、 OGNL表達式效果，避免每天套模板、該jstl、改標簽的困擾。同時開發人員也可以擴展和創建自定義的方言。
- Thymeleaf 提供spring標准方言和一個與 SpringMVC 完美集成的可選模塊，可以快速的實現表單綁定、屬性編輯器、國際化等功能。
1、項目結構
2、父pom.xml
<properties> <spring.version>4.3.20.RELEASE</spring.version> <thymeleaf.version>3.0.6.RELEASE</thymeleaf.version> </properties> <!-- 依賴聲明 --> <dependencyManagement> <dependencies> <!-- SpringMVC 依賴配置--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <!-- SpringMVC 依賴配置--> <!-- Thymeleaf 依賴配置--> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring4</artifactId> <version>${thymeleaf.version}</version> </dependency> <!-- Thymeleaf 依賴配置--> </dependencies> </dependencyManagement>
3、pom.xml
<dependencies> <!-- junit --> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.11</version> <scope>test</scope> </dependency> <!-- junit --> <!-- SpringMVC 依賴配置--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> </dependency> <!-- SpringMVC 依賴配置--> <!-- Thymeleaf 依賴配置--> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring4</artifactId> </dependency> <!-- Thymeleaf 依賴配置--> </dependencies>
4、web.xml
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" > <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"> <display-name>upms-server</display-name> <!-- Spring的配置--> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath*:spring-servlet.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <!-- springMVC的核心控制器 --> <servlet> <servlet-name>springMVC</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath*:springMVC-servlet.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springMVC</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>
二、Controller控制器及jsp頁面
1、index.html
<html xmlns:th="http://www.thymeleaf.org" > <head> <meta charset="UTF-8" /> <script type="text/javascript" src="static/js/jquery.min.js" th:src="@{/static/js/jquery.min.js}" ></script> <title>index</title> <script th:inline="javascript"> var ctx = [[@{/}]]; </script> </head> <body> 我是Index頁 <a th:href= "@{/hello}"> hello</a> </body> </html>
記住不要忘記jquery哦！
2、hello.html
<html xmlns:th="http://www.thymeleaf.org" > <head> <meta charset="UTF-8" /> <script type="text/javascript" src="static/js/jquery.min.js" th:src="@{/static/js/jquery.min.js}" ></script> <title>hello</title> </head> <body> 我是Hello頁 </body> </html>
三、運行效果圖
1、index頁面
2、hello頁面
這樣SpringMVC + Thymeleaf就集成成功了！