• 快速上手thymeleaf

    1. thymeleaf

    首先先介绍一下thymeleaf,它是一种模板引擎技术,它和javaweb中的jsp很相似,不过thymeleaf可以搭配springboot进行使用,将它结合springboot搭建个人的博客是一个不错的选择。
    对于 thymeleaf的语法和之前接触的编程语言的语法差不多,如c,java等。
    我是在准备搭建自己的博客的过程中的,发现一个项目使用到了thymeleaf,最终发现对于写个人博客这样的小型项目确实不错。
    下面将通过一个简单的例子快速的将thymeleaf和springboot进行整合。

    2.thymeleaf的第一个例子

    • 首先在ideal中创建一个普通的maven项目

    • 在pom.xml中导入thymeleaf的坐标

    <dependency>
	<groupId>org.thymeleafgroupId>
	<artifactId>thymeleafartifactId>
	<version>3.0.15.RELEASEversion>
dependency>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 创建一个类
      在这里插入图片描述
      类中的代码如下,注意不要导错了包
    package com.wei;

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;

/**
 * @author weijiangquan
 * @date 2022/6/5 -13:41
 * @Description
 */
public class HelloThymeleaf {

    public static void main(String[] args) {
        //创建模板引擎
        TemplateEngine engine = new TemplateEngine();
        //准备模板
        String input = "";
        //准备数据,使用Context
        Context context = new Context();
        //调用引擎,处理模板和数据
        String out = engine.process(input,context);
        System.out.println("结果数据:"+out);
    }
}



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    运行结果如下
    在这里插入图片描述

    3 模板使用数据

    代码如下

    package com.wei;

import org.junit.Test;
import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;

/**
 * @author weijiangquan
 * @date 2022/6/5 -13:49
 * @Description 模板使用数据
 */
public class MyTest {

