Thymeleaf使用

db_tgj_2028

已于 2023-07-07 15:16:35 修改

阅读量152

点赞数

文章标签： java 前端 javascript

于 2023-07-07 14:16:44 首次发布

本文链接：https://blog.csdn.net/qq_66922072/article/details/131587191

版权

简介：

百度上：Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎。类似JSP，Velocity，FreeMaker等，它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用的模板引擎。与其它模板引擎相比， Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用。

我的：Thymeleaf是用来动态给html骨架添加数据的。

环境配置：

新建项目：

加入配置：

针对所有html文件：原<html lang="en"> 修改为 <html xml:th="https://www.thymeleaf.org">

使用Thymeleaf：

链接表达是@{...}使用：

导入css文件：

<link rel="stylesheet" th:href="@{test.css}">

导入js文件：

 <script type="text/javascript" th:src="@{test.js}"></script>

超链接跳转文件：

<a th:href="@{文件路径/网址}">超链接</a>

注意：（默认Template文件夹中）

展示代码如下(main.html)：

<!DOCTYPE html>
<html xml:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{../static/html/test.css}">
    <script type="text/javascript" th:href="@{../static/html/test.js}"></script>
</head>
<body>
<a th:href="@{https://fanyi.sogou.com/text}">这是一个a链接</a>
</body>
</html>

运行后：

点进去后自动跳转：搜狗翻译 - 我的贴身智能翻译专家

变量表达式：${...}

通过变量名填充数据

代码如下：

控制层

    @GetMapping("/")
    public String viewHomePage(Model model) {
        model.addAttribute("name", "网络小白");
        model.addAttribute("age", "22");
        return "main";
    }

前端页面：

<table>
    <tr th:text="${name}">大牙</tr>
    <br>
    <tr th:text="${age}">550</tr>
</table>

得到以下：

变量表达式：*{...}

它与${...}表达式基本相同，不同的是它可以选定对象

选定对象：通过th:object锁定

代码如下：

    @GetMapping("/")
    public String viewHomePage(Model model) {
        Student student = new Student();
        student.setName("小明");
        student.setId(1);
        student.setDetails("爱吹泡泡");
        model.addAttribute("Student", student);
        return "main";
    }

<table th:object="${Student}">
    <tr th:text="*{name}">大牙</tr>
    <br>
    <tr th:text="*{id}">550</tr>
    <br>
    <tr th:text="*{details}"></tr>
</table>

得到：

th:each介绍

循环遍历list

代码如下：

    @GetMapping("/")
    public String viewHomePage(Model model) {
        Student student = new Student("小明", 1, "爱吹泡泡");
        Student student1 = new Student("小红", 2, "爱吐泡泡");
        Student student2 = new Student("小白", 3, "爱搓泡泡");
        Student student3 = new Student("小黑", 4, "爱看泡泡");
        List<Student> lis = new ArrayList<>();
        lis.add(student);
        lis.add(student1);
        lis.add(student2);
        lis.add(student3);
        model.addAttribute("StudentLis", lis);
        return "main";
    }

<table>
    <thead>
        <tr>
            <th>name</th>
            <th>id</th>
            <th>details</th>
        </tr>
    </thead>
    <tbody th:each="st: ${StudentLis}">
        <tr>
            <td th:text="*{st.getId()}"></td>
            <td th:text="*{st.getName()}"></td>
            <td th:text="*{st.getDetails()}"></td>
        </tr>
    </tbody>
</table>

效果图：

总结：

@{...}	链接表达式，可以是url，可以是文件路径
${...}	变量表达式，任何已经声明好的变量
*{...}	同${...}，但是多了一个选定对象
#{...}	声明片段，索引properties文件中的配置信息
th:each	遍历列表list，也可遍历数组（卸载table的<tbody>中)