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

偏执的太偏执、 2023-09-30 12:43 23阅读 0赞

#### 文章目录 ####

*  1.Thymeleaf 简介
 *  2. 快速创建Thymeleaf项目
 *  3. 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项目  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]  
2.勾选Spring web常见web工程，和模板引擎中的Thymeleaf。  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]  
3.idea自动将Thymeleaf的相关以来导入pom.xml文件中  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]  
Thymeleaf项目的创建完成!

## 3. Thymeleaf表达式 ##

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

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

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

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

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

### 路径表达式(不带参) ###

1.编写控制类  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 6]  
2.编写html界面  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 7]  
3.访问界面后  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_15_color_FFFFFF_t_70_g_se_x_16_pic_center]

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

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

### 路径表达式(带参) ###

#### 单个参数 ####

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

2.控制类的方法  
![在这里插入图片描述][49c0e54aec674c1196b76c759d40431e.png_pic_center]3.结果界面![在这里插入图片描述][8faaa8cede7e401b9870a6a42b31a1d5.png_pic_center]  
![在这里插入图片描述][c06f69bfecc843d1b742f217062dc859.png_pic_center]

#### 后台获取多个参数 ####

控制类界面  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 8]  
url.html界面  
![在这里插入图片描述][092b01ebb2a548a59e460f290957af85.png_pic_center]  
![在这里插入图片描述][4f884f97538d4ebcb15fff89d74c86a8.png_pic_center]

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

所用到的代码  
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>```

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/e5556954c205497cb6739d97cafc9165.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: https://img-blog.csdnimg.cn/056ee4cf34a34c079978851d38536fb4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: https://img-blog.csdnimg.cn/8e84cc1d6bfb487f977712f97a1fd020.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]: https://img-blog.csdnimg.cn/d1256e1c74b341439453c8e4c75ce839.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]: https://img-blog.csdnimg.cn/8fdc2f91aec64f93ac57eb143af33a30.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 5]: https://img-blog.csdnimg.cn/4bde678d7343461b93a30f12464fd819.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_13_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/0bd06d83b47d44a8881b25523edbcb6b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_13,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 6]: https://img-blog.csdnimg.cn/53c8a1347b6b4fd1be034ab23dcc0b83.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 7]: https://img-blog.csdnimg.cn/2088ba743d314c0fb912619c9f32de4f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_15_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/2ddfcf0ed7634a7d9b8089114352811b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_15,color_FFFFFF,t_70,g_se,x_16#pic_center
[f07c34f875354441991b2c51a373f4b2.png_pic_center]: https://img-blog.csdnimg.cn/f07c34f875354441991b2c51a373f4b2.png#pic_center
[49c0e54aec674c1196b76c759d40431e.png_pic_center]: https://img-blog.csdnimg.cn/49c0e54aec674c1196b76c759d40431e.png#pic_center
[8faaa8cede7e401b9870a6a42b31a1d5.png_pic_center]: https://img-blog.csdnimg.cn/8faaa8cede7e401b9870a6a42b31a1d5.png#pic_center
[c06f69bfecc843d1b742f217062dc859.png_pic_center]: https://img-blog.csdnimg.cn/c06f69bfecc843d1b742f217062dc859.png#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 8]: https://img-blog.csdnimg.cn/f98f80e4c01c4974af0940652e9345b6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yir5Y235LqG5ZG96KaB57Sn,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center
[092b01ebb2a548a59e460f290957af85.png_pic_center]: https://img-blog.csdnimg.cn/092b01ebb2a548a59e460f290957af85.png#pic_center
[4f884f97538d4ebcb15fff89d74c86a8.png_pic_center]: https://img-blog.csdnimg.cn/4f884f97538d4ebcb15fff89d74c86a8.png#pic_center