光知道SpringBoot，不用thymeleaf就太不对了

最新推荐文章于 2024-07-25 11:52:08 发布

Java架构师联盟

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量807

点赞数

分类专栏：面试 java 架构文章标签： vue web html javascript java

git地址：https://github.com/biws-byte/mxq

本文链接：https://blog.csdn.net/weixin_42864905/article/details/111476019

版权

java 同时被 3 个专栏收录

457 篇文章 6 订阅

订阅专栏

架构

366 篇文章 2 订阅

订阅专栏

面试

232 篇文章 5 订阅

订阅专栏

之前的时候，我为了演示Linux配置提交项目执行环境，简单的整理了一下springboot得相关内容，但是在实际的开发过程中，SpringBoot得使用可不仅仅就是这一点点遍历而已，在SpringBoot中推荐使用thymeleaf模板引擎，简单点评价这个模板就是语法简单，功能更强大，虽然这个技术现在已经停止更新，并且在这个前后端分离的时代显得有点格格不入，但是，在某些实际的生产场景中，还是相当好用的

所以今天我们来看一下这个强大得模板引擎到底有多强大

公众号：Java架构师联盟，后期会开放git仓库地址

添加thymeleaf模板

这里有两种创建方式

1.新建springBoot项目

只需要在创建springboot项目的时候，添加thymeleaf即可

光知道SpringBoot，不用thymeleaf就太不对了

2.已经创建得项目中加入thymeleaf模板引擎
要想引入thymeleaf，只需要在pom.xml文件中加入如下依赖就可以了，但是有一个注意点，我在代码注释中解释了

光知道SpringBoot，不用thymeleaf就太不对了

     <!-- 提交到tomcat执行，需要添加下方依赖-->
     <!--如果你要用springboot本身的tomcat得话，一定要注意记得注释掉，不然无法启动-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>

<!-- 添加Thymeleaf模板，只需要添加这个依赖即可-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

项目编写

在controller中定义跳转的页面

代码架构：

之前的时候我说过，入口类会自动寻找子包或者平行类，所以初学者要注意以下这个点哦

我这是沿用之前的时候写的代码，直接创建了一个thymeleaf展示今天的内容

光知道SpringBoot，不用thymeleaf就太不对了

package com.example.demo.thymeleaf;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

/**
 * @author ：biws
 * @date ：Created in 2020/12/18 19:43
 * @description：在controller中定义跳转页面
 */

@Controller
public class HelloController {

    @RequestMapping("hello")
    @ResponseBody
    public String hello() {
        return "这是第二种搭建springboot方式";
    }

    @RequestMapping("testThymeleaf")
    public String testThymeleaf(Map map) {

        map.put("info", "这是从controller传到前端界面得数据");
        return "index";
    }

}

这是第一个优点：会自动去templates文件夹下去找index.html

光知道SpringBoot，不用thymeleaf就太不对了

4.运行，然后访问项目

输入http://localhost:8080/testThymeleaf即可访问index.html

光知道SpringBoot，不用thymeleaf就太不对了

奥对，忘记把index得代码添加上来了

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>测试thymeleaf模板</title>
</head>
<body>
<p>欢迎来到测试thymeleaf界面</p>

<!--/*@thymesVar id="info" type=""*/-->
<p th:text="${info}"></p>
</body>
</html>

大家可能已经发现了

我在这个代码中模拟前端返回数据，直接存储到map中，因为在写一个界面有点费劲，毕竟像我这种懒癌患者，哈哈哈哈

光知道SpringBoot，不用thymeleaf就太不对了

而在index中，获取数据之后，通过info这个id进行获取

光知道SpringBoot，不用thymeleaf就太不对了

最后展示的结果就是这样

光知道SpringBoot，不用thymeleaf就太不对了

而区别于传统得数据获取方式，thymeleaf有其自己得标签语法，那我们来看一下都有哪些标签语法呢？

thymeleaf标签语法

常用标签介绍

光知道SpringBoot，不用thymeleaf就太不对了

下面我整理几种常用得知识点

几种常用的使用方法

1、赋值、字符串拼接

<p th:text="${collect.description}">description</p>
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">

字符串拼接还有另外一种简洁的写法

<span th:text="|Welcome to our application, ${user.name}!|">

