SpringBoot 学习教程（三）：Thymeleaf模板引擎

Web开发的核心内容主要包括内嵌Servlet容器和Spring MVC

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

（一）Thymeleaf基础知识

Thymeleaf是一个java类库，他是一个xml/xhtml/html5的模板引擎，且提供额外的模块与Spring MVC集成，可以作为MVC的Web应用的View层，取代jsp。

1.引入Thymeleaf

　　通过命名空间xmlns:th=http://www.thymeleaf.org，将静态页面转换为动态视图，th:前缀

2.访问Model的数据

　　通过“${}”访问model中的属性

3.Model中的数据迭代

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

运行——结果

1.访问http://localhost:8080

2.弹出窗口，获取到single对象的属性（name，age）

3.单机获取名字，取得对应model的name

posted @ 2019-05-14 13:19  不会游泳的鱼~~  阅读(627)  评论(0)  编辑  收藏  举报