从.Net到Java学习第九篇——SpringBoot下Thymeleaf

从.Net到Java学习系列目录

Thymeleaf概述

  Thymeleaf 是一个流行的模板引擎,该模板引擎采用java语言开发。模板引擎是一个技术名称,是跨领域平台的概念,在java语言体系下有模板引擎,在C#、PHP语言体系下也有模板引擎,甚至在JavaScript中也会用到模板引擎技术。
Java生态下的模板引擎有Thymeleaf 、Freemaker、Velocity、Beetl(国产)等。Thymeleaf模板既能用于web环境下,也能用于非web环境下,在非web环境下,它能直接显示模板上的静态数据,在web环境下,它能像JSP一样从后台接收数据并替换掉模板上的静态数据。.net下面的razor也是一个模板引擎。

Thymeleaf它是基于HTML的,以HTML标签为载体,Thymeleaf要寄托在HTML的标签下实现对数据的展示。
Thymeleaf的官方网站:http://www.thymeleaf.org
Spring boot集成了Thymeleaf模板技术,并且Spring boot官方也推荐使用
Thymeleaf来替代JSP技术。
Thymeleaf是另外的一种模板技术,它本身并不属于spring boot,
srpingboot只是很好的集成了这种模板技术,作为前端页面的数据展示。

Spring Boot集成Thymeleaf配置

(1)修改pom.xml,在Maven中引入Thymeleaf的依赖:

        
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-thymeleafartifactId>
        dependency>

(2)在Spring boot的核心配置文件application.yml中对Thymeleaf进行配置:

spring:
  profiles:
    active: test
  thymeleaf:
    cache: false #开发阶段,建议关闭Thymeleaf的缓存
    mode: LEGACYHTML5 #使用遗留的html5以去掉对html标签的校验

在使用Spring boot的过程中,如果使用thymeleaf作为模板文件,则要求HTML格式必须为严格的html5格式,所有标签必须有结束标签,否则会报错。如果不想对标签进行严格的验证,使用spring.thymeleaf.model=LEGACYHTML5去掉验证,去掉该验证还需要引入许下的依赖,否则会报错。

        <dependency>
            <groupId>net.sourceforge.nekohtmlgroupId>
            <artifactId>nekohtmlartifactId>
            <version>1.9.22version>
        dependency>

 (3)新建一个控制器ThymeleafController去映射到模板页

@Controller
public class ThymeleafController {
    @GetMapping("/index")
    public String index(Model model){
        model.addAttribute("msg","Spring boot集成Thymeleaf");
        return "index"; //返回的是一个页面,可以省略后缀.html
    }
}

(4)在src/main/resources的templates下面新建一个index.html页面用于数据展示,HTML页面的元素中药记得加入以下属性:

<html xmlns:th="http://www.thymeleaf.org">

 index.html源码如下:

DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<p th:text="${msg}">你好p>
body>
html>

 Springboot使用thymeleaf作为视图展示,约定将模板文件放置在src/main/resources/templates目录下,静态资源放置在src/main/resources/static目录下

运行IDEA项目

如果不启动spring boot直接在浏览器中浏览这个页面

从.Net到Java学习第九篇——SpringBoot下Thymeleaf_第1张图片

Thymeleaf标准变量表达式

语法:${...}

变量表达式用于访问容器(tomcat)上下文环境中的变量,功能和JSTL中的${}相同。Thymeleaf中的变量表达式使用${变量名}的方式获取其中的数据。

新建实体类User

package com.yujie.entity;

public class User {
    private String name;
    private String sex;
    private Integer age;
    private String email;

    public String getName() {
        return name;
    }

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

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public Integer getAge() {
        return age;
    }

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

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }
}

在Spring mvc的Controller中使用向前端传输数据,ThymeleafController代码如下:

    @GetMapping("/user")
    public String user(Model model){
        User user=new User();
        user.setAge(21);
        user.setEmail("[email protected]");
        user.setName("玉杰");
        model.addAttribute("user",user);
        return "user";
    }

templates目录下面,新建一个user.html页面,前端接收代码:

DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<p>用户信息如下:p>
<div th:text="${user.name}">div>
<div th:text="${user.age}">div>
<div th:text="${user.email}">div>
body>
html>

浏览

从.Net到Java学习第九篇——SpringBoot下Thymeleaf_第2张图片

选择变量表达式

选择变量表达式,也叫星号变量表达式,使用th:object属性来绑定对象,比如:

<p>分割线——选择变量表达式p>
<div th:object="${user}">
    <div th:text="*{name}">div>
    <div th:text="*{age}">div>
    <div th:text="*{email}">div>
div>

 继续

从.Net到Java学习第九篇——SpringBoot下Thymeleaf_第3张图片

选择变量表达式首先使用th:object来绑定后台传来的user对象,然后使用*来代表这个对象,后面{}中的值是此对象中的属性。
选择变量表达式*{...}是另一种类似于变量表达式${...}表示变量的方法。
选择变量表达式在执行时是在选择的对象上求解,而${...}是在上下文的变量Model上求解。
通过th:object属性指明选择变量表达式的求解对象。
标准变量表达式和选择变量表达式可以混合在一起使用,比如:

${user.email}">

也可以不使用th:object进行对象的选择,而直接使用*{...}获取数据,比如:

不使用th:object

Thymeleaf的URL表达式

语法:@{...}

URL表达式可用于

你可能感兴趣的:(从.Net到Java学习第九篇——SpringBoot下Thymeleaf)