2、条件判断 If/Unless

Thymeleaf中使用th:if和th:unless属性进行条件判断，下面的例子中，标签只有在th:if中条件成立时才显示：

<a th:if="${myself=='yes'}" > </i> </a>
<a th:unless=${session.user != null} th:href="@{/login}" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Login</a>

th:unless与th:if恰好相反，只有表达式中的条件不成立，才会显示其内容。

也可以使用 (if) ? (then) : (else) 这种语法来判断显示的内容

3、for 循环

<tr th:each="collect,iterStat : ${collects}">
  <th scope="row" th:text="${collect.id}">1</th>
  <td >
   <img th:src="${collect.webLogo}"/>
  </td>
  <td th:text="${collect.url}">Mark</td>
  <td th:text="${collect.title}">Otto</td>
  <td th:text="${collect.description}">@mdo</td>
  <td th:text="${terStat.index}">index</td>
</tr>

iterStat称作状态变量，属性有：

index:当前迭代对象的index（从0开始计算）

count: 当前迭代对象的index(从1开始计算)

size:被迭代对象的大小

current:当前迭代变量

even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）

first:布尔值，当前循环是否是第一个

last:布尔值，当前循环是否是最后一个

4、URL

URL在Web应用模板中占据着十分重要的地位，需要特别注意的是Thymeleaf对于URL的处理是通过语法@{…}来处理的。
如果需要Thymeleaf对URL进行渲染，那么务必使用th:href，th:src等属性，下面是一个例子

<!-- Will produce 'http://localhost:8080/standard/unread' (plus rewriting) -->
 <a th:href="@{/standard/{type}(type=${type})}" rel="external nofollow" >view</a>
 
<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" rel="external nofollow" th:href="@{/order/{orderId}/details(orderId=${o.id})}" rel="external nofollow" >view</a>

5、使用thymeleaf布局

使用thymeleaf布局非常的方便

<!--定义代码片段-->
<footer th:fragment="copy">
© 2016
</footer>
<!--在页面任何地方引入
<!--th:include 和 th:replace区别，include只是加载，replace是替换-->
<body>
 <div th:include="footer :: copy"></div>
 <div th:replace="footer :: copy"></div>
 </body>
<!--返回的HTML如下-->
<body>
  <div> © 2016 </div>
 <footer>© 2016 </footer>
</body>

下面是一个常用的后台页面布局，将整个页面分为头部，尾部、菜单栏、隐藏栏，点击菜单只改变content区域的页面

<body class="layout-fixed">
 <div th:fragment="navbar" class="wrapper" role="navigation">
  <div th:replace="fragments/header :: header">Header</div>
  <div th:replace="fragments/left :: left">left</div>
  <div th:replace="fragments/sidebar :: sidebar">sidebar</div>
  <div layout:fragment="content" id="content" ></div>
  <div th:replace="fragments/footer :: footer">footer</div>
 </div>
</body>

任何页面想使用这样的布局值只需要替换中间的 content模块即可

<html xmlns:th="http://www.thymeleaf.org" layout:decorator="layout">
 <body>
  <section layout:fragment="content">
 ...

也可以在引用模版的时候传参

<head th:include="layout :: htmlhead" th:with="title='Hello'"></head>
<!--layout 是文件地址，如果有文件夹可以这样写 fileName/layout:htmlhead 
<!--htmlhead 是指定义的代码片段 -->
 th:fragment="copy"]

好啦，一些基础得应用这里基本全涵盖了，一定要去好好练习一下啊

Java架构师联盟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
光知道SpringBoot，不用thymeleaf就太不对了

之前的时候，我为了演示Linux配置提交项目执行环境，简单的整理了一下springboot得相关内容，但是在实际的开发过程中，SpringBoot得使用可不仅仅就是这一点点遍历而已，在SpringBoot中推荐使用thymeleaf模板引擎，简单点评价这个模板就是语法简单，功能更强大，虽然这个技术现在已经停止更新，并且在这个前后端分离的时代显得有点格格不入，但是，在某些实际的生产场景中，还是相当好用的所以今天我们来看一下这个强大得模板引擎到底有多强大公众号：Java架构师联盟，后期会开放git仓库地址
复制链接

扫一扫

专栏目录