Thymeleaf介绍和基操(附截图和代码)

1.Thymeleaf 简介

Thymeleaf是一个Java XML / XHTML / HTML5 模板引擎 ,可以在Web(基于servlet )和非Web环境中工作。 它更适合在基于MVC的Web应用程序的视图层提供XHTML / HTML5,但它甚至可以在脱机环境中处理任何XML文件。 它提供完整的Spring Framework。

在Web应用程序中,Thymeleaf旨在成为JavaServer Pages (JSP)的完全替代品,并实现自然模板的概念:模板文件可以直接在浏览器中打开,并且仍然可以正确显示为网页。

Thymeleaf是开源软件、许可下 Apache许可证2.0.

2. 快速创建Thymeleaf项目

1.先创建spring boot项目
在这里插入图片描述
2.勾选Spring web常见web工程,和模板引擎中的Thymeleaf。
在这里插入图片描述
3.idea自动将Thymeleaf的相关以来导入pom.xml文件中
在这里插入图片描述
Thymeleaf项目的创建完成!

3. Thymeleaf表达式

标准环境表达式和选择变量表达式

1.首先创建实体类(id,username,age)以及getter和setter方法
在这里插入图片描述
2.创建控制类,user对象,并为user对象赋值传给userDetail页面在这里插入图片描述
3.编写html页面
在这里插入图片描述

注意:
一定要在开头加上thymeleaf的命名空间"xmlns:th=“http://www.thymeleaf.org”",否则将无法识别下面的thyme leaf语句

4.访问后的界面
在这里插入图片描述

区别:
标准环境表达式使用"${ }“来传递参数
而选择变量表达式(又叫星号表达式)使用” *{ } "来传递参数
说明:
" *{ } “必须使用th:object属性来绑定这个对象
在div子标签中使用 " * " 来代替绑定的对象 ${user}
推荐使用” ${ } "而不推荐 " * "
也可以混合使用,不推荐。

路径表达式(不带参)

1.编写控制类
在这里插入图片描述
2.编写html界面
在这里插入图片描述
3.访问界面后
在这里插入图片描述

上面内容结束,注意事项如下:

说明

  1. 路径表达式格式为: a th:href="%20@{%20}%20"
    2.由于绝对路径的路径可能会更改,因此工作中更推荐使用相对路径。

路径表达式(带参)

单个参数

1.单个参数(采用拼接字符串形式),同时也可以用另一种方式,下面有介绍
在这里插入图片描述

2.控制类的方法
在这里插入图片描述3.结果界面在这里插入图片描述
在这里插入图片描述

后台获取多个参数

控制类界面
在这里插入图片描述
url.html界面
在这里插入图片描述
在这里插入图片描述

这里有两种方式获取后台数据
第一种仍为拼接字符串的做法,用"?“,”&"等符号拼接字符串
第二种需要在路径后面加上括号,括号里描述各个属性所对于的值,不需要拼接字符串,强烈推荐第二种。

所用到的代码
1.controller类

package com.springboot_thymeleaf;

import com.springboot_thymeleaf.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class UserController {
    @RequestMapping("/user/detail")
    public ModelAndView userDetail(){
        ModelAndView modelAndView=new ModelAndView();
        User user=new User();
        user.setId(1);
        user.setUsername("liHua");
        user.setAge(23);
        modelAndView.setViewName("userDetail");
        modelAndView.addObject("user",user);
        return modelAndView;
    }
    @RequestMapping("/url")
    public String urlExpression(Model model){
        model.addAttribute("id",1001);
        model.addAttribute("age",20);
        model.addAttribute("username","zhaoliu");
        return "url";
    }


    @RequestMapping(value = "test")

    public @ResponseBody String test(String username){
        return "请求路径/test,参数是:"+username;
    }
    @RequestMapping(value = "/test1")
    @ResponseBody
    public String test1(Integer id,String username,Integer age){
        return "请求路径/test1,参数id:"+id+",username="+username+",age="+age;
    }
}




2.userDetail.html

```java

```html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--推荐-->
<h2>标准环境表达式:${} </h2>
用户编号:<span th:text="${user.id}"></span><br>
用户姓名:<span th:text="${user.username}"></span><br>
用户年龄:<span th:text="${user.age}"></span><br>
<br>
<!--不推荐-->
<h2>选择变量表达式(星号表达式):*{}</h2>
<div th:object="${user}">
    用户编号:<span th:text="*{id}"></span><br>
    用户姓名:<span th:text="*{username}"></span><br>
    用户年龄:<span th:text="*{age}"></span><br>
</div>
</body>
</html>
3.url.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>URL路径表达式</title>
</head>
<body>
<h1>URL路径表达式:@{...}</h1>
<h2>a标签中的绝对路径(没有参数)</h2>
<a href="http://www.baidu.com">传统写法:跳转至百度</a><br>
<a th:href="@{http://www.baidu.com}">路径表达式:跳转到百度</a><br>
<a th:href="@{http://localhost:8080/user/detail}">跳到/user/detail</a>
<br>
<h2>URL路径表达式,相对路径(没有参数)</h2>
<a th:href="@{/user/detail}">跳转到:/user/detail</a><br>

<h2>URL绝对路径(带参)</h2>
<a th:href="@{http://localhost:8080/test?username='zhangsan'}">绝对路径,带参数/test,并带参数username</a>

<h2>URL相对路径</h2>
<a th:href="@{/test?username='lisi'}">相对路径,带参数/test,并带参数username</a>

<h2>相对路径(带参数:后台获取的参数值)</h2>
<a th:href="@{'/test?username='+${id}}">相对路径:获取后台参数值</a>

<h2>相对路径(带参数:后台获取的多个参数值)</h2>
<a th:href="@{'/test1?id='+${id}+'&username='+${username}+'&age='+${age}}">相对路径:获取后台参数值</a><br>
<a th:href="@{/test1(id=${id},username=${username},age=${age})}">第二种相对路径:获取后台参数值</a>
</body>
</html>```


版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_53847859/article/details/123934148