# WebFlux入门级示例
当然可以！我来帮你整理一个WebFlux入门级示例，并附上前后端请求逻辑处理流程图，让你从前端请求到后端响应的整个流程清晰可见。我们用 Spring WebFlux + Java，前端用简单的 HTML + Fetch 来演示。
# 项目依赖（Maven）
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-webflux</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 后端示例
2.1 创建实体类
package com.example.webfluxdemo.model;
public class User {
private String id;
private String name;
public User() {}
public User(String id, String name) {
this.id = id;
this.name = name;
}
// getter 和 setter
public String getId() { return id; }
public void setId(String id) { this.id = id; }
public String getName() { return name; }
public void setName(String name) { this.name = name; }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2.2 创建Controller
package com.example.webfluxdemo.controller;
import com.example.webfluxdemo.model.User;
import org.springframework.web.bind.annotation.*;
import reactor.core.publisher.Flux;
import reactor.core.publisher.Mono;
import java.time.Duration;
@RestController
@RequestMapping("/users")
public class UserController {
// 模拟一个用户列表
private final User[] users = {
new User("1", "Alice"),
new User("2", "Bob"),
new User("3", "Charlie")
};
// 获取所有用户
@GetMapping
public Flux<User> getAllUsers() {
// 模拟延迟返回数据
return Flux.fromArray(users).delayElements(Duration.ofMillis(500));
}
// 根据id获取单个用户
@GetMapping("/{id}")
public Mono<User> getUserById(@PathVariable String id) {
for (User u : users) {
if (u.getId().equals(id)) return Mono.just(u);
}
return Mono.empty(); // 找不到返回空
}
// 新增用户
@PostMapping
public Mono<User> addUser(@RequestBody User user) {
return Mono.just(user); // 简单模拟返回
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# 前端示例（HTML + JS Fetch）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebFlux Demo</title>
</head>
<body>
<h1>用户列表</h1>
<ul id="user-list"></ul>
<script>
fetch('/users')
.then(res => res.json())
.then(data => {
const ul = document.getElementById('user-list');
data.forEach(user => {
const li = document.createElement('li');
li.textContent = `${user.id}: ${user.name}`;
ul.appendChild(li);
});
})
.catch(err => console.error(err));
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
[
{
"id":"1",
"name":"Alice"
},
{
"id":"2",
"name":"Bob"
},
{
"id":"3",
"name":"Charlie"
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
Spring WebFlux 默认会等待 Flux 完成，然后序列化成一个 JSON 数组。
# 前后端请求逻辑流程图
+--------------------+ HTTP Request +----------------------+
| 前端浏览器 | --------------------------> | WebFlux Controller |
| (Fetch / Ajax) | | - 接收请求 |
+--------------------+ | - 路由到方法 |
^ +----------------------+
| |
| v
| +----------------------+
| | Reactor 流式处理 |
| | - Mono/Flux 异步 |
| | - 非阻塞返回数据 |
| +----------------------+
| |
| v
| +----------------------+
| | 后端返回响应 |
| <------------------------------------- | JSON/Stream 数据 |
+--------------------+ +----------------------+
| 前端浏览器 |
| - 处理响应数据 |
| - 渲染到页面 |
+--------------------+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 流程说明：
- 前端发起HTTP请求（GET
/users）。 - WebFlux Controller接收请求，根据路径路由到对应方法。
- Reactor Mono/Flux异步处理数据，非阻塞返回。
- 后端返回JSON流式数据。
- 前端接收响应，解析并渲染到页面。
# 总结
这个示例是入门级别，涵盖了：
- Flux/Mono 的基础用法
- 非阻塞请求响应
- 前端Fetch调用