Spring Boot 整合 Thymeleaf模板引擎 Thymeleaf入门

Spring Boot 整合 Thymeleaf

image

Thymeleaf简介

  • 1.Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它可以完全替代 JSP 。相较与其他的模板引擎,它有如下三个极吸引人的特点
  • 2.Thymeleaf 在有网络和无网络的环境下皆可运行,即 它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。
  • 3.Thymeleaf 开箱即用的特性。它提供标准和 Spring 标准两种方言,可以直接套用模板实现 JSTL、 OGNL 表达式效果,避免每天套模板、改 JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

当然Spring Boot页提供了大量的模板包括:

  • 1.FreeMarker
  • 2.Groovy
  • 3.Mustache
  • 4.Thymeleaf 用户居多
  • 5.Velocity
  • 6.Beetl 国产号称比上边那个快10倍 但是没人用 Beetl蜜蜂
    pom.xml文件里添加
 <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>
 # 添加nekohtml的目的:为了非严格遵守w3c编程规范
 # 比如 <input /> 必须要有结束符 否则编译报错
  <dependency>
        <groupId>net.sourceforge.nekohtml</groupId>
        <artifactId>nekohtml</artifactId>
        <version>1.9.22</version>
  </dependency>

在 application.yml 中配置 Thymeleaf 官方推荐使用yaml/yml格式的配置文件

yaml的使用简介

YAML 语言(发音:呀迈欧) yml的设计目标,就是方便人们读写。它实质上是一种通用的数据串行化格式。
它的基本语法规则如下。

  • 1.大小写敏感
  • 2.使用缩进表示层级关系
  • 3.缩进时不允许使用Tab键,只允许使用空格
  • 4.缩进的空格数目不重要,只要相同层级的元素左侧对齐即可
spring:
  thymeleaf:
    cache: false # 开发时关闭缓存,不然没法看到实时页面
    mode: HTML # 用非严格的 HTML  不加nekohtml依赖的话这个模式用不了 
    encoding: UTF-8
    servlet:
      content-type: text/html   

测试Thymeleaf

  • 创建测试用 JavaBean User
@Data //Lombok的注解 自动添加get set toString hashCode 等等基本方法
@Component //把这个bean注册到Spring
public class PersonBean implements Serializable {
    
    

    private String name;
    private Integer age;

}

  • 创建测试用 Controller
@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<PersonBean> 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";
    }
}
  • 创建测试页面
  • 创建空的index.html页面
  • 输入html5 按Tab
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello Thymeleaf</title>
</head>
<body>
    <div>
        <span>访问 Model:</span><span th:text="${person.name}"></span>
    </div>
    <div>
        <span>访问列表</span>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="human : ${people}">
                    <td th:text="${human.name}"></td>
                    <td th:text="${human.age}"></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
  • 修改 html 标签用于引入 thymeleaf 引擎,这样才可以在其他标签里使用 th:* 语法,声明如下:
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  • 测试访问 SpringBoot的Thymeleaf测试 出现以下数据则测试成功!
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1sb711i2-1588560276266)(02F69E2682964569845B93966674C7D3)]
  • 测试成功!

Spring官方为什么推荐使用yml格式配置文件

  • 功能强大
  • 能存复杂数据类型 》对象 数组 Map 等等…
  • 配置文件结构清晰

yml配置文件配置JavaBean初始化数据

  1. 修改User类 添加以下属性
    private Map<String,Object> hobby; //爱好
    private List<String> pets; //所有宠物
    private boolean ishappy; //是否开心 
  1. yml文件中添加以下配置
person:
  name: 师文远
  age: 22
  hobby: {
    
    v1:,v2:,v3: rap}
  pets:
    - aa1
    - aa2
    - aa3
  ishappy: true
  1. 在User 类名上方添加注解
@ConfigurationProperties(value = "person") //与yml中的对象保持一致
  1. 测试类中添加
    @Resource
    private User user;
    
    @Test
    public void getUserInfo() {
    
    
        System.out.println(user);
    }
  1. 测试结果

猜你喜欢

转载自blog.csdn.net/weixin_43420255/article/details/105914357