浅浅入门SpringBoot之Thymeleaf模板
作者:mmseoamin日期:2023-12-18

Thymeleaf是一个流行的模板引擎,该模板引擎采用Java语言开发模板引擎是一个技术名词,是跨领域跨平台的概念,在Java语言体系下有模板引擎,在C#、PHP语言体系下也有模板引擎,甚至在 Javascript中也会用到模板引擎技术,Java生态下的模板引擎有 Thymeleaf、 Freemaker、Ⅴ elocity、 Beetl(国产)等。

Thymeleaf对网络环境不存在严格的要求,既能用于web环境下,也能用于非web环境下。在非web环境下,他能直接显示模板上的静态数据;在web环境下,它能像Jsp一样从后台接收数据并替换掉模板上的静态数据。它是基于HTML的,以HIML标签为载体,Thymeleaf要寄托在HTML标签下实现。

Spring Boot集成了 Thymeleaf模板技术,并且 Spring boot官方也推荐使用 Thymeleaf来替代JSP技术, Thymeleaf是另外的一种模板技术,它本身并不属于 Spring Boot, Spring Boot只是很好地集成这种模板技术,作为前端页面的数据展示,在过去的 Java Web开发中,我们往往会选择使用Jsp去完成页面的动态渲染,但是jsp需要翻译编译运行,效率低

官网https://www.thymeleaf.org/

浅浅入门SpringBoot之Thymeleaf模板,第1张

SpringBoot框架集成Thymealeaf,Thymealeaf代替jsp。

IDEA设置默认模板

浅浅入门SpringBoot之Thymeleaf模板,第2张

SpringBoot简单实用Thymealeaf

浅浅入门SpringBoot之Thymeleaf模板,第3张

浅浅入门SpringBoot之Thymeleaf模板,第4张

@Controller
public class ControllerA {
    @RequestMapping("/hello")
    public String A(HttpServletRequest request){
        request.setAttribute("data","Thymeleaf hello world");
        //指定视图
        //逻辑名称
        return "A";
    }
}



    
    Title


Thymeleaf显示数据:

浅浅入门SpringBoot之Thymeleaf模板,第5张

Thymeleaf模板之常用设置

application.properties配置

#开发阶段,关闭模板缓存,立即生效
spring.thymeleaf.cache=false
#编码格式
spring.thymeleaf.encoding=utf-8
#模型的类型(默认html)
spring.thymeleaf.mode=HTML
#模板前缀、模板引擎存放路径 默认classpath:/templates/
spring.thymeleaf.prefix=classpath:/templates/
#模板后缀 默认.html
spring.thymeleaf.suffix=.html

Thymeleaf模板之标准变量表达式

 表达式是在页面获取数据的一种Thymeleaf语法。列:${ key}

注意:th:text=””是Thymeleaf的一个属性,用于显示文本信息。

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

标准变量表达式语法:${key},作用:获取key对于的文本数据,key是request作用域中的key,使用request.setAttribute(),model.addAttribute()

在html页面中获取数据th:text=”${key}”

@Controller
@RequestMapping("/t")
public class ControllerB {
    @RequestMapping("/hello2")
    public String B(Model model){
        model.addAttribute("Student",new Student(1,"小红","女"));
        System.out.println("ControllerB");
        return "abc";
    }
}

浅浅入门SpringBoot之Thymeleaf模板,第6张


student:

浅浅入门SpringBoot之Thymeleaf模板,第7张

Thymeleaf模板之选择变量表达式

语法格式:*{key}             作用:获取key对应的数据库,*{key}需要和th:object这个属性一起使用。

@RequestMapping("/hello3")
public String C(Model model){
    model.addAttribute("Student",new Student(1,"小明","男"));
    System.out.println("ControllerC");
    return "C";
}
    

浅浅入门SpringBoot之Thymeleaf模板,第8张

Thymeleaf模板之链接表达式

语法:@{url}  作用:表示链接

列如:

Thymeleaf模板之属性使用

属性是放在html元素中的,就是html元素的属性,加上th,属性的值由模板引擎处理。

属性:th:action  th:method th:href th:src th:text th:style th:each

th:action

定义后台控制器的路径,类似

标准的action属性 th:action="@{/t/login}"

th:method

定义get,post方法  th:method="${method}"

th:href

定义超链接,结合URL表达式,获取动态变量

百度链接

th:src

用于引入外部资源,类似

th:text

设置显示文本 ${key}

