【Spring】Springboot中结合Thymeleaf和Thymeleaf快速使用入门速成

最新推荐文章于 2024-05-06 12:00:48 发布

费南

最新推荐文章于 2024-05-06 12:00:48 发布

阅读量151

点赞数

分类专栏： Java 文章标签： spring boot spring 后端

本文链接：https://blog.csdn.net/u011563431/article/details/134314724

版权

Java 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Thymeleaf是Spring中最为常见的模板引擎，如果想要使用MVC的方式进行应用的开发，或者是一些小的应用实在是没有必要使用前后端分离的方式进行开发，那么可以使用Thymeleaf进行HTML的输出，或者使用另一个Freemarker（这个用的更少一些）

Springboot整合Thymeleaf

现在基本上都是前后端分离的方式进行开发了，使用一个Vue或者是React写起来可能还会更方便一点，不过需要独立打包部署确实是这种前后端分离项目的繁琐之处。

首先使用模板系统需要在Pom中进行引入，如下代码所示，首先需要建立一个Springboot项目，当然最好的情况下可以直接在官网上生成或者是用idea生成项目。
官网的示例项目生成POM地址是：https://start.spring.io/
直接生成一个Spring项目
当然也可以手动添加

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

然后进行项目的配置，可以在application.yml中进行配置或者是编写配置类（如果是不需要特殊需求，没必要自己写配置类）。

server:
  port: 8011
spring:
  application:
    name: xxxx
  thymeleaf:
    cache: false
    encoding: UTF-8
    enabled: true
    prefix: classpath:/templates/
    suffix: .html

在上述类的配置中，约定了具体的编码和文件的前缀文件夹和后缀文件名称，以及是否存在缓存等配置。
然后编写一个controller，给定一个@Controller装饰（注意不是返回JSON，所以不是@RestController），然后返回一个HTML文件的名称就可以了，Thymeleaf会自动的在resources文件夹下的templates文件夹下进行寻找。

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/admin")
public class AdminWebShowController {

    @GetMapping("/login")
    public String login() {
        return "admin/login";
    }

}

例如在templates文件夹下建立一个admin文件夹，在里面建立一个login.html文件。那么当访问上面Controller中约定的地址，可以返回Web页面。

<html>
<head>
    <title>Admin Login</title>
</head>
<body>
<h1>Admin Login</h1>
<form action="/admin/login" method="post">
    <input type="text" name="username" placeholder="Username" required="required"/>
    <input type="password" name="password" placeholder="Password" required="required"/>
    <button type="submit">Login</button>
</form>
</body>
</html>

登录模板页面

Thymeleaf快速入门

Thymeleaf作为老牌模板引擎，功能非常多，这里只说一些最为常见的功能。

输出变量

可以输出转义和不转义的数据，在Controller中将对象加入到Model对象中，然后直接输出就行了。改写后的页面Controller

@Controller
@RequestMapping("/admin")
public class AdminWebShowController {

    @GetMapping("/login")
    public String login(Model model) {
        model.addAttribute("title", "登录");
        return "admin/login";
    }

}

改写页面

<h1>[[${title!=null?title:"Admin Login"}]]</h1>
<!--这里做了一个默认值设置，还支持大于小于，字符串等各种方法，条件语句-->
<form action="/admin/login" method="post">
    <input type="text" name="username" placeholder="Username" required="required"/>
    <input type="password" name="password" placeholder="Password" required="required"/>
    <button type="submit">Login</button>
</form>

如果是不需要转义的情况下使用
[(${name})]不会转义

列表循环输出

Thymeleaf模板支持内联javascript，可以和JavaScript配合个map配合个Jquery搞一下，反正实现功能够用就行。
或者使用模板提供的列表循环，map是循环元素本身,mapState是循环的状态计数。可以直接通过map.key输出对象的键，value是值。

 <div th:each="list:${ListMap}">
            <tr th:each="map,mapState:${list}">
                <td th:text="${mapState.count}"></td>
                <td th:text="${map.key}"></td>
                <td th:text="${map.value.id}"></td>
                <td th:text="${map.value.name}"></td>
            </tr>
        </div>

模板引用和输出

使用<div th:include="模板文件"></div>可以输出公用的模板，例如footer、header或者通过配置layout的方式进行输出，类似于next.js那种方式建立模板文件逻辑和结构。
如下放引入了公共的JavaScript文件，这个引入的是Tailwindcss，一个好用的CSS原子性框架。

<div th:include="components/commonHeader"></div>

<!--这里做了一个默认值设置-->
<div class="flex justify-center items-center h-3/6">
    <form  action="/admin/login" method="post">
        <h1 class="text-lg text-center">[[${title!=null?title:"Admin Login"}]]</h1>
        <div class="p-4">
            <input class="border p-2  w-40" type="text" name="username" placeholder="Username" required="required"/>
        </div>
        <div class="p-4">
            <input class="border  p-2  w-40"  type="password" name="password" placeholder="Password" required="required"/>
        </div>
        <div class="p-4 flex justify-center">
            <button class="border border-radius-2 bg-teal-200 w-20 p-2 text-white" type="submit">Login</button>
        </div>
    </form>
</div>

登录页面优化

路径问题

链接表达式在 Thymeleaf 中使用 @{…} 语法，用于创建 URL 链接或资源引用，可以动态地生成 URL 链接或引用外部资源，比如 CSS、JavaScript、图片等。链接表达式可以接受相对路径或绝对路径作为参数，并支持使用 Spring MVC 的 URL 路径匹配和 URL 参数绑定功能，当然，如果你对于路径并没有特殊的需求，注意下路径文件就可以了。

生成一个相对路径的 URL 链接：

<a th:href="@{/home}">Home</a>

Done

费南

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Spring】Springboot中结合Thymeleaf和Thymeleaf快速使用入门速成

Thymeleaf是Spring中最为常见的模板引擎，如果想要使用MVC的方式进行应用的开发，或者是一些小的应用实在是没有必要使用前后端分离的方式进行开发，那么可以使用Thymeleaf进行HTML的输出，或者使用另一个Freemarker（这个用的更少一些）
复制链接

扫一扫