SpringBoot 學習教程（三）：Thymeleaf模板引擎

時間 2019-11-18

標籤 springboot 學習教程 thymeleaf 模板引擎欄目 Spring 简体版

原文原文鏈接

Web開發的核心內容主要包括內嵌Servlet容器和Spring MVCjavascript

Thymeleaf的官方例子https://github.com/thymeleaf/thymeleafexamples-petclinichtml

（一）Thymeleaf基礎知識html5

Thymeleaf是一個java類庫，他是一個xml/xhtml/html5的模板引擎，且提供額外的模塊與Spring MVC集成，能夠做爲MVC的Web應用的View層，取代jsp。java

1.引入Thymeleafgit

　　經過命名空間xmlns:th=http://www.thymeleaf.org，將靜態頁面轉換爲動態視圖，th:前綴github

2.訪問Model的數據web

　　經過「${}」訪問model中的屬性spring

3.Model中的數據迭代app

　　與jsp相似jsp

4.數據判斷

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

　　${not # lists.isEmpty(people)}表達式判斷people是否爲空

5.在JavaScript中訪問model

　　<th:inline="javascript">

　　e.g.var single = [[${singlePerson}]];

　　[[${}]]格式得到實際的值

（二）Spring boot實例

1.建立項目時添加Thymeleaf依賴，會自動包含spring-boot-starter-web

2.JavaBean

　　 Person.java

package com;

public class Person {
    private String name;
    private Integer age;
    
    public Person(){
        
    }

    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;
    }
}

3.演示頁面

haha.html放置在src/main/resources/templates下

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
</head>
<body>
<div>
    <span th:text="${singlePerson.name}"></span>
</div>

<div th:if="${not # lists.isEmpty(people)}">
    <h3 >列表</h3>
</div>
<div>
    <ul>
        <li th:each="person:${people}">
            <span th:text="${person.name}"></span>
            <span th:text="${person.age}"></span>
            <button th:onclick="'getName(\'' + ${person.name} + '\');'">獲取名字</button>
        </li>
    </ul>
</div>
    <script th:inline="javascript">
        var single = [[${singlePerson}]];
        alert(single.name +"/" + single.age);
        
        function getName(name){
            alert(name);
        }
    
    </script>
</body>
</html>

application.properties默認配置以下，根據需求修改

# THYMELEAF (ThymeleafAutoConfiguration)
spring.thymeleaf.cache=true # Enable template caching.
spring.thymeleaf.check-template=true # Check that the template exists before rendering it.
spring.thymeleaf.check-template-location=true # Check that the templates location exists.
spring.thymeleaf.content-type=text/html # Content-Type value.
spring.thymeleaf.enabled=true # Enable MVC Thymeleaf view resolution.
spring.thymeleaf.encoding=UTF-8 # Template encoding.
spring.thymeleaf.excluded-view-names= # Comma-separated list of view names that should be excluded from resolution.
spring.thymeleaf.mode=HTML5 # Template mode to be applied to templates. See also StandardTemplateModeHandlers.
spring.thymeleaf.prefix=classpath:/templates/ # Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.suffix=.html # Suffix that gets appended to view names when building a URL.
spring.thymeleaf.template-resolver-order= # Order of the template resolver in the chain.
spring.thymeleaf.view-names= # Comma-separated list of view names that can be resolved.

5.數據及程序入口

　　ThymeleafdemoApplication.java

package com;

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

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@SpringBootApplication
public class ThymeleafdemoApplication {

    @RequestMapping("/")
    public String index(Model model){
        Person single = new Person("aa",11);
        List<Person> people  = new ArrayList<Person>();
        people.add(new Person("xx",11));
        people.add(new Person("yy",22));
        people.add(new Person("zz",33));
        
        model.addAttribute("people", people);
        model.addAttribute("singlePerson", single);
        return "haha";
    }
    
    public static void main(String[] args) {
        SpringApplication.run(ThymeleafdemoApplication.class, args);
    }
}