整合thymeleaf模板引擎

時間 2019-11-22

標籤整合 thymeleaf 模板引擎简体版

原文原文鏈接

Thymeleafcss

Thymeleaf是一個XML/XHTML/HTML5模板引擎，可用於Web與非Web環境中的應用開發。它是一個開源的Java庫，基於Apache License 2.0許可，由Daniel Fernández建立，該做者仍是Java加密庫Jasypt的做者。html

整合thymeleaf

在項目中使用thymeleaf步驟以下前端

在pom中引入Thymeleaf的jar包

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

在application.properties配置文件中配置相關參數

###################### thymeleaf 模板引擎
# 啓動模板緩存  生產環境設置爲true
spring.thymeleaf.cache=false
# 檢查 templates 位置是否存在
spring.thymeleaf.check-template-location=true 
# 類型
spring.thymeleaf.content-type=text/html 
# 啓動thymeleaf
spring.thymeleaf.enabled=true 
# 編碼
spring.thymeleaf.encoding=utf-8
#設置模板統一的後綴名
spring.thymeleaf.suffix=.html

在resources/templates/下建立一個index.html文件

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

建立一個IndexController，爲index.html提供訪問路由

@Controller
public class IndexController {

	@RequestMapping("index")
	public String index(){
		return "index";
	}
}

啓動程序，在瀏覽器訪問http://localhost:8080/index ，若是能看到頁面顯示hello word 字樣，表示thymeleaf 已經集成成功了。java

若是設置了spring.thymeleaf.cache=false 可是在修改了html文件以後仍是沒有生效，在ieda中能夠使用r以下方式：spring

Build Module cms 是編輯全部瀏覽器

Recompile index.html 是隻編輯這個文件緩存

完成後再刷新頁面就能夠了前端框架

關於thymeleaf的模板引擎語法，能夠參考官網：http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.htmlapp

引入UI前端框架Layui

將layui的文件拷貝到/static/目錄下，好比個人：框架

新建一個模板頁面layout.html，頁面內容以下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>layout 後臺大框架佈局 - Layui</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css" th:href="@{/layui/css/layui.css}"/>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <!-- 頭部區域（可配合layui已有的水平導航） -->
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左側導航區域（可配合layui已有的垂直導航） -->
        </div>
    </div>
    <div class="layui-body">
        <!-- 內容主體區域 -->
    </div>
    <div class="layui-footer">
        <!-- 底部固定區域 -->
    </div>
</div>
<script src="../static/layui/lay/dest/layui.all.js" th:src="@{/layui/lay/dest/layui.all.js}"></script>
<script>
    //JavaScript代碼區域
</script>
</body>
</html>

這裏就注意一下引入外部文件的方式。

標籤閉合

一、設置spring.thymeleaf.mode

spring.thymeleaf.mode=LEGACYHTML5

二、添加相關依賴

<dependency>
			<groupId>net.sourceforge.nekohtml</groupId>
			<artifactId>nekohtml</artifactId>
			<version>1.9.22</version>
		</dependency>

相關標籤/搜索

每日一句

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