springboot学习笔记（五）- Thymeleaf模板引擎

朴灿烈づ我的快乐病毒、 2023-01-16 12:26 253阅读 0赞

## 一、模板引擎 ##

前端交给我们的页面，是html页面。如果是我们以前开发，我们需要把他们转成jsp页面，jsp好处就是当我们查出一些数据转发到JSP页面以后，我们可以用jsp轻松实现数据的显示，及交互等。

jsp支持非常强大的功能，包括能写Java代码，但是呢，我们现在的这种情况，SpringBoot这个项目首先是以jar的方式，不是war，像第二，我们用的还是嵌入式的Tomcat，所以呢，他现在默认是不支持jsp的。

那不支持jsp，如果我们直接用纯静态页面的方式，那给我们开发会带来非常大的麻烦，那怎么办呢？

SpringBoot推荐你可以来使用模板引擎：

模板引擎，我们其实大家听到很多，其实jsp就是一个模板引擎，还有用的比较多的freemarker，包括SpringBoot给我们推荐的Thymeleaf，模板引擎有非常多，但再多的模板引擎，他们的思想都是一样的，什么样一个思想呢我们来看一下这张图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk4MTMxNQ_size_16_color_FFFFFF_t_70]  
模板引擎的作用就是我们来写一个页面模板，比如有些值呢，是动态的，我们写一些表达式。而这些值，从哪来呢，就是我们在后台封装一些数据。然后把这个模板和这个数据交给我们模板引擎，模板引擎按照我们这个数据帮你把这表达式解析、填充到我们指定的位置，然后把这个数据最终生成一个我们想要的内容给我们写出去，这就是我们这个模板引擎，不管是jsp还是其他模板引擎，都是这个思想。只不过呢，就是说不同模板引擎之间，他们可能这个语法有点不一样。其他的我就不介绍了，我主要来介绍一下SpringBoot给我们推荐的Thymeleaf模板引擎，这模板引擎呢，是一个高级语言的模板引擎，他的这个语法更简单。而且呢，功能更强大。

我们呢，就来看一下这个模板引擎，那既然要看这个模板引擎。首先，我们来看SpringBoot里边怎么用。

## 二、使用方法 ##

**1、导入依赖**

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

**2、常用语法**  
**（1）链接表达式: @\{…\}**  
上面我们已经学习到Thymeleaf是一个基于html的模板引擎，但是我们还是需要加入特定标签来声明和使用Thymeleaf的语法。我们需要在Thymeleaf的头部加Thymeleaf标识：

在Thymeleaf 中，如果想引入链接比如link，href，src，需要使用@\{资源地址\}引入资源。其中资源地址可以static目录下的静态资源，也可以是互联网中的绝对资源。

**（2）变量表达式: $\{…\}**

@GetMapping("index")//页面的url地址
     public String getindex(Model model)//对应函数
      {
        
         user user1=new user("bigsai",22,"一个幽默且热爱java的社会青年");
         List<String>userList=new ArrayList<>();
         userList.add("zhang san 66");
         userList.add("li si 66");
         userList.add("wang wu 66");
         Map<String ,String>map=new HashMap<>();
         map.put("place","博学谷");
         map.put("feeling","very well");
         //数据添加到model中
         model.addAttribute("name","bigsai");//普通字符串
         model.addAttribute("user",user1);//储存javabean
         model.addAttribute("userlist",userList);//储存List
         model.addAttribute("map",map);//储存Map
         return "index";//与templates中index.html对应
      }

**取普通字符串：**  
如果在controller中的Model直接存储某字符串，我们可以直接$\{对象名\}进行取值。完整代码如下

<h2>普通字符串</h2>
    <table border="0">
        <tr>
            <td th:text="'我的名字是：'+${name}"></td>
        </tr>
    </table>

**取JavaBean对象:**  
取JavaBean对象也很容易，因为JavaBean自身有一些其他属性，所以咱们就可以使用 对 象 名 . 对 象 属 性 或 者 \{对象名.对象属性\}或者 对象名.对象属性或者\{对象名\[‘对象属性’\]\}来取值，这和JavaScript语法是不是很相似呢！除此之外，如果该JavaBean如果写了get方法，咱们也可以通过get方法取值例如$\{对象.get方法名\}完整代码如下：

<h2>JavaBean对象</h2>
    <table bgcolor="#ffe4c4" border="1">
        <tr>
            <td>介绍</td>
            <td th:text="${user.name}"></td>
        </tr>
        <tr>
            <td>年龄</td>
            <td th:text="${user['age']}"></td>
        </tr>
        <tr>
            <td>介绍</td>
            <td th:text="${user.getDetail()}"></td>
        </tr>
    </table>

**取List集合(each):**  
因为List集合是个有序列表，里面内容可能不止一个，你需要遍历List对其中对象取值，而遍历需要用到标签：th:each,具体使用为,其中item就相当于遍历每一次的对象名，在下面的作用域可以直接使用，而userlist就是你在Model中储存的List的名称。完整的代码为：

<h2>List取值</h2>
    <table bgcolor="#ffe4c4" border="1">
        <tr th:each="item:${userlist}">
            <td th:text="${item}"></td>
        </tr>
    </table>

**直接取Map:**

很多时候我们不存JavaBean而是将一些值放入Map中，再将Map存在Model中，我们就需要对Map取值，对于Map取值你可以$ \{Map名\[‘key’\]\}来进行取值。也可以通过$ \{Map名.key\}取值，当然你也可以使用$\{map.get(‘key’)\}(java语法)来取值，完整代码如下：

<h2>Map取值</h2>
    <table bgcolor="#8fbc8f" border="1">
        <tr>
            <td>place:</td>
            <td th:text="${map.get('place')}"></td>
        </tr>
        <tr>
            <td>feeling:</td>
            <td th:text="${map['feeling']}"></td>
        </tr>
    </table>

**遍历Map：**  
如果说你想遍历Map获取它的key和value那也是可以的，这里就要使用和List相似的遍历方法，使用th:each="item:$\{Map名\}"进行遍历，在下面只需使用item.key和item.value即可获得值。完整代码如下：

<h2>Map遍历</h2>
    <table bgcolor="#ffe4c4" border="1">
        <tr th:each="item:${map}">
            <td th:text="${item.key}"></td>
            <td th:text="${item.value}"></td>
        </tr>
    </table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk4MTMxNQ_size_16_color_FFFFFF_t_70]: /images/20221022/15db01fce3294db8b78b09630ead9cad.png