- gradle配置
不需要配置spring boot默认的
compile('org.springframework.boot:spring-boot-starter-thymeleaf')
只需要添加
compile("org.thymeleaf:thymeleaf:3.0.2.RELEASE")
compile("org.thymeleaf:thymeleaf-spring4:3.0.2.RELEASE")
compile("nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:2.1.1")
- maven配置
这个就更简单了,添加spring-boot-starter-thymeleaf,然后再配置版本号
<properties>
<thymeleaf.version>3.0.2.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.0.4</thymeleaf-layout-dialect.version>
</properties>
使用Thymeleaf3的新功能css和js模板
import org.springframework.beans.BeansException;
import org.springframework.context.ApplicationContext;
import org.springframework.context.ApplicationContextAware;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.thymeleaf.TemplateEngine;
import org.thymeleaf.spring4.SpringTemplateEngine;
import org.thymeleaf.spring4.templateresolver.SpringResourceTemplateResolver;
import org.thymeleaf.spring4.view.ThymeleafViewResolver;
import org.thymeleaf.templateresolver.ITemplateResolver;
import org.thymeleaf.templatemode.*;
@Configuration
public class ThymeleafConfig implements ApplicationContextAware{
private static final String UTF8 = "UTF-8";
private ApplicationContext applicationContext;
private String[] array(String ...args) {
return args;
}
@Override
public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
this.applicationContext = applicationContext;
}
private TemplateEngine templateEngine(ITemplateResolver templateResolver) {
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.setTemplateResolver(templateResolver);
return engine;
}
private ITemplateResolver htmlTemplateResolver() {
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setApplicationContext(applicationContext);
resolver.setPrefix("classpath:/templates/");
resolver.setTemplateMode(TemplateMode.HTML);
return resolver;
}
@Bean
public ViewResolver htmlViewResolver() {
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine(htmlTemplateResolver()));
resolver.setContentType("text/html");
resolver.setCharacterEncoding(UTF8);
resolver.setViewNames(array("*.html"));
resolver.setCache(false);
return resolver;
}
private ITemplateResolver cssTemplateResolver() {
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setApplicationContext(applicationContext);
resolver.setPrefix("classpath:/templates/");
resolver.setTemplateMode(TemplateMode.CSS);
return resolver;
}
@Bean
public ViewResolver cssViewResolver() {
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine(cssTemplateResolver()));
resolver.setContentType("text/css");
resolver.setCharacterEncoding(UTF8);
resolver.setViewNames(array("*.css"));
resolver.setCache(false);
return resolver;
}
private ITemplateResolver javascriptTemplateResolver() {
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setApplicationContext(applicationContext);
resolver.setPrefix("classpath:/templates/");
resolver.setTemplateMode(TemplateMode.JAVASCRIPT);
return resolver;
}
@Bean
public ViewResolver javascriptViewResolver() {
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine(javascriptTemplateResolver()));
resolver.setContentType("application/javascript");
resolver.setCharacterEncoding(UTF8);
resolver.setViewNames(array("*.js"));
resolver.setCache(false);
return resolver;
}
}
上面直接提供了现成的代码,然后再yml文件里面把缓存和默认的thymeleaf关了
spring:
thymeleaf:
cache: false
enabled: false
完成了。下面给一个示例:
resources/templates/index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
>
<head>
<title>Thymeleaf 3 example</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="main.css">
<script src="common.js" ></script>
</head>
<body>
<h1>User hobbies</h1>
<ul>
<li th:each="hobby : ${hobbies}"
th:text="${hobby}">
Cinema
</li>
</ul>
<button type="button" onclick="showCode()">Show secret code</button>
<div id="code"></div>
</body>
</html>
resources/templates/main.css
body {
font-family: Arial, sans-serif;
padding-left: 1em;
background-color: /*[[${backgroundColor}]]*/ pink;
}
resources/templates/common.js
function showCode() {
var code = /*[[${code}]]*/ '12345';
document.getElementById('code').innerHTML = code;
}