整合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>