springboot整合Thymeleaf

最新推荐文章于 2024-10-13 22:11:23 发布

前端交互仔

最新推荐文章于 2024-10-13 22:11:23 发布

阅读量434

点赞数 1

分类专栏： springboot

本文链接：https://blog.csdn.net/liulang68/article/details/108606401

版权

springboot 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

之前开发的也是可以整合的，但是这个组合只能通过异步的方式（数据是json格式）
html是可以接收json格式的

SpringBoot可以结合Thymeleaf模板来整合HTML，使用原生的HTML作为视图
Thymeleaf模板是面向Web和独立环境的java模板引擎，能够处理HTML,XML,JavaScript,CSS等。

<p th:text="${message}"></p>    //thymeleaf的语法

这个时候我们就不需要创建web工程，使用maven工程就可以

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

只要是视图我们就需要配置视图解析器

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: utf-8

model是MVC里的M，它是MVC里最简单而又复杂的部分，简单是因为有了它你就不必关注数据层，让你把精力集中在业务逻辑，说它复杂是因为要想实现这样的机制是比较困难的

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>你好世界</h1>
<table>
    <tr>
        <th>学生ID</th>
        <th>学生姓名</th>
        <th>学生年龄</th>
    </tr>
    <tr th:each="student:${list}">
        <td th:text="${student.id}"></td>
        <td th:text="${student.name}"></td>
        <td th:text="${student.age}"></td>
    </tr>
</table>
</body>
</html>

如果希望客户端可以直接访问HTML资源，将这些资源放置在static路径下即可，否则必须通过Handler的后台映射才可以访问静态资源。

<p th:text="${name}"></p>
<p th:text="'学生姓名是'+${name}+2"></p>
<p th:text="|学生的姓名是,${name}|"></p>

条件判断：if/unless
th:if表示条件成立时显示内容，th:unless表示条件不成立显示的内容

<p th:if="${flag==true}" th:text="if判断成立"></p>   //当条件成立会去展示
<p th:unless="${flag!=true}" th:text="unless判断成立"></p>    //当条件不成立会去展示

在这里插入图片描述

<table>
    <tr>
        <th>index</th>
        <th>count</th>
        <th>学生ID</th>
        <th>学生姓名</th>
        <th>学生年龄</th>
    </tr>
    <tr th:each="student,stat:${list}" th:style="'background-color:'+@{${stat.odd}?'#000000'}">
        <td th:text="${stat.index}"></td>
        <td th:text="${stat.count}"></td>
        <td th:text="${student.id}"></td>
        <td th:text="${student.name}"></td>
        <td th:text="${student.age}"></td>
    </tr>

</table>

stat是状态变量，属性：
index是集合中元素的index(从0开始)
count是集合中元素的count(从1开始）
size集合的大小
current当前迭代变量
even/odd 当前迭代是否为奇数/偶数(从0开始计算)
first当前迭代的元素是否是第一个
last当前迭代的元素是否是最后一个

URL
Thymeleaf对于URL的处理是通过@{…} 进行处理,结合th:href ,th:src

<a th:href="@{http://www.baidu.com}">跳转</a>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a th:href="@{http://www.baidu.com}">跳转</a>
<a href="https://cn.bing.com/">360跳转</a>
<p th:text="${name}"></p>
<a href="http://localhost:8080/index/url/zhangsan">你好张三</a>
<a th:href="@{http://localhost:8080/index/url/{name}(name=${name})}">你好张三2</a>
</body>
</html>

@GetMapping("/img")
    public String img(Model model){
        model.addAttribute("src","https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2415100391,2445796972&fm=26&gp=0.jpg");
        return "test";
    }

<img th:src="${img}">

<div th:style="'background:url('+@{${src}}+');'">
    <br>
    <br>
    <br>     //这里的目的是把背景图片撑开
</div>

三元运算符和java里面的条件运算符类似
通过判断一个条件成立不成立来给一个变量赋不同的值。

gt 英文全称是 Greater than

lt 英文全称是 Less than

@GetMapping("/eq")
    public String eq(Model model){
        model.addAttribute("age",28);
        return "test";
    }

<input th:value="${age gt 30?'中年':'青年'}">

在这里插入图片描述

@GetMapping("/switch")
    public String switchTest(Model model){
        model.addAttribute("gender","女");
        return "test";
    }

<div th:switch="${gender}">
    <p th:case="女">女</p>
    <p th:case="男">男</p>
    <p th:case="*">未知</p>

</div>

在这里插入图片描述

 @GetMapping("/object")
    public String object(HttpServletRequest request){
        request.setAttribute("request","request对象");
        request.getSession().setAttribute("session","session对象");
        return "test";
    }

<p th:text="${#request.getAttribute('request')}"></p>
<p th:text="${#session.getAttribute('session')}"></p>
<p th:text="${#locale.country}"></p>

在这里插入图片描述

@GetMapping("/util")
    public String util(Model model){
        model.addAttribute("name","张三");
        model.addAttribute("users",new ArrayList<>());
        model.addAttribute("count",22);
        model.addAttribute("date",new Date());
        return "test";
    }

<!-- 格式化时间 -->
<p th:text="${#dates.format(date,'yyyy-MM-dd HH:mm:sss')}"></p>
<!-- 创建当前时间，精确到天 -->
<p th:text="${#dates.createToday()}"></p>
<!-- 创建当前时间，精确到秒 -->
<p th:text="${#dates.createNow()}"></p>
<!-- 判断是否为空 -->
<p th:text="${#strings.isEmpty(name)}"></p>
<!-- 判断List是否为空 -->
<p th:text="${#lists.isEmpty(users)}"></p>
<!-- 输出字符串长度 -->
<p th:text="${#strings.length(name)}"></p>
<!-- 拼接字符串 -->
<p th:text="${#strings.concat(name,name,name)}"></p>
<!-- 创建自定义字符串 -->
<p th:text="${#strings.randomAlphanumeric(count)}"></p>