使用Spring的WebFlux和Thymeleaf来显示界面

2 年 ago

清, 宇

2 minutes

概述

今年三月某日，在公司里。

Thymeleafで表示してみよう

以下是我调查的总结。
关于WebFlux的各种内容，我希望稍后整理（在这里的解释中省略）。

附带说一下

Spring Boot 2.0 正式发布啦！这可是令人高兴的消息，使用速度会加快，并且文档也会更加丰富啊(｀･ω･´)

Spring Initializr默认版本已更新为2.0.0。

发展

写下必要的设置和代码。
这是一个用于在WebFlux + Thymeleaf中进行验证的最小配置。

依赖

需要使用Spring Boot 2.x (这是理所当然的)

spring-boot-starter-thymeleaf

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.0.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

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

控制器

让我们在用于常规thymeleaf模板的返回名称的处理中，添加将Flux传递给模板的处理。

Flux有关信息请点击此处-> 23. WebFlux框架


@Controller
@RequestMapping("/test")
public class WebController {

    @GetMapping
    public String index(Model model) {
        Flux<String> flux = Flux
                .range(0, 5)
                .map(i -> "count :" + i)
                .repeat(10)
                .delayElements(Duration.ofSeconds(1L));

        model.addAttribute("items", new ReactiveDataDriverContextVariable(flux, 1));

        return "index";
    }
}

上述的Flux实例处理说明方法
概述

range
生成一个Flux，递增地从0到4输出

map

返回一个Flux，输出类似于count: 0的字符串

repeat
重复以上的Flux 10次

delayElements
设置每个Flux输出的延迟时间

在以上代码中所做的是：
1. 创建一个 Flux 的实例
2. 使用 ReactiveDataDriverContextVariable 将创建的实例包装，并传递给 Model

反应式数据驱动上下文变量

新的Thymeleaf类
org.thymeleaf.spring5.context.webflux.ReactiveDataDriverContextVariable

只需要使用这个类将Flux实例封装并添加到org.springframework.ui.Model中，就可以以数据驱动模式运行。
这使得在服务器端以异步方式输出数据，并将其逐步发送到显示端的SSE（服务器推送事件）中。
（这部分内容理解程度较浅，理解深入后会进行补充。）

模板

在这里，只需要按照给定 Model 中的 List 实例的情况写下即可，不需要特殊的描述。

<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<h1>FluxTest</h1>
<table>
    <thead>
    <tr>
        <th>title</th>
    </tr>
    </thead>

    <tbody>
    <tr th:each="item : ${items}">
        <td>[[${item}]]</td>
    </tr>
    </tbody>
</table>
</body>
</html>

示威活动 sī

在調查中遇到了困境

原本在创建原型初期时，我使用的是Spring Boot 1系的版本，当我尝试使用WebFlux时，我随意添加了依赖并修改了代码，结果出现了以下的显示。

在使用curl命令等指定content-type: text/event-stream以返回简单文本的情况下，Flux的行为表现良好，所以一开始怀疑是否需要添加Thymeleaf的配置，但是经过数小时的困扰，完全找不到解决方法…

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

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

可能是因为将Thymeleaf与spring-boot-starter-web一起添加到了依赖关系中，所以它以之前的方式生成了模板。

通常情况下，无论是哪种API，只要存在双方依赖关系，都可以正常运作。

总结一下

spring-boot-starter-webfluxとspring-boot-starter-webは一緒に定義するとThymeleafが正常に動作しない

需要跟上Spring Framework 5和Spring Boot 2才行 (^o^

请提供的内容中文近义词为“参考”。

Spring I/O 2017 報告 ThymeleafのWebFlux対応