스프링부트 비동기식 방명록 만들기 ( 2 )

배울내용:

Springboot 비동기식 게시판2

Springboot 비동기식 방명록 만들기

Springboot 방명록만들기

스프링 부트 방명록 만들기 

스프링 부트 비동기식 

비동기식 스프링부트 

 

 

 

지난시간: 

기본적인 틀은 다 만들었고 이번에는 등록을 누르면 아래에 추가되는걸 해볼것이다 

https://sarimus.tistory.com/128

스프링부트 비동기식 방명록 만들기 ( 1 )

 

 

 

먼저 기존에 만들었던 dto 패키지에 AddGuestbookRequest.java 파일을 만들고 아래처럼 넣어준다.

AddGuestbookRequest

package com.codehows.portfolio.dto;

import com.codehows.portfolio.entity.Guestbook;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;

@NoArgsConstructor
@AllArgsConstructor
@Getter
public class AddGuestbookRequest {

    private String guestName;
    private String guestContent;

    public Guestbook toEntity() {
        return Guestbook.builder()
                .guestName(guestName)
                .guestContent(guestContent)
                .build();
    }
}

 

이렇게 정의된 AddGuestbookRequest DTO 클래스는 클라이언트가 새로운 방명록을 추가할 때 요청하는 데이터를 담고 있습니다. 이 데이터를 Guestbook 엔티티로 변환하여 저장하거나 처리할 수 있습니다. 롬복의 어노테이션을 활용하여 간결하게 코드를 작성할 수 있습니다.

 

 

 

 

 

그리고 Service 패키지에 GuestbookService에 
AddbookRequest 를 추가하는 코드를 넣어준다

GuestbookService

package com.codehows.portfolio.service;

import com.codehows.portfolio.dto.AddGuestbookRequest;
import com.codehows.portfolio.entity.Guestbook;
import com.codehows.portfolio.repository.GuestbookRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;

import java.util.List;

@RequiredArgsConstructor
@Service
public class GuestbookService {

    private final GuestbookRepository guestbookRepository;

    public Guestbook save(AddGuestbookRequest request) {
        return guestbookRepository.save(request.toEntity());
    }

    public List<Guestbook> findAll() {
        return guestbookRepository.findAll();
    }
}

 

1. public Guestbook save(AddGuestbookRequest request) { ... }
   • 새로운 방명록을 저장하는 메서드입니다. AddGuestbookRequest 객체를 Guestbook 엔티티로 변환한 후, GuestbookRepository의 save 메서드를 호출하여 저장합니다.

 

 

 

 

그리고 controller 패키지 안에 있는GuestbookController 에 또한 addGuestbook 으로 데이터를 넣어줘야한다

 

GuestbookController

package com.codehows.portfolio.controller;

import com.codehows.portfolio.dto.AddGuestbookRequest;
import com.codehows.portfolio.dto.GuestbookResponse;
import com.codehows.portfolio.entity.Guestbook;
import com.codehows.portfolio.service.GuestbookService;
import lombok.RequiredArgsConstructor;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RequiredArgsConstructor
@RestController
public class GuestbookController {

    private final GuestbookService guestbookService;

    @PostMapping("/api/guestbooks")
    public ResponseEntity<Guestbook> addGuestbook(@RequestBody AddGuestbookRequest request) {
        Guestbook savedGuestbook = guestbookService.save(request);

        return ResponseEntity.status(HttpStatus.CREATED)
                .body(savedGuestbook);
    }

    @GetMapping("/api/guestbooks")
    public ResponseEntity<List<GuestbookResponse>> findAllGuestbooks() {
        List<GuestbookResponse> guestbooks = guestbookService.findAll()
                .stream()
                .map(GuestbookResponse::new)
                .toList();

        return ResponseEntity.ok()
                .body(guestbooks);
    }



}

 

 

 

 

 

뿐만아니라 데이터 및 View 까지 적용시켜야하니 

GuestbookViewController 에도 추가해준다 

 

package com.codehows.portfolio.controller;

import com.codehows.portfolio.dto.AddGuestbookRequest;
import com.codehows.portfolio.dto.GuestbookResponse;
import com.codehows.portfolio.dto.GuestbookViewResponse;
import com.codehows.portfolio.entity.Guestbook;
import com.codehows.portfolio.service.GuestbookService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RequiredArgsConstructor
@Controller
public class GuestbokkViewController {

    private final GuestbookService guestbookService;

    @RequestMapping(value = "/view", method = {RequestMethod.POST})
    public String viewPostMethod(Model model, @RequestBody AddGuestbookRequest request) {

        Guestbook savedGuestbook = guestbookService.save(request);

        List<GuestbookViewResponse> guestbooks = guestbookService.findAll()
                .stream()
                .map(GuestbookViewResponse::new)
                .toList();

        model.addAttribute("guestbooks", guestbooks);

        return "/guestview";
    }