//Thymeleaf属性的使用
@GetMapping ("/property01")
public String property(Model model){
    model.addAttribute("id","12345");
    model.addAttribute("method","post");
    model.addAttribute("password","123455");
    model.addAttribute("color","color:#f76730");
    return "pro";
}
@PostMapping("/login")
@ResponseBody
public String login(int id,String password){
    return "账户id:"+id+"账户密码:"+password;
}

属性的使用

hello world

hello world

hello world

浅浅入门SpringBoot之Thymeleaf模板,第9张

Thymeleaf模板之循环

th:each这个属性非常常用,与JSTL中的类似.可以循环遍历集合,也可以循环变量数组和map

循环List

    

循环的状态变量

Index: 当前迭代对象的下标(0-n)

Count:当前迭代对象个数(0-n)

Size:被迭代对象的大小

Current:当前迭代变量

even/odd :布尔值,当前循环是否为偶数/奇数

first:是否第一个

last:是否最后一个

浅浅入门SpringBoot之Thymeleaf模板,第10张

Controller

//    循环list
    @GetMapping("/eachList")
    public String eachList(Model model){
        List strList = new ArrayList<>();
        strList.add("张三");
        strList.add("李四");
        strList.add("保国");
        model.addAttribute("strList",strList);
        List students = new ArrayList<>();
        students.add(new Student(10,"张三","男"));
        students.add(new Student(11,"李四","男"));
        students.add(new Student(12,"保国","男"));
        model.addAttribute("students",students);
        return "E";
    }

Html页面

    

下标 id name sex

浅浅入门SpringBoot之Thymeleaf模板,第11张

循环数组Array

controller

//循环数组
@GetMapping("/eachArray")
public  String array(Model model){
    String[] name =new String[3];
    name[0]="张三2";
    name[1]="李四2";
    name[2]="保国2";
    model.addAttribute("names",name);
    return "array";
}

Html页面

循环Array
  
编号 name

循环Map

Controller

//循环map
    @GetMapping("/eachMap")
    public String eachMap(Model model){
        Map map =new HashMap<>();
        map.put("stu1",new Student(11,"保国1","男"));
        map.put("stu2",new Student(12,"保国2","男"));
        map.put("stu3",new Student(13,"保国3","男"));
        map.put("stu4",new Student(14,"菜坤","男"));
        model.addAttribute("stuMap",map);
        return "Map";
    }

Html页面

循环Map
    
编号 key id name sex

浅浅入门SpringBoot之Thymeleaf模板,第12张

循环List>

@GetMapping("/eachListMap")
public String eachListMap(Model model){
    List> listMap =new ArrayList<>();
    Map map1 =new HashMap<>();
    map1.put("stu1",new Student(11,"保国11","男"));
    map1.put("stu2",new Student(12,"保国12","男"));
    map1.put("stu3",new Student(13,"保国13","男"));
    map1.put("stu4",new Student(14,"菜坤1","男"));
    Map map2 =new HashMap<>();
    map2.put("stu12",new Student(11,"保国112","男"));
    map2.put("stu22",new Student(12,"保国122","男"));
    map2.put("stu32",new Student(13,"保国132","男"));
    map2.put("stu42",new Student(14,"菜坤12","男"));
    listMap.add(map1);
    listMap.add(map2);
    model.addAttribute("ListMap",listMap);
    model.addAttribute("listMap",listMap);
    return "Map";
}
循环List-Map
    
编号 key id name sex

 浅浅入门SpringBoot之Thymeleaf模板,第13张

Thymeleaf模板之if和unless

语法:th:if”boolean条件”,条件为true显示体内容

Th:unless是th:if的一个相反操作

显示内容

显示内容

用例

controller

@GetMapping("/ifl")
public String ifanUnless(Model model){
    model.addAttribute("name","z");
    model.addAttribute("login","true");
    model.addAttribute("age",30);
    model.addAttribute("empty1","");
    model.addAttribute("fnull",null);
    return "IfUnless";
}

html


张三
登入成功
年龄小于40

true

为null

浅浅入门SpringBoot之Thymeleaf模板,第14张

Thymeleaf模板之switch-case

@GetMapping("/switch")
public String switchCase(Model model){
        model.addAttribute("sex",'m');
        return "switch";
    }
switch的使用
    

未知

浅浅入门SpringBoot之Thymeleaf模板,第15张

Thymeleaf模板之内联text

@GetMapping("/inline")
public String inlineDemo(Model model){
    model.addAttribute("name","z");
    model.addAttribute("age",30);
    model.addAttribute("sex","m");
    model.addAttribute("stu",new Student(14,"菜坤","男"));
return "inline";
}
  
  

