뷰 템플릿에 컨버터 적용하기

dev_0hoon 2023. 12. 19. 22:42

package hello.typeconverter.controller;

import hello.typeconverter.type.IpPort;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ConverterController {

    @GetMapping("/converter-view")
    public String converterView(Model model){
        model.addAttribute("number",10000);
        model.addAttribute("ipPort", new IpPort("127.0.0.1",8080));

        return "converter-view";
    }
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body> <ul>
    <li>${number}: <span th:text="${number}" ></span></li>
    <li>${{number}}: <span th:text="${{number}}" ></span></li><!--{}를 두개치면 컨버팅이 된다.-->
    <li>${ipPort}: <span th:text="${ipPort}" ></span></li>
    <li>${{ipPort}}: <span th:text="${{ipPort}}" ></span></li><!--{}를 두개치면 컨버팅이 된다.-->
</ul>
</body>
</html>

#{{}} 안에 넣으면 컨버팅이 자동으로 된다.

2번째로 form을 사용할 경우 자동으로 converter가 사용 되기도 한다.

package hello.typeconverter.controller;

import hello.typeconverter.type.IpPort;
import lombok.Data;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;

@Controller
public class ConverterController {

    @GetMapping("/converter-view")
    public String converterView(Model model){
        model.addAttribute("number",10000);
        model.addAttribute("ipPort", new IpPort("127.0.0.1",8080));

        return "converter-view";
    }

    @GetMapping("/converter/edit")
    public String converterForm(Model model){
        IpPort ipPort = new IpPort("127.0.0.1", 8080);
        Form form = new Form(ipPort);
        model.addAttribute("form",form);

        return "converter-form";
    }

    @PostMapping("/converter/edit")
    public String converterForm(@ModelAttribute Form form, Model model){
        IpPort ipPort = form.getIpPort();
        model.addAttribute("ipPort",ipPort);

        return "converter-view";
    }

    @Data
    static class Form {
        private IpPort ipPort;

        public Form(IpPort ipPort) {
            this.ipPort = ipPort;
        }
    }
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form th:object="${form}" th:method="post">
    th:field <input type="text" th:field="*{ipPort}"><br/>
    th:value <input type="text" th:value="*{ipPort}">(보여주기 용도)<br/> <input type="submit"/>
</form>
</body>
</html>

th:field를 사용하면 자동으로 컨버팅이 된다.

또 서브밋 할 경우

@PostMapping("/converter/edit")
public String converterForm(@ModelAttribute Form form, Model model){
    IpPort ipPort = form.getIpPort();
    model.addAttribute("ipPort",ipPort);

    return "converter-view";
}

@Data
static class Form {
    private IpPort ipPort;

    public Form(IpPort ipPort) {
        this.ipPort = ipPort;
    }
}

해당 파라미터의 @ModelAttribute 로 인해 문자열이 또 IpPort 객체로 컨버팅이 된다.

2023-12-19T22:39:00.561+09:00 INFO 3962 --- [nio-8080-exec-4] h.t.converter.StringToIpPortConverter : convert source = 127.0.0.1:8080

- GET /converter/edit
> th:field 가 자동으로 컨버전 서비스를 적용해주어서 ${{ipPort}} 처럼 적용이 되었다. 따라서 IpPort String 으로 변환된다.

- POST /converter/edit

> @ModelAttribute 를 사용해서 String IpPort 로 변환된다.