SpringBoot+ Thymeleaf入门学习

最新推荐文章于 2024-05-20 01:27:53 发布

韩_师兄

最新推荐文章于 2024-05-20 01:27:53 发布

阅读量797

点赞数 2

本文链接：https://blog.csdn.net/ABestRookie/article/details/108229803

版权

Spring 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

1. Thymeleaf概述

thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。
(其他模板引擎，如Velocity、FreeMarker等)

特点:开箱即用，Thymeleaf允许您处理六种模板，每种模板称为模板模式：

XML
有效的XML
XHTML
有效的XHTML
HTML5
旧版HTML5

2. Springboot整合thymeleaf

2.1 步骤:

1. 创建一个sprinboot项目

2. 添加thymeleaf的起步依赖

3.添加spring web的起步依赖

4.编写html 使用thymleaf的语法获取变量对应后台传递的值

5.编写controller 设置变量的值到model中

2.2 入门案列:

2.2.1 创建一个springboot工程,案例工程名取为springboot-thymeleaf,导入pom.xml依赖

 	 <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
            <version>2.2.1.RELEASE</version>
        </dependency>
    </dependencies>

2.2.2 创建包com.cf.thymeleaf.并创建启动类ThymeleafApplication

@SpringBootApplication
public class ThymeleafApplication {

    public static void main(String[] args) {
        SpringApplication.run(ThymeleafApplication.class,args);
    }
}

2.2.3 创建application.yml

# 设置thymeleaf的缓存设置，设置为false。默认加缓存的，用于测试
spring:
  thymeleaf:
    cache: false

2.2.4 控制层,创建controller用于测试后台设置数据到model中,com.cf.thymeleaf.controller.ThymeleafController

@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafController {
    /***
     * 访问/test/hello  跳转到demo1页面
     * @param model
     * @return
     */
    @RequestMapping("/hello")
    public String hello(Model model){
        model.addAttribute("hello","hello welcome");
        return "demo";
    }
}

2.2.5 在resources中创建templates目录，在templates目录创建 demo.html

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--输出hello数据-->
<p th:text="${hello}"></p>
</body>
</html>

3. Thymeleaf基本语法

3.1 th:action

修改demo.html

<!--form表单-->
<form th:action="@{/thymeleaf/hello}" >
    <input th:type="text"  th:name="id">
    <button>提交</button>
</form>

修改后台内容

  @RequestMapping("/hello")
    public String hello(Model model,String id){
        model.addAttribute("hello","hello welcome");
        System.out.println("接受的值:"+id);
    }

测试访问url:http://localhost:8080/thymeleaf/hello 在文本框中输入值adff，然后提交,提交之后会自动拼接到url地址栏中，在后台控制台中可以打印出“adff”.

3.2 th:each

对象遍历，功能类似jstl中的<c:forEach>标签。

创建com.cf.model.User,代码如下：

public class User {
    private Integer id;
    private String name;
    private String address;
    //..get..set
}

Controller添加数据

    @RequestMapping("/hello")
    public String hello(Model model,String id){
        model.addAttribute("hello","hello welcome");
        System.out.println("接受的值:"+id);

        //集合数据
        List<User> users = new ArrayList<>();
        users.add(new User(1,"张三","深圳"));
        users.add(new User(2,"李四","北京"));
        users.add(new User(3,"王五","武汉"));
        model.addAttribute("users",users);
    }

页面输出demo.html

<!--th:each遍历-->
<table>
    <tr>
        <td>下标</td>
        <td>编号</td>
        <td>姓名</td>
        <td>住址</td>
    </tr>
    <tr th:each="user,userstate:${users}">
        <td th:text="${userstate.index}"></td>
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.address}"></td>
    </tr>
</table>
<!--
	注意:th:each表示循环遍历，user表示users集合的泛型名称，userstate表示别名
	userstate.index表示获取下标从0开始
-->

3.3 Map输出

后台添加Map

 //Map定义
Map<String,Object> dataMap = new HashMap<String,Object>();
dataMap.put("No","123");
dataMap.put("address","深圳");
model.addAttribute("dataMap",dataMap);

页面输出demo.html

<!--map输出遍历-->
<div th:each="map,mapstate:${dataMap}">
    <!--获取map中的k=v-->
    <div th:text="${map}"></div>
    key:<span th:text="${mapstate.current.key}"></span><br>
    value:<span th:text="${mapstate.current.value}"></span><br>
</div>

解析：
${map}表示获取的是key=value的形式
${mapstate.current.key}表示获取key值
${mapstate.current.value}表示获取map集合中的value值

3.4 数组输出

1、后台添加数组

 	//存储一个数组
    String[] names = {"张三","李四","王五"};
    model.addAttribute("names",names);

2、页面输出

<!--数组输出-->
<div th:each="name,namestate:${names}">
    序号:<span th:text="${namestate.count}"></span>
    姓名:<span th:text="${name}"></span>
</div>

${namestate.count}表示获取序号，从1开始

3.5 Date输出

1、后台添加日期

 //日期
 model.addAttribute("now",new Date());

2、页面输出

<!--日期输出-->
<div>
    <!--默认时间格式-->
    <span th:text="${now}"></span><br>
    <!--转化日期格式-->
    <span th:text="${#dates.format(now,'yyyy-MM-dd hh:mm:ss')}"></span>
</div>

${#dates.format(日期，输出的日期格式)}表示用来转化日期格式
${#dates.format()}表示日期转化格式的固定方法

3.6 th:if条件

后台添加年龄

 //if条件
 model.addAttribute("age",22);

页面输出

<!--if判断-->
<div>
    <span th:if="${age>20}" th:text="你终于长大了"></span>
</div>

3.6 th:fragment &th:includ

1、创建一个foot.html代码如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div th:fragment="copy">
        关于我们<br>
    </div>
</body>
</html>

2、在demo.html中引入foot.html如下代码：

<!--引入模块-->
<div th:include="foot::copy"></div>

解析：
th:include表示在当前页面中引入其他页面或者模块的意思
foot::copy
其中foot表示要引入页面的名称，copy表示引入页面的模块名称，两者之间用“::”双冒号关联.

韩_师兄

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
SpringBoot+ Thymeleaf入门学习

1. Thymeleaf概述thymeleaf是一个XML/XHTML/HTML5模板引擎，可用于Web与非Web环境中的应用开发。(其他模板引擎，如Velocity、FreeMarker等)特点:开箱即用，Thymeleaf允许您处理六种模板，每种模板称为模板模式：XML有效的XMLXHTML有效的XHTMLHTML5旧版HTML52. Springboot整合thymeleaf2.1 步骤:1. 创建一个sprinboot项目2. 添加thymeleaf的起步依赖3.添加
复制链接

扫一扫