thymeleaf使用-初体验记录

桃子蘸酱
280 阅读1分钟

1、thymeleaf的项目搭建

首先创建springboot项目，相关博客有详细的创建教程，下方仅本人推荐示例（视频中也有相关项目创建教程）：

IDEA创建项目教程:www.jianshu.com/p/40422d484…

eclipse创建项目教程:blog.csdn.net/qq_35170365…

项目搭建完成后,配置application.properties，配置如下，端口号只要不和本机当前口号冲突即可，本人用的是8001

server.port=8001
spring.thymeleaf.cache=false

创建thymeleaf网页模板，相关代码如下:

<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

</body>
</html>

2、第一个程序

项目结构如图：

  第一个程序（基本使用），实现前端标题的数据渲染，先上代码：

后台 创建包controller以及类IndexController：

**

package com.thym.thymdemo.controller;

import com.thym.thymdemo.view.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;

/**
 * @author June
 * @date 2021/12/25 15:35
 */
@Controller
public class IndexController {
    @GetMapping("/index")
    public String index(Model model){
        model.addAttribute("title","传递的title");
        model.addAttribute("keywords","传递的keywords");
        model.addAttribute("description","传递的description");
        return "index";
    }
}

　　前端创建html网页，index.html，代码如下：

**

<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="|localhost-${title}|">默认的Title</title>
    <meta th:content="${description}" name="description" content="默认的description">
    <meta th:content="${keywords}" name="keywords" content="默认的keywords">
</head>
<body>

</body>
</html>

　　结果实现如下：

 

 

3、常用方法

　　实现后台数据的前端实现，有关对象与类的数据传递：

　　后台  创建实体类 User.java，代码如下：

**

package com.thym.thymdemo.view;

import lombok.Data;

import java.util.Date;
import java.util.List;

/**
 * @author June
 * @date 2021/12/25 15:46
 */
@Data
public class User {
　　//其中lombok插件可实现创建get、set方法，所以此处并未创建get、set方法
    private String username;
    private Integer age;
    private Integer sex;
    private Boolean isVip;
    private Date createTime;
    private List<String> tags;

}

IndexController.java 有关代码修改如下;

package com.thym.thymdemo.controller;

import com.thym.thymdemo.view.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;

/**
 * @author June
 * @date 2021/12/25 15:35
 */
@Controller
public class IndexController {
    @GetMapping("/index")
    public String index(Model model){
        model.addAttribute("title","传递的title");
        model.addAttribute("keywords","传递的keywords");
        model.addAttribute("description","传递的description");
        return "index";
    }
    @GetMapping("/basic")
    public String basic(Model model){//此处即为javaweb项目中的前后端传值行为
        User user = new User();
        user.setUsername("lookroot");
        user.setAge(32);
        user.setSex(1);
        user.setIsVip(false);
        user.setCreateTime(new Date());
        user.setTags(Arrays.asList("PHP","Java"));
        model.addAttribute("user",user);
        return "basic";
    }
}

前端创建html页面，basic.html 代码如下;

<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--<h2 th:text="${user.username}"></h2>
    <h2 th:text="${user.age}"></h2>
    <h2 th:text="${user.sex}"></h2>
    <h2 th:text="${user.isVip}"></h2>
    <h2 th:if="${user.isVip}">会员</h2>
    <h2 th:text="${user.createTime}"></h2>
    <h2 th:text="${user.tags}"></h2>-->
<div th:object="${user}">
    <h2 th:text="*{username}"></h2>
    <h2 th:text="*{age}"></h2>
    <h2 th:text="*{sex}"></h2>
    <h2 th:text="*{isVip}"></h2>
    <!--这里运用if标签判断该属性是否为真，如果为真则显示标题内容，如果为否则不显示相关内容-->
    <h2 th:if="*{isVip}">会员</h2>
    <h2 th:text="*{createTime}"></h2>
    <h2 th:text="*{tags}"></h2>
</div>
    <!--规范话日期格式-->
    <p th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm')}"></p>
<ul>
    <!--以列表形式显示List集合的各项-->
    <li th:each="tag:${user.tags}" th:text="${tag}"></li>
</ul>
    <!--选择结构实现数据的前端显示-->
<div th:switch="${user.sex}">
    <p th:case="1">男</p>
    <p th:case="2">女</p>
    <p th:case="*">默认</p>
</div>
    <!--replace com1-->
    <div th:replace="~{component::com1}"></div>
    <!--insert com1-->
    <div th:insert="~{component::com1}"></div>
    <!--id com2-->
    <div th:insert="~{component::#com2}"></div>
    <div th:insert="~{component::com3('传递的数据')}"></div>
    <div th:insert="~{component::com4(~{::#message})}">
        <p id="message">替换的模块</p>
    </div>
</body>
</html>

 

　　实现结果如下;

 

 

 4、thymeleaf中JavaScript、css的应用

thymeleaf+css，首先在src\main\resources\static目录下，创建css文件，写入如下代码：

.app{
    height: 300px;
    width: 300px;
    background-color: blue;
}

前端basic页面中代码添加如下（由于所引用的css文件在根目录下，所以可以直接引用）：

<div class="app"></div>

　　显示效果如下：

 　　在html页面内部直接写入css有关代码

　　前端添加代码如下：　

<ul>
    <li th:each="tag,stat:${user.tags}" th:text="${tag}"
        th:classappend="${stat.last}?active"></li>
</ul>

　　结果显示如下：

 

 5、thymeleaf中组件的使用

　　创建component.html页面，写入如下代码：

<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <footer th:fragment="com1">
        <!--/*@thymesVar id="user" type="com.thym.thymdemo.view.User"*/-->
        <h2 th:text="${user.username}"></h2>
        com1
    </footer>
    <div id="com2">
        com2
    </div>
    <div th:fragment="com3(message)">
        <p th:text="${message}"></p>
    </div>
    <div th:fragment="com4(message)">
        <p th:replace="${message}"></p>
    </div>
</body>
</html>

　　前端页面basic页面代码修改如下;

<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{app.css}">
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <!--规范话日期格式-->
    <p th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm')}"></p>
<ul>
    <!--以列表形式显示List集合的各项-->
    <li th:each="tag:${user.tags}" th:text="${tag}"></li>
</ul>
<ul>
    <li th:each="tag,stat:${user.tags}" th:text="${tag}"
        th:classappend="${stat.last}?active"></li>
</ul>
    <!--replace com1-->
    <div th:replace="~{component::com1}"></div>
    <!--insert com1-->
    <div th:insert="~{component::com1}"></div>
    <!--id com2-->
    <div th:insert="~{component::#com2}"></div>
    <div th:insert="~{component::com3('传递的数据')}"></div>
    <div th:insert="~{component::com4(~{::#message})}">
        <p id="message">替换的模块</p>
    </div>
</body>
<script th:inline="javascript">
    const user = /*[[${user}]]*/{}
    console.log(user)
</script>
</html>

　　实现结果如下：

avatar
文章
阅读
粉丝