[Spring Boot] 상품 추가기능 / th:fragment / th:replace

---

 

 

1. 글작성페이지 하나 만들고 인풋과 폼 만들어놓고

2. 유저가 전송누르면 글을 서버로 먼저 보내고

3. 그 다음에 서버는 글을 검사 후 별일 없으면 DB에 저장

 

 

1. 글작성페이지 만들기 

(write.html)

<form>
  <input name="title">
  <input name="price">
  <button type="button">버튼</button>
</form>

 name 속성을 잘 작명해놔야 서버로 전송이 됩니다.

 

 

@GetMapping("/write")
String write() {
  return "write.html";
}

html 페이지 보내주고 싶으면 API를 하나 만들기

 (/write로 접속하면 글작성 페이지를 보내)

 

 

2. 전송누르면 서버로 글 전송

HTTP POST 요청을 날리면 문자나 숫자를 서버로 전송

(write.html)

<form action="/add" method="POST">
  <input name="title">
  <input name="price">
  <button type="button">버튼</button>
</form>

action="/URL"과

method="POST"를 기입하면

전송버튼 눌렀을 때 특정 /URL로 POST요청을 날림

 

 

 

 

3. 서버는 데이터 받으면 확인 후 DB저장

@PostMapping("/add")
String writePost() {
 return "";
}

참고로 @DeleteMapping, @PutMapping 이런 식으로 쓰면 DELETE, PUT 요청도 처리하는 API를 만들 수 있습니다.

 

 

- 유저가 보낸 데이터 출력은

@PostMapping("/add")
String writePost(String title, Integer price) {
 return "";
}

 

유저가 보낸 데이터 출력하려면

함수 소괄호 안에 파라미터를 잘 적으면 되는데

지금 <input>보시면 title, price 라는 이름으로 인풋 데이터들을 보내고 있지 않습니까

그걸 그대로 파라미터란에 적어주면 유저가 보낸 title, price를 파라미터 변수에 담아줍니다.

그리고 왼쪽에 타입을 적으면 그 타입으로 title, price 변수를 각각 변환해줍니다.

 

 

 

@PostMapping("/add")
String writePost(@RequestParam String title, @RequestParam Integer price) {
 return "redirect:/list";
}

- 안되면 왼쪽에 @RequestParam 붙여봅시다.

- redirect:/list 이러면 특정 페이지로 유저를 강제 이동시킬 수 있습니다. (ajax로 요청하는 경우 이동불가능)

 

 

 

---

 

- 유저가 제출한 내용을 이거저거 검사해본 다음에 Item 테이블에 저장하는 기능

테이블에 저장하는건 어떻게 하냐면

new Item()에다가 여러가지 정보를 채운 다음에

리포지토리.save() 안에 넣으면 그 정보들을 채워서 행을 하나 테이블에 추가

@PostMapping("/add")
String writePost(String title, Integer price) {
  Item item = new Item;
  item.setTitle(title);
  item.setPrice(price);
  itemRepository.save(item);
  return "redirect:/list";
}

 private을 붙여놨기 때문에 setter 함수를 사용해서 데이터를 집어넣었습니다.

 

 

 

- 유저가 보낸 데이터를 object로 쉽게 변환하려면 @ModelAttribute

가끔 유저가 보낸 데이터를 object로 바로 변환하고 싶을 때

@PostMapping("/add")
String writePost(@ModelAttribute Item item) {
  itemRepository.save(item);
  return "redirect:/list";
}

 @ModelAttribute 클래스명 변수명 이렇게 작성하면

var 변수명 = new 클래스명() 을 알아서 해주고

그 변수에 유저가 보낸 데이터를 다 집어넣어줍니다.

 

 

 

 

 

 

 

- HTML UI 재사용하기

templates 폴더에 재사용할 html 덩어리를 보관할 파일을 하나 만들기

(nav.html)

<div class="nav" th:fragment="navbar">
  <a class="logo">SpringMall</a>
  <a>List</a>
  <a>Write</a>
</div>

이런 html 덩어리를 재사용하고 싶으면

th:fragment="작명"

입력해두면 되는데 그럼 다른 파일에서 이 html 덩어리를 쉽게 쓸 수 있습니다.

 

 

 

<div th:replace="~{nav.html :: navbar}"></div>

다른 파일에서   th:replace="~{파일경로 :: fragment이름}" 이렇게 쓰면

그 파일경로에 있던 th:fragment를 가져다가 첨부해줍니다.

그래서 위처럼 작성하면 div태그 내용물을 th:fragment="navbar" 붙은 html 덩어리로 갈아치워줍니다

 

 

 

 

(참고1) th:insert 사용하면 div를 갈아치우는게 아니라 div 안에 붙여넣어줍니다.

근데 갈아치우는게 일반적임

 

(참고2) th:fragment 정의는 한 파일에 여러번 사용해도 됩니다.

 

(참고3) html 덩어리로 변수나 데이터같은걸 전송해줄 수도 있습니다. 

th:replace="nav.html :: navbar('데이터1', '데이터2')"

이러면 되는데 이런게 가능하다고만 알아둡시다.

 

---

 

* 이글은 아래 강의를 참고해 작성했습니다. 

https://codingapple.com/course/spring-boot-jpa/

쉽게 배우는 Spring Boot & JPA - 코딩애플 온라인 강좌