    @GetMapping(value="view")
    public String GuestbooksView(Model model) {
        List<GuestbookViewResponse> guestbooks = guestbookService.findAll()
                .stream()
                .map(GuestbookViewResponse::new)
                .toList();
        model.addAttribute("guestbooks", guestbooks);

        return "/guestview";
    }
}

1. @RequestMapping(value = "/view", method = {RequestMethod.POST})
   • /view 엔드포인트에 대한 POST 요청을 처리하는 것을 나타냅니다. 이 어노테이션은 Spring 4.3부터 @PostMapping("/view")으로 대체될 수 있습니다.
2. public String viewPostMethod(Model model, @RequestBody AddGuestbookRequest request)
   • 메서드의 시그니처입니다. Model 객체와 HTTP 요청의 바디에서 AddGuestbookRequest를 받습니다. @RequestBody 어노테이션은 HTTP 요청의 바디를 자동으로 해당 객체로 변환해주는 역할을 합니다.
3. Guestbook savedGuestbook = guestbookService.save(request);
   • GuestbookService의 save 메서드를 호출하여 새로운 방명록을 저장합니다. 이 때, AddGuestbookRequest를 Guestbook 엔티티로 변환하여 저장합니다.
4. List<GuestbookViewResponse> guestbooks = guestbookService.findAll()...
   • GuestbookService의 findAll 메서드를 호출하여 모든 방명록을 조회합니다. 조회된 방명록을 GuestbookViewResponse로 매핑하여 리스트로 변환합니다.
5. model.addAttribute("guestbooks", guestbooks);
   • 모델에 "guestbooks"라는 속성으로 guestbooks 리스트를 추가합니다. 이는 View에서 guestbooks 리스트에 접근할 수 있게 합니다.
6. return "/guestview";
   • 화면을 표시할 View의 이름을 반환합니다. 여기서는 "/guestview"라는 Thymeleaf 템플릿을 사용하여 방명록 데이터를 화면에 표시할 것으로 예상됩니다.

이 메서드는 POST 요청을 처리하여 새로운 방명록을 저장하고, 저장된 방명록을 포함한 모든 방명록을 화면에 표시하는 기능을 수행합니다. 이 코드는 스프링 MVC에서 Thymeleaf와 함께 사용될 수 있습니다.

 

 

 

 

 

이렇게 작성후 

html 에 JSON 형태의 Ajax 데이터를 

넣어주면 비동기식으로 작동이 될것이다

아래코드는 이미 넣어져있을것이다 

<script>
    function dataSend() {
        var guestDto = {
            guestName : $("#guestnn").val(),
            guestContent : $("#guestct").val()
        }

        var guest = JSON.stringify(guestDto);

        $.ajax({
            url: "/view",
            type: "POST",
            data: guest,
            contentType : "application/json",
            success: function(data) {
                $('#refreshDiv').replaceWith(data);
            }
        });
    }
</script>

 

위에 것에 dataSend 는 아래의 코드에 입력후 등록 버튼을 클릭시 동작하게된다. 

 

 

    <h3>방명록 입력</h3>
    <input id="guestnn" placeholder="이름을 입력하세요">
    <input id="guestct" placeholder="내용을 입력하세요">
    <input value="등록" type="button" onclick="dataSend()">

 

 

1. dataSend() 함수:
   • 입력된 방명록 데이터를 서버로 전송하는 JavaScript 함수입니다.
   • 입력된 데이터를 JSON 형식으로 만들어서 POST 요청으로 서버에 전송합니다.
   • 전송이 성공하면 서버에서 반환한 HTML 데이터로 화면을 갱신합니다.
2. jQuery:
   • $.ajax() 함수를 사용하여 비동기적으로 서버에 데이터를 전송하고 응답을 처리합니다.
   • POST 방식으로 데이터를 전송하고, contentType을 "application/json"으로 설정하여 JSON 형식의 데이터를 전송합니다.
   • 서버로부터 성공적인 응답을 받으면 $('#refreshDiv').replaceWith(data); 코드를 통해 현재 페이지를 서버에서 받은 HTML 데이터로 교체하여 화면을 갱신합니다.

 

 

<div th:each="guestbook : ${guestbooks}">
    <tr>
        <td th:text="${guestbook.id}"></td>
        <td th:text="${guestbook.guestName}"></td>
        <td th:text="${guestbook.guestContent}"></td>
    </tr>
</div>

 

1. Thymeleaf의 반복문(th:each="guestbook : ${guestbooks}"):
   • ${guestbooks}에 있는 방명록 데이터를 반복하여 테이블에 표시합니다.

 

 

 

 

이렇게 한뒤에 http://localhost:8080/view 에가서 이름과 내용을 입력해보자 

아래와 같이 동작 할것이다

만약에 이렇게 안나오면 빼먹은 것은 없는지 천천히 다시보도록 하자 

또는 DB 설정이 잘 되어있는지 다시 확인해보자