WebFlux와 Kotlin 언어를 사용했지만, 프레임워크나 개발언어무관하다.
단지 Thymeleaf와 Vue.js(CDN 방식)를 혼용하는 방법을 포스팅한다.
templates/index.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" th:href="@{/css/index.css}">
<title> {{title}} </title>
</head>
<body>
<div id="container">
<!-- /** thymeleaf 문법 */ -->
<div class="list" th:each="var : ${thyList}">
<div th:id="${var.id}" th:text="${var.name}"></div>
</div>
<!-- /** vue 문법 */ -->
<div class="list" v-for="val in vueList">
<div :id="val.id"> {{val.name}}</div>
</div>
</div>
<!-- /** vue cdn 선언 (@{} 사용 필수) */ -->
<script th:src="@{https://cdn.jsdelivr.net/npm/vue}"></script>
<!-- /** vue script 정의 */ -->
<script th:inline="javascript">
/*<![CDATA[*/
new Vue({
el: '#container',
data: {
title: 'Thymeleaf + Vue Example',
vueList: /*[[ ${thyList} ]]*/
},
methods: {},
computes: {},
mounted: {},
})
]]>
</script>1. Controller 또는 RouterFunction이 index 화면을 렌더링하면 thyList 라는 데이터를 반환할 것이다.
그러면 th:each에 정의한 대로 thyList 데이터를 사용해 div 목록을 생성할 것이다.
2. 하단에는 vue를 cdn 방식으로 정의하고 inline 스크립트에서 Vue 인스턴스를 생성했다.
Vue 데이터 정의 부분에서 Thymeleaf 문법으로 vueList에 thyList를 주었다.
따라서 v-for 반복문에 따라 div 목록을 생성할 것이다.
위의 예제는 Thylemeaf와 Vue를 혼용해서 쓸 수 있는 예시를 든 것이고, 필요에 따라 응용 및 활용해서 사용할 수 있다.
WebFlux에서 RouterFunction, HandlerFunction을 사용해 index.html로 thyList를 함께 리턴해주는 서버쪽 소스코드는 다음과 같다.
MyRouterFunction.kt
fun viewRouter(viewRenderingHandler: ViewRenderingHandler): RouterFunction<ServerResponse?> {
return RouterFunctions.route()
.GET("/", accept(MediaType.TEXT_HTML), viewRenderingHandler::index)
}
ViewRenderHandler.kt
/** Render index.html with data */
fun index(serverRequest: ServerRequest): Mono<ServerResponse> {
var list: Flux<Room> = myService.getMyList()
var data = mutableMapOf("thyList" to list)
return ServerResponse.ok()
.contentType(MediaType.TEXT_HTML)
.render("index", data)
}
이전 포스트
지난 포스트에서 Spring Webflux에서 Thymeleaf를 Kotlin으로 구현하는 방법을 기술했다.
[Spring5] WebFlux + Thymeleaf + Kotlin
스프링 부트 초창기에 Spring MVC 에서 Thymeleaf를 사용해보았는데, WebFlux 에서 사용하기는 처음이었다. 더군다나 코틀린 언어도 처음 접해보는 거라서 많이 낯설었다. 기존에 알던데로 application.yml
jolly-sally.tistory.com
'생계유지형 개발자 > Spring Framework' 카테고리의 다른 글
| [Gradle] war 실행 시 Exploded war 생성하기 (Groovy, Kotlin DSL) (0) | 2021.04.21 |
|---|---|
| [Spring5] Thylemeaf Layout Dialect 적용하기 (0) | 2021.03.24 |
| [Spring5] Spring MVC vs WebFlux (0) | 2021.03.23 |
| [MyBatis] 계층형 결과 리스트 생성 (resultMap, collection 활용) (0) | 2021.02.25 |
| [Spring5] WebFlux + Thymeleaf + Kotlin (0) | 2021.02.02 |