第一个 Thymeleaf 模板页

学习完整课程请移步互联网 Java 全栈工程师

本节视频

【视频】微服务框架-SpringBoot-Thymeleaf-第一个模板页

引入依赖

主要增加 spring-boot-starter-thymeleaf 和 nekohtml 这两个依赖

spring-boot-starter-thymeleaf：Thymeleaf 自动配置
nekohtml：允许使用非严格的 HTML 语法

完整的 pom.xml 如下：



    4.0.0

    com.funtl
    hello-spring-boot
    0.0.1-SNAPSHOT
    jar

    hello-spring-boot
    

    
        org.springframework.boot
        spring-boot-starter-parent
        2.0.2.RELEASE
         
    

    
        UTF-8
        UTF-8
        1.8
    

    
        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.springframework.boot
            spring-boot-starter-tomcat
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
            org.springframework.boot
            spring-boot-starter-actuator
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        

        
            net.sourceforge.nekohtml
            nekohtml
            1.9.22
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
                
                    com.funtl.hello.spring.boot.HelloSpringBootApplication

在 `application.yml` 中配置 Thymeleaf

spring:
  thymeleaf:
    cache: false # 开发时关闭缓存,不然没法看到实时页面
    mode: HTML # 用非严格的 HTML
    encoding: UTF-8
    servlet:
      content-type: text/html

创建测试用 JavaBean

创建一个测试效果的 JavaBean，简单封装一下即可

package com.funtl.hello.spring.boot.entity;

import java.io.Serializable;

public class PersonBean implements Serializable {

    private String name;
    private Integer 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;
    }
}

创建测试用 Controller

创建一个 Controller，造一些测试数据并设置跳转

package com.funtl.hello.spring.boot.controller;

import com.funtl.hello.spring.boot.entity.PersonBean;
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;

@Controller
@RequestMapping(value = "thymeleaf")
public class IndexController {

    @RequestMapping(value = "index", method = RequestMethod.GET)
    public String index(Model model) {
        PersonBean person = new PersonBean();
        person.setName("张三");
        person.setAge(22);

        List people = new ArrayList<>();
        PersonBean p1 = new PersonBean();
        p1.setName("李四");
        p1.setAge(23);
        people.add(p1);

        PersonBean p2 = new PersonBean();
        p2.setName("王五");
        p2.setAge(24);
        people.add(p2);

        PersonBean p3 = new PersonBean();
        p3.setName("赵六");
        p3.setAge(25);
        people.add(p3);

        model.addAttribute("person", person);
        model.addAttribute("people", people);

        return "index";
    }
}

创建测试页面

在 templates 目录下创建 index.html 文件，代码如下：




    
    Hello Thymeleaf


    
        访问 Model：
    
    
        访问列表
        
            
                
                    姓名
                    年龄

修改 html 标签用于引入 thymeleaf 引擎，这样才可以在其他标签里使用 th:* 语法，声明如下：

测试访问

启动成功后，访问：http://localhost:9090/thymeleaf/index 即可看到效果