    @Test
    public void test1(){
        TemplateEngine engine = new TemplateEngine();
        String inStr = "";
        Context context = new Context();

        context.setVariable("name","你好啊");  //setVariable 是设置变量的意思


        String process = engine.process(inStr, context);
        System.out.println("html="+process);

    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    在这里插入图片描述

    4 使用模板文件

    • 首先先创建一个html文件
      在这里插入图片描述
    DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <input type="text" th:value="${name}"/>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    编写测试类

       @Test
    public void test02(){
        TemplateEngine engine = new TemplateEngine();
        //读取磁盘中的模板文件
        ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();
        //设置引擎使用 resolver
        engine.setTemplateResolver(resolver);
        //指定数据
        Context context = new Context();
        context.setVariable("name","王五");
        //处理模板
        String html = engine.process("main.html", context);
        System.out.println("html="+html);

    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述

    5 使用模板文件

    6 设置模板的前缀和后缀

    • 在resources资源目录下创建一个templates目录,在该目录下创建一个html文件
      在这里插入图片描述
      java的测试代码
        @Test
    public void test03(){
        TemplateEngine engine = new TemplateEngine();
        ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();

        resolver.setPrefix("templates/");  //设置前缀
        resolver.setSuffix(".html");      //设置后缀

        engine.setTemplateResolver(resolver);

        Context context = new Context();
        context.setVariable("name","小卫");

        engine.process("index",context);

        String html = engine.process("index",context);

        System.out.println(html);

    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    index.html文件

    DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<input type="text" th:value="${name}"/>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    在这里插入图片描述

    7 springboot环境搭建

    创建一个springboot项目
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    8 测试springboot中使用模板

    • 在appliacation.properties中加入如下内容
      在这里插入图片描述
    spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

    • 1
    • 2
    • 3
    • 4

    测试代码

    package com.wei.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;

/**
 * @author weijiangquan
 * @date 2022/6/5 -14:40
 * @Description
 */

@Controller
public class HelloController {

    /**
     * @param model 可以存放数据,放入到request作用域
     * @return String 表示视图
     */
    @RequestMapping("/hello")
    public String hello(Model model, HttpServletRequest request){
        //添加数据

        // model.addAttribute("name","小王");
        request.setAttribute("name","张三");
        //指定模板视图
        return "index";
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    在这里插入图片描述

    html中的代码如下
    在这里插入图片描述
    启动项目之后,在浏览器中输入localhost:8080/hello进行访问
    在这里插入图片描述

    9 变量表达式的基本基本语法(常用)

    目录结构如下

    在这里插入图片描述

    package com.wei.controller;

import com.wei.vo.School;
import com.wei.vo.Student;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * @author weijiangquan
 * @date 2022/6/5 -16:47
 * @Description
 */

@Controller
public class ExpressController {

    @RequestMapping("/express_var")
    public String express_var(Model model){

        //添加简单基本类型
        model.addAttribute("myName","张三");
        model.addAttribute("myAge",20);
        //添加对象类型
        Student student = new Student();
        student.setId(1001);
        student.setAge(12);
        student.setEmail("wei@qq.com");
        student.setName("小张");
        student.sex = "男";

        //创建school对象
        School school = new School();
        school.setSchname("东京大学");
        school.setSchaddress("北京");
        student.setSchool(school);

        model.addAttribute("student",student);
        return "var1";
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    package com.wei.vo;

/**
 * @author weijiangquan
 * @date 2022/6/5 -16:50
 * @Description
 */
public class Student {
    private Integer id;
    private String name;
    private String email;
    private Integer age;

    public String sex;


    private School school;

    public School getSchool() {
        return school;
    }

    public void setSchool(School school) {
        this.school = school;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

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

    public String getEmail() {
        return email;
    }

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

    public Integer getAge() {
        return age;
    }

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

    @Override
    public String toString() {
        return "Student{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", email='" + email + '\'' +
                ", age=" + age +
                '}';
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    package com.wei.vo;

/**
 * @author weijiangquan
 * @date 2022/6/5 -17:19
 * @Description
 */
public class School{

    private String schname;
    private String schaddress;

    public String getSchname() {
        return schname;
    }

    public void setSchname(String schname) {
        this.schname = schname;
    }

    public String getSchaddress() {
        return schaddress;
    }

    public void setSchaddress(String schaddress) {
        this.schaddress = schaddress;
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    在这里插入图片描述
    在这里插入图片描述
    var1.html

    DOCTYPE html>

<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
head>
<meta charset="UTF-8">
<title>变量表达式title>
<body>
    <p>获取简单数据类型的数据p>
    <p th:text="${myName}">p>
    <p th:text="${myAge}">p>

    <br/>
    <p>对象类型的属性p>
    <p th:text="${student.id}">idp>
    <p th:text="${student.name}">namep>
    <p th:text="${student.email}">emailp>
    <p th:text="${student.age}">agep>

    <br>
    <div>性别: <span th:text="${student.sex}">span>div>

    <br/>

    <div>
        学校名称:<span th:text="${student.school.schname}">span>
    div>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    10 选择表达式

    11 链接表达式 @{…}

    DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>@{}链接地址title>
head>
<body>
    <p>链接表达式p>
    <a th:href="@{queryStudent}">1.@{queryStudent}a>
    <br/>
    <a th:href="@{./queryStudent}">2.  ./queryStudenta>
    <br>
    <a th:href="@{../user/list}">3. ../queryStudenta>
    <br>
    <a th:href="@{/user/home}">4. /user/homea>
    <br>
    <a th:href="@{http://www.baidu.com}">5. http://www.baidu.coma>
    <br>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    链接表达式传递参数

    在这里插入图片描述

    12 标准表达式

    12.1 文本

    在这里插入图片描述
    在这里插入图片描述

    12.2 数字

    数字文本就是:数字，算术运算也可用:+,-,*,/和%,表达式中的值可以进行比较>,<,>=和<=符号，以及和!=可以被用来检查是否相等。一些符合需要使用实体gt(>)，lt(),ge(>=),le(<=),not(!)。还有eq(),neq(!=)

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    12.3 布尔

    在这里插入图片描述

        @GetMapping("/bool")
    public String doBool(Model model){
        model.addAttribute("age",16);
        model.addAttribute("married",true);

        return "bool";
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    12.4 null和""

    模板中为null或"'就不会显示

    13 设置属性值

    属性作用
    th:text计算其值表达式并将结果设置为标签的标签体
    th:utextth:text 会对结果中特殊字符进行转义,th:utext不会
    th:attr为标签中任意属性设置,可以一次设置多个属性
    th:*为html指定的属性设值,一次设置一个

    总结

    上面通过一个例子将thymeleaf的基本使用和一些常用的语法进行了说明,如果想要知道更多关于thymeleaf的知识和用法,可以进行官网进行更加深入的学习。

  • 相关阅读:
    Java Spring Cloud VII 之 内置断言
    斯坦福大学为机器人操作模仿学习设计了示教新范式
    tcp客户端向tcp服务器发送json文件，服务器转存为json文件
    4.Function扩展
    java EE 多线程(一)
    python+pytest接口自动化之测试函数、测试类/测试方法的封装
    Confluence漏洞学习——CVE-2021-26084/85，CVE-2022-26134漏洞复现
    C Primer Plus(6) 中文版 第6章 C控制语句：循环 6.5 for循环
    .NET静态代码织入——肉夹馍（Rougamo） 发布1.4.0
    使用C# 11的静态接口方法改进 面向约定 的设计
  • 原文地址：https://blog.csdn.net/weixin_47994845/article/details/125131455