@javazjm 2017-10-30T02:30:50.000000Z 字数 3346 阅读 2155

SpringBoot系列学习三：Web支持之Thymeleaf

Springboot web Thymeleaf

SpringBoot系列学习三：Web支持之Thymeleaf
Web开发支持

Web开发支持

Spring Boot中spring-boot-starter-web提供对web的支持，内嵌Tomcat和SpringMVC的依赖，Web相关的自动配置在spring-boot-autoconfigure.jar的 org.springframework.boot.autoconfigure.web下。

Thymeleaf支持

提倡使用Thymeleaf,因为Thymeleaf提供了完美的Spring MVC的支持。

基础知识

Thymeleaf是一个java类库，是xml/xhtml/html5的模板引擎，提供额外模块与Spring MVC集成，可完全替代JSP

1.引入

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--css-->
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
    <!--js-->
    <script type="text/javascript" th:src="@{/js/utils.js}"></script>
</head>
</html>

通过xmlns:th="http://www.thymeleaf.org命名空间，将静态页面转换为动态视图，需要进行动态处理的元素使用“th:”为前缀。
通过“@{}”引用web静态资源。

2.访问model中的数据

通过“${}”访问，注意要在前面加“th:”

    <input type="hidden" name="gatewayOrderNO" th:value="${gatewayOrderNO}"/>
    <input type="hidden" name="uid" th:value="${uid}"/>

3.model中数据的迭代

使用th:each 来做循环迭代th:each="card : ${cards}"，cards为迭代元素。

<div class="card swiper-slide" th:each="card : ${cards}">
    <input type="hidden" name="balance" th:value="${card.balance}" />
    <input type="hidden" name="cardNo" th:value="${card.cardNo}" />
    <img th:src="${card.imageUrl}" alt="" />
    <span th:text="${card.nickCardNo}"></span>
</div>

4.数据判断

通过${not #lists.isEmpty(people)}判断people是否为空，Thymelead支持>、<、>=、<=、==、！=及SpringEL表达式。

<div th:if="${not #lists.isEmpty(people)}">
</div>

5.在Javascript中访问model

通过th:inline="javascript"添加到script标签，JavaScript代码即可访问到model中的属性
通过“[[${}]]”获取值

<script th:inline="javascript">
    /*<![CDATA[*/
    var time = [[${time}]];
    /*]]>*/
</script>

6.Html中获取值

点击按钮出现值，getName()是函数。

<div class="card swiper-slide" th:each="card : ${cards}">  
    <input type="hidden" name="cardNo" th:value="${card.cardNo}" />
    <button class="btn" th:onclick="'getName(\'' + ${card.cardNo} + '\');'">获得卡号</button>
</div>

与Spring MVC 集成

集成模板引擎的话需要定义ViewResolver,Thymeleaf已定义好了，org.thymeleaf.spring4.view.ThymeleafView和org.thymeleaf.spring4.view.ThymeleafViewResolver(默认使用ThymeleafView作为View),Thymeleaf给我们提供了一个SpringTemplateEngine类，用来驱动在Spring MVC下使用Thymeleaf模板引擎，还提供了一个TemplateResolver用来设置通用的模板引擎（包含前缀、后缀等）,这样在Spring MVC中集成Thymeleaf就简单了。

@Bean
public TemplateResolver templateResolver(){
    TemplateResolver templateResolver = new ServletContextTemplateResolver();
    templateResolver.setPrefix("/WEB-INF/templates");
    templateResolver.setSuffix(".html");
    templateResolver.setTemplateMode("HTML5");
    return templateResolver;
}
@Bean
public SpringTemplateEngine templateEngine(){
    SpringTemplateEngine templateEngine = new SpringTemplateEngine();
    templateEngine.setTemplateResolver(templateResolver());
    return templateEngine;
}
@Bean
public ThymeleafViewResolver thymeleafViewResolver(){
    ThymeleafViewResolver thymeleafViewResolver = new ThymeleafViewResolver();
    thymeleafViewResolver.setTemplateEngine(templateEngine());
//        thymeleafViewResolver.setViewClass(ThymeleafView.class);
    return thymeleafViewResolver;
}

Spring Boot的Thymeleaf支持

Spring Boot 通过org.springframework.boot.autoconfigure.thymeleaf包对Thymeleaf进行自动配置。通过ThymeleafAutoConfiguration类对集成所需的bean进行自动配置，包括templateResolver、templateEngine和thymeleafViewResolver的配置。通过ThymeleafProperties来配置Thymeleaf，在application.properties中以spring.thymeleaf开头来配置。

eg:
#关闭缓存配置
spring.thymeleaf.cache=false