框架—Thymeleaf模板引擎 Spring5整合Thymeleaf（XML配置和註解配置）

時間 2019-11-26

標籤框架 thymeleaf 模板引擎 spring5 spring 整合 xml 配置註解欄目 Spring 简体版

原文原文鏈接

1. 依賴

在配置好SSM框架後，在pom.xml中添加以下依賴html

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>
複製代碼

2. 配置

配置文件方式 在Sping_mvc.xml中加入以下配置，而且註釋掉jsp的viewResolver或freemarker的配置

<bean id="templateResolver" class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
    <property name="prefix" value="/WEB-INF/templates/"/>
    <property name="suffix" value=".html"/>
    <property name="characterEncoding" value="UTF-8"/>
    <property name="order" value="1"/>
    <property name="templateMode" value="HTML5"/>
    <property name="cacheable" value="false"/>
</bean>

<bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine">
    <property name="templateResolver" ref="templateResolver"/>
</bean>

<bean id="viewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
    <property name="templateEngine" ref="templateEngine"/>
    <property name="characterEncoding" value="UTF-8"/>
</bean>
複製代碼

註解配置 在webConfig.java中中加入以下配置，若是配置了jsp或者freemarker請註釋掉jsp的viewResolver或freemarker的配置

@Configuration
@EnableWebMvc
@ComponentScan({"com.example.controller", "com.example.api"})
public class WebConfig implements WebMvcConfigurer {

    /** * 模板解析器 * * @return */
    @Bean
    public SpringResourceTemplateResolver templateResolver() {
        SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
        templateResolver.setPrefix(TEMPLATE_PREFIX);
        templateResolver.setSuffix(TEMPLATE_SUFFIX);
        templateResolver.setCacheable(TEMPLATE_CACHEABLE);
        templateResolver.setCharacterEncoding(CHARACTER_ENCODING);
        templateResolver.setTemplateMode(TEMPLATE_MODE);
        templateResolver.setOrder(TEMPLATE_ORDER);
        return templateResolver;
    }

    /** * 模板引擎 * * @return */
    @Bean
    public SpringTemplateEngine springTemplateEngine(SpringResourceTemplateResolver templateResolver) {
        SpringTemplateEngine templateEngine = new SpringTemplateEngine();
        templateEngine.setTemplateResolver(templateResolver);
        return templateEngine;
    }

    /** * 視圖解析器 * * @return */
    @Bean
    public ThymeleafViewResolver viewResolver(SpringTemplateEngine springTemplateEngine) {
        ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
        viewResolver.setTemplateEngine(springTemplateEngine);
        viewResolver.setCharacterEncoding(CHARACTER_ENCODING);
        return viewResolver;
    }
//.......其餘配置請自行配置
}
複製代碼

因爲我使用了CONSTANTS類裏面的static變量，因此附上Constants類相關的參數java

public final static String CHARACTER_ENCODING = "UTF-8";

    /** * thymeleaf模板引擎參數 */
    public final static String TEMPLATE_PREFIX = "/WEB-INF/templates/";
    public final static String TEMPLATE_SUFFIX = ".html";
    public final static Boolean TEMPLATE_CACHEABLE = false;
    public final static String TEMPLATE_MODE = "HTML5";
    public final static Integer TEMPLATE_ORDER = 1;
複製代碼

此配置須要注意如下幾點：web

templateResolver的prefix與suffix對應你的視圖層的文件位置
templateResolver的characterEncoding和viewResolver的都要設置成UTF-8中文才不會亂碼。
templateResolver的cacheable必定要在開發的時候設置成false否則沒法看到實時的頁面數據

3. 測試

controller：spring

在ModelMap裏面隨便設置一點值api

@RequestMapping("/test")
public String test(ModelMap map) {
    map.put("thText", "設置文本內容");
    map.put("thUText", "設置文本內容");
    map.put("thValue", "設置當前元素的value值");
    map.put("thEach", Arrays.asList("列表", "遍歷列表"));
    map.put("thIf", "msg is not null");
    map.put("thObject", new 							UserEntity("sadfa","asfasfd","asfsaf","asdfasf","saf","asfd","sadf",1));
		
    return "test";
}
複製代碼

test.htmltomcat

<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>TEST</h1>
<h2>Thymeleaf</h2>
<!--th:text 設置當前元素的文本內容，經常使用，優先級不高-->
<p th:text="${thText}" />
<p th:utext="${thUText}" />

<!--th:value 設置當前元素的value值，經常使用，優先級僅比th:text高-->
<input type="text" th:value="${thValue}" />

<!--th:each 遍歷列表，經常使用，優先級很高，僅此於代碼塊的插入-->
<!--th:each 修飾在div上，則div層重複出現，若只想p標籤遍歷，則修飾在p標籤上-->
<div th:each="message : ${thEach}"> <!-- 遍歷整個div-p，不推薦-->
    <p th:text="${message}" />
</div>
<div> <!--只遍歷p，推薦使用-->
    <p th:text="${message}" th:each="message : ${thEach}" />
</div>

<!--th:if 條件判斷，相似的有th:switch，th:case，優先級僅次於th:each, 其中#strings是變量表達式的內置方法-->
<p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}"></p>

<!--th:insert 把代碼塊插入當前div中，優先級最高，相似的有th:replace，th:include，~{} ：代碼塊表達式 -->
<div th:insert="~{grammar/common::thCommon}"></div>

<!--th:object 聲明變量，和*{} 一塊兒使用-->
<div th:object="${thObject}">
    <p>ID: <span th:text="*{id}" /></p><!--th:text="${thObject.id}"-->
    <p>TH: <span th:text="*{username}" /></p><!--${thObject.thName}-->
    <p>DE: <span th:text="*{password}" /></p><!--${thObject.desc}-->
</div>
</body>
</html>
複製代碼

幾點注意：mvc

在html首標籤裏面加上xmlnsapp

<html lang="cn" xmlns:th="http://www.thymeleaf.org">
複製代碼

一樣把head的meta設置一個charset=「UTF-8」框架

至此，你就能夠去配置tomcat運行項目了。jsp

文章發表於 2018-10-09 16:10:46

關於我

座標杭州，普通本科在讀，計算機科學與技術專業，20年畢業，目前處於實習階段。
主要作Java開發，會寫點Golang、Shell。對微服務、大數據比較感興趣，預備作這個方向。
目前處於菜鳥階段，各位大佬輕噴，小弟正在瘋狂學習。
歡迎你們和我交流鴨！！！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

框架—Thymeleaf模板引擎 Spring5整合Thymeleaf（XML配置 和 註解配置）

1. 依賴

2. 配置

3. 測試

關於我

框架—Thymeleaf模板引擎 Spring5整合Thymeleaf（XML配置和註解配置）