HTML 片段

查看 Reactive 堆疊中的對等項目

HTMX 和 Hotwire Turbo 強調 HTML-over-the-wire 方法，其中用戶端接收 HTML 而非 JSON 格式的伺服器更新。這允許 SPA (單頁應用程式) 的優點，而無需編寫大量甚至任何 JavaScript。如需良好的概觀和了解更多資訊，請造訪其各自的網站。

在 Spring MVC 中，視圖呈現通常涉及指定一個視圖和一個模型。但是，在 HTML-over-the-wire 中，常見的功能是傳送多個 HTML 片段，瀏覽器可以使用這些片段來更新頁面的不同部分。為此，控制器方法可以傳回 Collection<ModelAndView>。例如

  • Java

  • Kotlin

@GetMapping
List<ModelAndView> handle() {
	return List.of(new ModelAndView("posts"), new ModelAndView("comments"));
}
@GetMapping
fun handle(): List<ModelAndView> {
	return listOf(ModelAndView("posts"), ModelAndView("comments"))
}

也可以透過傳回專用類型 FragmentsRendering 來完成相同的操作

  • Java

  • Kotlin

@GetMapping
FragmentsRendering handle() {
	return FragmentsRendering.with("posts").fragment("comments").build();
}
@GetMapping
fun handle(): FragmentsRendering {
	return FragmentsRendering.with("posts").fragment("comments").build()
}

每個片段都可以有獨立的模型，並且該模型繼承請求共用模型的屬性。

HTMX 和 Hotwire Turbo 支援透過 SSE (伺服器傳送事件) 串流更新。控制器可以使用 SseEmitter 來傳送 ModelAndView，以便為每個事件呈現片段

  • Java

  • Kotlin

@GetMapping
SseEmitter handle() {
	SseEmitter emitter = new SseEmitter();
	startWorkerThread(() -> {
		try {
			emitter.send(SseEmitter.event().data(new ModelAndView("posts")));
			emitter.send(SseEmitter.event().data(new ModelAndView("comments")));
			// ...
		}
		catch (IOException ex) {
			// Cancel sending
		}
	});
	return emitter;
}
@GetMapping
fun handle(): SseEmitter {
	val emitter = SseEmitter()
	startWorkerThread{
		try {
			emitter.send(SseEmitter.event().data(ModelAndView("posts")))
			emitter.send(SseEmitter.event().data(ModelAndView("comments")))
			// ...
		}
		catch (ex: IOException) {
			// Cancel sending
		}
	}
	return emitter
}

也可以透過傳回 Flux<ModelAndView> 或任何其他可透過 ReactiveAdapterRegistry 適應 Reactive Streams Publisher 的類型來完成相同的操作。