[Blog 프로젝트] 게시글 작성 기능 (API 통신)

게시글 작성 기능

1. 글 작성 form 요청에 대한 컨트롤러 생성
   • /board/saveForm 요청이 오면 template/board/saveForm.html 을 응답할 수 있도록 컨트롤러에 메서드를 생성하고 매핑합니다.
2. 글 작성 html Form 생성
   • 글 작성 Form에서는 제목과 내용을 입력받고 버튼 클릭 시 api 요청을 보낼 것입니다.
   • 내용 작성은 BootStrap5 환경에서 summernote 라이브러리를 사용하여 입력 받습니다.
3. ajax 통신을 위한 javascript 파일 생성
   • btn-save 버튼 클릭 시 제목, 내용을 json 형식으로 /api/board 에 POST 요청을 전송합니다.
4. api 요청에 대한 Controller 생성
   • Board 객체와 PrincipalDetail 객체를 파라미터로 받아 글쓰기 api를 수행합니다.
5. 비즈니스 로직을 담당하는 Service 파일 생성

---

1. 글 작성 form 요청에 대한 컨트롤러 생성

/board/saveForm 요청이 오면 template/board/saveForm.html 을 응답할 수 있도록 컨트롤러에 메서드를 생성하고 매핑해줍니다.

@GetMapping("/board/saveForm")
public String saveForm(){
    return "board/saveForm";
}

---

2. 글 작성 html Form 생성

글 작성 Form에서는 제목과 내용을 입력받고 버튼 클릭 시 api 요청을 보낼 것입니다.

내용 작성은 BootStrap5 환경에서 summernote 라이브러리를 사용하여 입력 받습니다.

<div class="container">

  <form method="post">
    <div class="mb-3 mt-3" style="margin-bottom: 1rem">
      <label for="title" class="form-label">Title</label>
      <input type="text" class="form-control" id="title" placeholder="Enter Title" name="title">
    </div>

    <div class="mb-3" style="margin-bottom: 1rem">
      <label for="content" class="form-label">Content</label>
      <textarea class="form-control summernote" rows="5" id="content" name="content"></textarea>
    </div>
  </form>

  <button id="btn-save" class="btn btn-primary">글쓰기 완료</button>

</div>

<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.js"
        integrity="sha256-5slxYrL5Ct3mhMAp/dgnb5JSnTYMtkr4dHby34N10qw=" crossorigin="anonymous"></script>

<!-- language pack -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/lang/summernote-ko-KR.min.js"
        integrity="sha256-y2bkXLA0VKwUx5hwbBKnaboRThcu7YOFyuYarJbCnoQ=" crossorigin="anonymous"></script>

<script>
  $('.summernote').summernote({
    placeholder: 'Enter Content',
    tabsize: 2,
    height: 400,
    lang: 'ko-KR', // default: 'en-US'
  });
</script>

<script src="/js/board.js"></script>

btn-save(글쓰기 완료) 버튼을 클릭하면 board.js에 작성되어있는 코드가 실행됩니다.

부트스트랩5 환경에서의 섬머노트 사용법은 해당 포스팅을 활용하였습니다.

Summernote for Bootstrap 5 - 꾸션(ccusean)

---

3. ajax 통신을 위한 javascript 파일 생성

btn-save 버튼 클릭 시 제목, 내용을 json 형식으로 /api/board 에 POST 요청을 전송합니다.

let index = {
    init: function (){
        $("#btn-save").on("click", ()=>{ 
            this.save(); 
        });
    },

    save: function () {
        let data = {
            title: $("#title").val(),
            content: $("#content").val()
        }

        $.ajax({
            type: "POST",
            url: "/api/board",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            dataType: "json",

        }).done(function (response) {
            // 요청 결과가 정상인 경우
            const status = response.status;

            if (status === 200){
                alert("글쓰기가 완료 되었습니다.");
                location.href = ("/");
            } else {
                throw new Error();
            }

        }).fail(function (error) {
            // 요청 결과가 비정상인 경우
            alert(JSON.stringify(error));

        });
    }
}

index.init();

---

4. api 요청에 대한 Controller 생성

@RestController
public class BoardApiController {

    @Autowired
    private BoardService boardService;

    @PostMapping("/api/board")
    public ResponseDTO<Integer> save(@RequestBody Board board,
                                     @AuthenticationPrincipal PrincipalDetail principalDetail){

        boardService.save(board, principalDetail.getUser());
        return new ResponseDTO<>(HttpStatus.OK.value(), 1);
    }
}

http body에 json 형식으로 title과 content가 담겨져 post 요청이 오기 때문에 @RequestBody 어노테이션을 사용하여 Board 객체에 해당 정보를 담아줍니다.

스프링 시큐리티의 세션에서 로그인된 사용자의 정보를 가져옵니다.

사용자의 정보. 입력한 게시글 정보를 BoardService를 통하여 DB에 저장합니다.

---

5. api 요청에 대한 Controller 생성

@Transactional
public void save(Board board, User user){
    board.setUser(user);
    boardRepository.save(board);
}

board 정보에 user 정보를 추가하고 BoardRepository를 통하여 DB에 Insert합니다.