댓글 웹 레이어 만들기

컨트롤러 추가

/src/main/java/v2/mvc/spring/blog/controller/BlogController.java

package v2.mvc.spring.blog.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import v2.mvc.spring.blog.service.CommentService;
import v2.mvc.spring.blog.vo.CommentAddRequestVO;
import v2.mvc.spring.blog.vo.CommentResponseVO;

@Controller
@RequestMapping("/comment")
public class CommentController {

    @Autowired
    private CommentService commentService;

    @PostMapping("/add")
    @ResponseBody
    public CommentResponseVO add(CommentAddRequestVO commentAddRequestVO) {
        return this.commentService.add(commentAddRequestVO);
    }
}

controller 패키지 아래에 CommentController 클래스를 생성합니다.
상기 코드를 입력합니다.
자동 불러오기를 통해 패키지들을 불러옵니다.

잭슨 메이븐 다운로드

pom.xml

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.10</version>
</dependency>

pom.xml 파일을 엽니다.
jackson 의존성을 추가합니다.
메이븐 빌드를 합니다.

댓글 추가 영역 만들기

<div>
    <input type='text' id='cmtBdy' style='width:40%' />
    <input type='password' id='tmpPw' style='width:40%' />
    <input type='button' id='btn_comment_add' value='댓글 쓰기' />
</div>

read.jsp 파일을 엽니다.
삭제 버튼 아래에 html 코드를 입력합니다.

jQuery CDN 접속

브라우저로 https://releases.jquery.com/ 에 접속합니다. 혹은 검색창에 jquery cdn 이라고 검색한 후 들어가셔도 됩니다.
jQuery Core에서 minified를 클릭합니다.

Content Delivery Network 주소 복사

모달 팝업이 보입니다.
복사 버튼을 눌러서 클립보드로 복사합니다.

댓글 추가 자바스크립트 작성

/src/main/webapp/WEB-INF/views/blog/read.jsp

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $("#btn_comment_add").click(function(){
        let blgContSeq = ${blogCont.BLG_CONT_SEQ};
        let cmtBdy = $("#cmtBdy").val();
        let tmpPw = $("#tmpPw").val();
        let send_data = {};

        if (tmpPw == ""){
            send_data = {
                "blgContSeq": blgContSeq,
                "cmtBdy" : cmtBdy
            };
        }else{
            send_data = {
                "blgContSeq": blgContSeq,
                "cmtBdy" : cmtBdy,
                "tmpPw" : tmpPw,
            };
        }

        $.post( "/comment/add", send_data, function( data ) {
            console.log(data);
        });
    });
</script>