Spring Boot之Thymeleaf开发

Spring Boot之Thymeleaf开发

1、Thymeleaf模板引擎

Spring Boot 提供了大量的模板引擎，包括FreeMarker\Groovy\Thymeleaf\Velocity和Mustache,Spring Boot 中推荐使用Thymeleaf作为模板引擎，因为Thymeleaf提供了完美的Spring MVC的支持。

2、Thymeleaf基础知识

Thymeleaf是一个Java类库，他说一个xml/xhtml/html5的模板引擎，可以作为MVC的web应用的View层。
Thymeleaf还提供了额外的模块与Spring MVC集成，所以我们还可以使用Thymeleaf完全替代JSP。

2.1、引入Thymeleaf

在标签中添加thymeleaf命名空间，将静态页面转换为动态的视图。
通过”@{}”引用web静态资源。

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<script th:src="@{jqeury.min.js}" type="text/javascript"></script>
</body>
</html>

2.2范围model中的数据

通过”${}”访问model中的属性，这个jsp即为相似。

<div>
<h3>访问model</h3>
<span th:text="${singlePerson.name}"></span>
</div>

2.3.引入URL

Thymeleaf对于URL的处理是通过语法@{…}来处理的

<a th:href="@{https://blog.csdn.net/java_mdzy/article/category/7716138}">绝对路径</a>
<a th:href="@{/}">相对路径</a>
<a th:href="@{css/bootstrap.min.css}">Content路径,默认访问static下的css文件夹</a>

2.4使用运算符

在表达式中可以使用各类算术运算符，例如+, -, *, /, %

th:with="isEven=(${prodStat.count} % 2 == 0)"

逻辑运算符>, <, <=,>=，==,!=都可以使用，唯一需要注意的是使用<,>时需要用它的HTML转义符：

  th:if="${prodStat.count} &gt; 1"
    th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"

2.5数据迭代（数据循环）

Thymeleaf的迭代和JSP的写法很相似，代码如下

<div>
    <ul>
        <li th:each="person:${people}">
            <span th:text="${person.name}"></span>
            <span th:text="${person.age}"></span>
        </li>
    </ul>
</div>

3、项目实战

3.1新建项目

新建Spring Boot 项目，具体请参考初识springboot之快速搭建

3.2项目配置

添加项目依赖，在pom.xml中添加Thymeleaf依赖

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

配置视图解析器，在application.properties中可以配置thymeleaf模板解析器属性.就像使用springMVC的JSP解析器配置一样

#thymeleaf start
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#开发时关闭缓存,不然没法看到实时页面
spring.thymeleaf.cache=false
#thymeleaf end

3.3编写demo代码

项目目录如下图所示：
这里写图片描述
各个子类代码：
新建domain目录，用于新建实体。新建Person类，代码如下

package com.crazyang.domain;

/**
 * Created with IntelliJ IDEA.
 *
 * @Author crazyang
 * @Desciption:
 * @Date 2018-6-6 15:41
 */
public class Person {

    private String name;
    private Integer age;

    public Person() {
        super();
    }

    public Person(String name, Integer age) {
        super();
        this.name = name;
        this.age = age;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }
}

新建IndexController,用于控制前段请求和页面跳转。代码如下:

package com.crazyang.controller;


import com.crazyang.domain.Person;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import java.util.ArrayList;
import java.util.List;

/**
 * Created with IntelliJ IDEA.
 *
 * @Author crazyang
 * @Desciption:
 * @Date 2018-6-6 14:02
 */
@Controller
public class IndexController {
    private Logger logger = LoggerFactory.getLogger(IndexController.class);

    /**
     * 测试hello
     *
     * @return
     */
    @RequestMapping(value = "/index", method = RequestMethod.GET)
    public String hello(Model model) {
        //单个用户
        Person single = new Person("crazyang",66);
        //多个用户List，用于Thymeleaf中迭代
        List<Person> people = new ArrayList<Person>();
        Person p1 = new Person("zhangsan",11);
        Person p2 = new Person("lisi",16);
        Person p3 = new Person("wangwu",21);
        people.add(p1);
        people.add(p2);
        people.add(p3);

        model.addAttribute("person", single);
        model.addAttribute("people", people);
        return "index";
    }

}

index.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!--/*@thymesVar id="name" type="java.lang.String"*/-->
<div style="border: 1px gray solid ;margin: 10px">
<p th:text="'用户名！, ' + ${single.name} + '!'" >3333</p>
<p th:text="'用户年龄！, ' + ${single.age} + '!'" >3333</p>
</div>
<div style="border: 1px gray solid ;margin: 10px">
    <li th:each="person:${people}">
        <span th:text="${person.name}"></span>
        <span th:text="${person.age}"></span>
    </li>
</div>
</body>
</html>

4、运行结果

启动项目，浏览器中输入http://localhost:8080/index，结果如下图所示：
这里写图片描述

5、项目总结

本章简要介绍了Thymeleaf和Spring Boot结合使用，通过一个例子，展示了Thymeleaf使用中的简洁方便。

四、Spring Boot Web开发二之Thymeleaf开发