📚 Springboot

✍🏻 게시판 crud

📌 게시판 글 저장

function writeAticle() {
            $.ajax({
                type: "POST",
                url: "/article",
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify({content: $("#content").val()}),
                success: function (response) {
                    $("#content").val('');
                    if(confirm("저장된 메시지를 확인하시겠어요?")) {
                        readAticle(response['id'])
                    }
                }
            })
        }

• 글 저장 버튼이 눌려 writeArticle 이 실행되면 '/article' 주소로, post 방식으로,
  {content: $("#content").val()} 라는 데이터가 json 의 형태로 전송이 된다.
  private final BoardService boardService;

  @PostMapping("/article")
    public Board setBoard(@RequestBody BoardDto boardDto){

        return boardService.setBoard(boardDto);
    }

• 이 때 boardcontroller가 위 요청을 받아서 처리하는데 이 때 Board entity 를 설정해준다. 매개변수로 받는 @RequestBody는 무엇일까

✔ @RequestBody VS @RequestParam

- @RequestParam 은 url 상에서 데이터를 찾는다. 따라서 만약 @RequestBody BoardDto boardDto 가 아니라 @RequestParam BoardDto boardDto 이라면 오류가 난다 http://localhost:8080/article?content-content 이런 식의 url이 되어야 성공적으로 실행되는데 비동기식으로 데이터를 전달할 때는 url은 http://localhost:8080/article로 변함이 없고 body에 데이터를 포함하여 전송하기 때문에 @RequestParam 으로는 받을 수 없는 것이다.

• 따라서 @RequestBody를 사용하면 getter 와 setter가 구현되어있는 BoardDto 객체를 자동으로 생성해준다.

✔ BoardService

public Board setBoard(BoardDto boardDto){
        Board board = new Board();
        board.setContent(boardDto.getContent());
        boardRepository.save(board);
        return board;
    }

• boardservice는 Board라는 새 객체를 생성해주고 boardDto로 받아온 내용을 board 엔티티에 저장해준다 . 레포지토리에 저장 후 만들어진 board를 return 해준다

✔ BoardController

@PostMapping("/article")
    public Board setBoard(@RequestBody BoardDto boardDto){

        return boardService.setBoard(boardDto);
    }

• boardcontroller 가 boardService에서 만들어진 board 엔티티를 반환한다

📌 게시판 글 조회

✔ index.html

function writeArticle() {
            $.ajax({
                type: "POST",
                url: "/article",
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify({content: $("#content").val()}),
                success: function (response) {
                    $("#content").val('');
                    if(confirm("저장된 메시지를 확인하시겠어요?")) {
                        readArticle(response['id'])
                    }
                }
            })
        }

                
function readArticle(id) {
            $.ajax({
                type: "GET",
                url: `/article/${id}`,
                success: function (response) {
                    console.log(response['content']);
                    $("#acticle").html(response['content']);
                }
            })
        }

• 응답한 데이터의 id의 article을 읽어주는 함수를 가져온다. 매번 저장한 내용만을 보여주어야하기 때문에 $("#content").val(''); 도 해주어야한다
• readArticle 함수는 '/article/${id}'에 데이터를 요청하고 반환된 entity의 content를 가져와서 article 태그 속성에 보여준다

✔ BoardController

@GetMapping("/article/{id}")
    public Board getBoard(@PathVariable Long id){

        return boardService.getBoard(id);
    }

• id로 Board를 가져와 return 한다

✔ @PathVariable

• Type=> http://127.0.0.1/article/1 과 같이 REST API에서 값을 호출할 때 많이 사용한다

✔ BoardService

public Board getBoard(Long id){
        
        return boardRepository.findById(id).get();
        
    }

• boardRepository에서 id로 entity를 가져온다