Thymeleaf的使用

「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」

1、前言

​ 虽然说现在很多项目都是前后端分离的，不需要后端开发来写前端代码，但还是有一些轻量项目比如说后台管理系统，为了快速开始，还是前后端一起来写的。这种情况，大家可以使用thymeleaf模板引擎。

2、Thymeleaf介绍

​ Thymeleaf是一个类似于FreeMarker、Velocity的模板引擎，Thymeleaf模板文件后缀为html，所以在有网和无网络环境下都可以运行，既可以直接在浏览器打开查看页面样式，也可以通过标签+返回数据来动态展示页面。可以完全替代JSP，也是Spring官方推荐使用的模板引擎。

3、Thymeleaf常用表达式

​ 下面为大家介绍下，常用的一些Thymeleaf表达式：

• 获取model中attribute的变量值：${变量名}

• 替换html标签中的文本值：这里th:utext是替换了div标签中的内容，th:utext会转义变量中的html标签，如果不想转义，可以使用th:text

  <div class="text_box" th:utext="${article.article_content}"></div>
  

• 选择变量表达式：

  <div class="text_box" th:object="${article}">
  	<input name="id" th:value="*{id}">
  </div>
  上面的代码就等同于:
  <div class="text_box">
  	<input name="id" th:value="${article.id}">
  </div>
  所以说，如果我们需要展示的值，有很深的层次嵌套，就可以使用th:object
  

• 引入静态资源：

  <link th:href="@{/test/test.css}" rel="stylesheet"/>
  
  <script type="text/javascript" th:src="@{/js/wangEditor.min.js}"></script>
  
  这里静态资源的路径指向的是resource/static/目录下
  

• 设置标签的值：

  <input th:value="${article.id}">
  对于input/textarea这类标签，就不能简单的用th:text来替换文本了
  

• 条件判断：

  当条件成立时，就会展示span标签：
  <span th:if="${article.type == 1}">资讯类图文</span>
  
  当条件不成立时，才会展示span标签
  <span th:unless ="${article.type == 1}">资讯类图文</span>
  
  当然还有，switch/case表达式
  <div th:switch="${article.type}">
    <p th:case="1">资讯类图文</p>
    <p th:case="2">科普类图文</p>
    <p th:case="*">其他类型</p>
  </div>
  

• 遍历元素：

  这里主要是在展示table的值时使用，通过th:each遍历循环展示元素：
  <table>
      <tr>
          <th>id</th>
          <th>type</th>
          <th>title</th>
      </tr>
      <tr th:each="article : ${articleList}">
          <td th:text="${article.id}"></td>
          <td th:text="${article.type}"></td>
          <td th:text="${article.title}"></td>
      </tr>
  </table>
  

好了、本期就先介绍到这里，有什么需要交流的，大家可以随时私信我。😊