'2022/04'에 해당되는 글 2건

  1. 2022.04.22 [Thymeleaf] 간만에 FE 작업 삽질 기록
  2. 2022.04.07 [Springboot+Ajax] 데이터 통신

[Thymeleaf] 간만에 FE 작업 삽질 기록

ITWeb/개발일반 2022. 4. 22. 14:31

1. bootstrap UI 에서 "dropdown require Popper" 관련 오류가 발생을 하면 아래 내용을 추가 합니다.

 

[webjars + bootstrap 4 사용 시]

build.gradle)
implementation "org.webjars:popper.js:1.6.1-lts"

fragments_jsimport.html)
<!-- jQuery 먼저 선언 합니다. -->
<script type="text/javascript" th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
<!-- Bootstrap 을 나중에 선언 합니다. -->

여기서는 선언 순서를 지켜 주셔야 합니다.

 

2. spring mvc 에서 thymeleaf 로 값 전달

Controller)
mav.addObject("key", 1);

Thymeleaf)
<a th:href="@{/goto/{id}(id=${key})}">KEY</a>
To
<a href="/goto/1">KEY</a>

 

:

[Springboot+Ajax] 데이터 통신

ITWeb/개발일반 2022. 4. 7. 15:43

Spring Domain, VO, Model

@Setter
@Getter
@ToString
public class SearchRequestModel {

    private PageModel pageModel;
    private long id;
}

@Setter
@Getter
@ToString
public class PagetModel {

    private int page;
    private int size;
    private String sort;
}

 

Spring RestController

@ResponseBody
@RequestMapping(
    value = "/api/search",
    method = RequestMethod.POST,
    produces = { MediaType.APPLICATION_JSON_VALUE }
)
public String search(
	@RequestBody SearchRequestModel m
) {
	return service.search(m)
}

 

Ajax

$.ajax({
    type: "POST",
    url: "/api/search",
    dataType: "json",
    contentType: "application/json",
    data: JSON.stringify({
        "pageModel": {
            "page": 1,
            "size": 20,
            "sort": "asc"
        },
        "id": 1
    }),
    success: function(res) {
    },
    error: function(res, status, e) {
    }
});

 

Ajax 요청 시 dataType, contentType 선언 없이 + @RequestBody 선언 없이 사용할 경우,

일반적인 POJO 스타일의 Data Binding 으로 처리가 됩니다. (Spring 에서는 자동으로 처리가 됩니다.)

또는

@RequestParam 을 이용해서 값을 전달 받을 수 있습니다.

 

오랜만에 화면 작업 하다 보니 이런것도 기억이 가물 가물 합니다.

: