SpringBoot详细讲解视图整合引擎thymeleaf

让我来详细讲解一下“SpringBoot详细讲解视图整合引擎thymeleaf”的完整攻略。

1. 什么是Thymeleaf

Thymeleaf是一种现代化的服务器端模板引擎，可支持HTML、CSS、XML、JavaScript等文档类型。它的语法十分简单且灵活，可以通过简单而自然的模板表达式快速地构建出动态内容渲染的视图。

2. 如何整合Thymeleaf

2.1 添加依赖

在Maven中，我们需要在pom.xml文件中添加如下依赖：

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

2.2 创建Thymeleaf的模板文件

在SpringBoot的工程结构中，我们需要在src/main/resources/templates目录下创建如下的HTML模板文件。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎页</title>
</head>
<body>
    <h1 th:text="${welcomeMessage}"></h1>
</body>
</html>

Thymeleaf模板的语法非常简单，从上面的示例中可以看出，我们只需要使用th:text属性实现了动态数据的渲染，这里我们通过welcomeMessage变量来显示服务器端返回的欢迎信息。

2.3 创建控制器

在SpringBoot框架中，我们需要首先定义一个控制器类，来实现对应的路由映射。

@Controller
public class HomeController {

    @GetMapping("/")
    public String home(Model model) {
        model.addAttribute("welcomeMessage", "欢迎来到我们的网站！");
        return "home"; // 重定向到模板home.html
    }
}

从上面的示例代码中可以看出，我们通过Model对象将变量welcomeMessage交由模板解析引擎渲染，同时返回到名为home的模板路径，将结果返回给客户端。

2.4 运行程序

完成上述代码的编写后，我们需要通过SpringBoot提供的@SpringBootApplication注解来启动整个应用程序。此时，我们访问http://localhost:8080可以看到如下的欢迎页面。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>欢迎页</title>
</head>
<body>
    <h1>欢迎来到我们的网站！</h1>
</body>
</html>

3. 示例2：Thymeleaf中使用迭代语句

在Thymeleaf模板中，我们还可以使用迭代语句，来循环遍历一个数组或者集合对象。如下面这个示例所示。

3.1 创建模板文件

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文章列表</title>
</head>
<body>
    <h1>文章列表</h1>

    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>标题</th>
                <th>作者</th>
                <th>发布日期</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="art,iter: ${articles}">
                <td th:text="${iter.count}"></td>
                <td th:text="${art.title}"></td>
                <td th:text="${art.author}"></td>
                <td th:text="${art.publishDate}"></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

从上面的示例代码中可以看出，我们通过th:each标签属性快速地循环遍历了一个名为articles的集合对象，并且将循环元素命名为art，同时迭代计数器通过iter对象进行统计，随之渲染到页面上的表格当中。

3.2 添加测试数据

在进行模板的测试之前，我们需要先设置一些测试数据，如下所示：

@RestController
public class ArticleController {

    @GetMapping("/articles")
    public List<Article> list() {
        List<Article> articles= new ArrayList<>();
        articles.add(new Article("01", "Thymeleaf的基本使用", "宋老师", new Date()));
        articles.add(new Article("02", "SpringBoot集成Thymeleaf", "小芳", new Date()));
        articles.add(new Article("03", "Java进阶之路", "大哥", new Date()));
        return articles;
    }
}

在上述代码中，我们通过Article对象来定义了一组测试数据，其中包括了标题、作者、发布日期等字段。

3.3 运行程序

如果我们按照上述的步骤编写完整的代码后，就可以将运行SpringBoot程序，并访问http://localhost:8080/articles，来看到如下的渲染效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文章列表</title>
</head>
<body>
    <h1>文章列表</h1>

    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>标题</th>
                <th>作者</th>
                <th>发布日期</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Thymeleaf的基本使用</td>
                <td>宋老师</td>
                <td>2021-08-19</td>
            </tr>
            <tr>
                <td>2</td>
                <td>SpringBoot集成Thymeleaf</td>
                <td>小芳</td>
                <td>2021-08-19</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Java进阶之路</td>
                <td>大哥</td>
                <td>2021-08-19</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

从上述示例代码中可以看出，我们通过th:each标签属性快速地循环遍历了article集合对象，并且将循环元素命名为art，同时迭代计数器通过iter对象进行统计，并且渲染到页面上的表格当中，实现了良好的视图整合。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：SpringBoot详细讲解视图整合引擎thymeleaf - Python技术站