名字[[${name}]]

年龄[(${age})]

[['I love yue']]

[[${stu.id}]],[[${stu.name}]],[[${stu.sex}]]

Thymeleaf模板之内联javascript

 

浅浅入门SpringBoot之Thymeleaf模板,第16张

Thymeleaf模板之字面值

文本字面量

数字字面量

年龄小于40

Bollean字面量

登入成功

Null字面量

name不为null

true 为null

Thymeleaf模板之字符串连接

方式1

方式2

浅浅入门SpringBoot之Thymeleaf模板,第17张

Thymeleaf模板之运算符

算术运算符:+,-,*,/,%

关系比较:>,<,>=,<=  (gt,lt,ge,le)

相等判断:==,!=  (eq,ne)

@GetMapping("/inline")
public String inlineDemo(Model model){
    model.addAttribute("name","z");
    model.addAttribute("age",30);
    model.addAttribute("sex","m");
    model.addAttribute("stu",new Student(14,"菜坤","男"));
    model.addAttribute("fnull",null);
    model.addAttribute("login",true);
return "inline";
}
 运算符的使用
  

年龄大于10

结果

为null

三元运算符:

浅浅入门SpringBoot之Thymeleaf模板,第18张

Thymeleaf模板之内置对象使用

//内置对象
@GetMapping("/object")
public String built_in_Object(Model model, HttpServletRequest request, HttpSession session){
    model.addAttribute("name","坤坤");
    request.setAttribute("requestFata","request作用域数据");
    request.getSession().setAttribute("sessionData","session作用域的数据");
    return "builtinObject";
}
hello builtinObject
    获取作用域中的数据
    

获取request域中的数据

浅浅入门SpringBoot之Thymeleaf模板,第19张

Thymeleaf模板之内置#request对象方法

    使用内置对象的方法
    

浅浅入门SpringBoot之Thymeleaf模板,第20张

Thymeleaf模板之内置对象#session对象方法

Session表示HttpSession对象的,是#session的简单表示方式。

    

浅浅入门SpringBoot之Thymeleaf模板,第21张

Thymeleaf模板之param对象

Param对象表示url请求的参数集合

浅浅入门SpringBoot之Thymeleaf模板,第22张

    

浅浅入门SpringBoot之Thymeleaf模板,第23张

Thymeleaf模板之内置工具类

#dates

@GetMapping("/unlist")
public String utileObject(Model model){
    model.addAttribute("Mdate",new Date());
    return "utileObject";
}
  日期类工具类对象
  

#numbers

@GetMapping("/unlist")
public String utileObject(Model model){
    model.addAttribute("numbers",45.01);
    return "utileObject";
}
    

浅浅入门SpringBoot之Thymeleaf模板,第24张

#strings

@GetMapping("/unlist")
public String utileObject(Model model){
    model.addAttribute("Stirng","1234fdghdtgjuefS");
    return "utileObject";
}
    

浅浅入门SpringBoot之Thymeleaf模板,第25张

#lists

浅浅入门SpringBoot之Thymeleaf模板,第26张

@GetMapping("/unlist")
public String utileObject(Model model){
    List list = Arrays.asList("A","B","C");
    return "utileObject";
}
    

浅浅入门SpringBoot之Thymeleaf模板,第27张

Null处理

浅浅入门SpringBoot之Thymeleaf模板,第28张

@GetMapping("/unlist")
public String utileObject(Model model){
    Cat cat =new Cat();
    cat.setName("狸花猫");
    Dog dog =new Dog();
    dog.setName("阿拉斯加");
    Pet p =new Pet(cat,dog);
    model.addAttribute("pet",p);
    return "utileObject";
}

浅浅入门SpringBoot之Thymeleaf模板,第29张

当cat值不为null时,才执行name

    null处理
    

浅浅入门SpringBoot之Thymeleaf模板,第30张

Thymeleaf模板之自定义模板

自定义模板,在其他模板文件中多次使用

Hello为自定义模板名称

  

hello world

引用模板

插入模板方式1

浅浅入门SpringBoot之Thymeleaf模板,第31张

                    浅浅入门SpringBoot之Thymeleaf模板,第32张

插入模板方式2

 
 
 

包含模板

方式2

浅浅入门SpringBoot之Thymeleaf模板,第33张

                 

html页面做模板

浅浅入门SpringBoot之Thymeleaf模板,第34张



浅浅入门SpringBoot之Thymeleaf模板,第35张

使用其他目录中的模板

浅浅入门SpringBoot之Thymeleaf模板,第36张