게시판 만들어보기 11일차

박세건·2023년 7월 8일
0

Spring Boot 게시판 Project 

목록 보기
11/19

댓글 구현

ajax property

board/detail.html 수정

<!DOCTYPE html>

<html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{layout/default_layout}">
<div layout:fragment="content">
    <!-- Section-->

    <section class="container">
        <br>


        <div th:if="${loginUser.id}==${board.user.id}">



            <button type="button" th:onclick="|location.href='@{/board/modifyForm/{boardId}(boardId=${board.id})}'|"
                    class="btn btn-warning">글 수정&nbsp;
            </button>
            <button type="submit" class="btn btn-danger" id="btn-danger">글 삭제</button>
        </div>


        <br><br>
        <div class="form-group">
            <h1> 제목 : [[${board.title}]]</h1>
        </div>
        <br>
        <div class="form-group">
            <h1> 작성자 : [[${board.user.username}]]</h1>
        </div>
        <br>
        <div class="form-group">
            <h1> 내용 : </h1>
            <div id="content" th:utext="${board.content}"></div>
        </div>
        </br>
        <div class="form-group">
            <h1> 조횟수 : [[${board.hit}]]</h1>
        </div>
        <br>
        <div class="form-group">
            <h1> 작성 시간 : [[${board.createTime}]]</h1>
        </div>
        <!--    jquery를 사용해서 데이터를 주기위한 input 태그-->
        <input id="boardId" type="hidden" th:value="${board.id}">

        <div class="container">
            <form id="commentForm" name="commentForm" method="post">
                <br><br>
                <div>
                    <div>
                        <span><strong>Comments</strong></span> <span id="cCnt"></span>
                    </div>
                    <div>
                        <table class="table">
                            <tr>
                                <td>
                                    <textarea style="width: 1100px" rows="3" cols="30" id="replyContent" name="content"
                                              placeholder="댓글을 입력하세요"></textarea>
                                    <br>
                                    <div>
                                        <button type="button" id="saveReply" class="btn pull-right btn-success">등록
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <input type="hidden" id="b_code" name="b_code" value="${result.code }"/>
            </form>
        </div>
        <div class="container">
            <form id="commentListForm" name="commentListForm" method="post">
                <div id="commentList">
                </div>
            </form>
        </div>



        <script>
            // 메인화면 페이지 로드 함수

            $(document).ready(function () {

                $('#summernote').summernote({
                    height: 400,
                    maxHeight: 400
                });
            });

        </script>
        <script>

            $(document).ready(function () {
                let boardId = $("#boardId").val();
                $("#btn-danger").click(function () {
                    if (confirm("정말로 글을 삭제하시겠습니까?")) {
                        location.href = '/board/delete/' + boardId;
                    }
                });
            });
        </script>

        <script>
            /*
             * 댓글 등록하기(Ajax)
             */
            $(document).ready(function () {
                $("#saveReply").click(function () {
                    let data = {
                        boardId: $("#boardId").val(),
                        content: $("#replyContent").val()
                    }
                    console.log(data);
                    $.ajax({
                        url: "/reply/save",
                        type: "POST",
                        data: JSON.stringify(data),
                        contentType: "application/json; charset=utf-8",
                        //dataType : "json", //디폴트 값으로 알아서 맞춰서 해준다
                        success: function (data) {
                            alert(data);
                        },
                        error: function (req,status,error) {

                            console.log(req);
                        },


                    });
                });
            });

        </script>



    </section>
</div>

ajax를 사용했고 Board와 Reply가 양방향 연관관계이기때문에 boardId와 content 내용 필요

ReplyApiController

    @PostMapping("/reply/save")
    @ResponseBody
    public String replySave(@RequestBody ReplySaveDto replySaveDto, @AuthenticationPrincipal PrincipalDetail principalDetail){
        System.out.println("-----------------------------------------------------"+replySaveDto);

        User user = principalDetail.getUser();
        replyService.join(replySaveDto,user);
        return "true";
    }

ajax에서 json형태로 값을 서버로 보내주었기때문에 json을 자바객체로 바꿔주는 @RequestBody 어노테이션을 사용해서 값을 받았고 dataType은 디폴트값으로 알아서 맞춰주기때문에 true를 리턴하게해주고 올바르게 저장까지 완료.

로그인 없이 게시물 확인

홈 화면에서 게시물을 간단하게 확인할 수 있고 클릭시에 자세히 볼수있게 만들었지만, 로그인을 해야만 게시물을 확인할 수 있는 기능을 비회원 사람도 게시물을 볼 수 있게 바꾸고싶었다.

네임 스페이스 추가

xmlns:sec="http://www.thymeleaf.org/extras/spring-security"

index.html 수정

<!DOCTYPE html>
//수정부분
<html xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
        xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default_layout}">
<div layout:fragment="content">
    <!-- Section-->
    <section class="py-5">
        <div class="container px-4 px-lg-5 mt-5">
            <div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">

                <tr th:each="board : ${boardList}">
                //수정부분
                    <a sec:authorize="isAuthenticated()" th:href="@{/board/detail/{board.id}(board.id=${board.id})}">
                        <div class="col mb-5">
                            <div class="card h-100">
                                <!-- Product details-->
                                <div class="card-body p-4">
                                    <div class="text-center">
                                        <!-- Product name-->

                                        <h1 th:text="${board.title}"></h1>
                                        <br><br>
                                        <div>
                                            작성자 :
                                            <td th:text="${board.user.username}"></td>
                                        </div>


                                        <!-- Product price-->
                                    </div>
                                </div>
                                <!-- Product actions-->
                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                    <div class="text-center">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                    //수정부분
                    <a sec:authorize="!isAuthenticated()"  th:href="@{/auth/board/detail/{board.id}(board.id=${board.id})}">
                        <div class="col mb-5">
                            <div class="card h-100">
                                <!-- Product details-->
                                <div class="card-body p-4">
                                    <div class="text-center">
                                        <!-- Product name-->
                                        <!--수정후에 커밋되는지 확인-->
                                        <h1 th:text="${board.title}"></h1>
                                        <br><br>
                                        <div>
                                            작성자 :
                                            <td th:text="${board.user.username}"></td>
                                        </div>


                                        <!-- Product price-->
                                    </div>
                                </div>
                                <!-- Product actions-->
                                <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                                    <div class="text-center">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </tr>


            </div>
        </div>
    </section>
</div>

기존에 게시물을 간랸하게 보여주는 코드를 복사해서 회원인증이 되었을때와 그렇지 않을때의 조건을 걸어주어서 해결

BoardController 수정

    @GetMapping("/board/detail/{boardId}")
    public String loginDetailForm(@PathVariable int boardId, Model model, @AuthenticationPrincipal PrincipalDetail principalDetail) {
        User loginUser = principalDetail.getUser();
        Board board = boardService.detail(boardId);
        model.addAttribute("board", board);
        model.addAttribute("loginUser", loginUser);
        return "/board/detail";
    }
    @GetMapping("/auth/board/detail/{boardId}")
    public String detailForm(@PathVariable int boardId, Model model) {
        Board board = boardService.detail(boardId);
        model.addAttribute("board", board);
        return "/board/detail";
    }

기존에 있는 detailForm을 하나더 만들어주고 /auth를 추가해서 비회원도 확인할 수 있게 함수를 하나 만들어주고 새로 만들어준 함수에는 @AuthenticationPriciple 를 제거해준다

/board/detail.html 수정

<!DOCTYPE html>

<html
        xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        layout:decorate="~{layout/default_layout}">
<div layout:fragment="content">
    <!-- Section-->

    <section class="container">
        <br>

        //수정부분
        <div sec:authorize="isAuthenticated()" th:if="${loginUser.id}==${board.user.id}">


            <button type="button" th:onclick="|location.href='@{/board/modifyForm/{boardId}(boardId=${board.id})}'|"
                    class="btn btn-warning">글 수정&nbsp;
            </button>
            <button type="submit" class="btn btn-danger" id="btn-danger">글 삭제</button>
        </div>


        <br><br>
        <div class="form-group">
            <h1> 제목 : [[${board.title}]]</h1>
        </div>
        <br>
        <div class="form-group">
            <h1> 작성자 : [[${board.user.username}]]</h1>
        </div>
        <br>
        <div class="form-group">
            <h1> 내용 : </h1>
            <div id="content" th:utext="${board.content}"></div>
        </div>
        </br>
        <div class="form-group">
            <h1> 조횟수 : [[${board.hit}]]</h1>
        </div>
        <br>
        <div class="form-group">
            <h1> 작성 시간 : [[${board.createTime}]]</h1>
        </div>
        <!--    jquery를 사용해서 데이터를 주기위한 input 태그-->
        <input id="boardId" type="hidden" th:value="${board.id}">
//수정부분
        <div sec:authorize="isAuthenticated()" class="container">
            <form id="commentForm" name="commentForm" method="post">
                <br><br>
                <div>
                    <div>
                        <span><strong>Comments</strong></span> <span id="cCnt"></span>
                    </div>
                    <div>
                        <table class="table">
                            <tr>
                                <td>
                                    <textarea style="width: 1100px" rows="3" cols="30" id="replyContent" name="content"
                                              placeholder="댓글을 입력하세요"></textarea>
                                    <br>
                                    <div>
                                        <button type="button" id="saveReply" class="btn pull-right btn-success">등록
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <input type="hidden" id="b_code" name="b_code" value="${result.code }"/>
            </form>
        </div>
        <div class="container">
            <form id="commentListForm" name="commentListForm" method="post">
                <div id="commentList">
                </div>
            </form>
        </div>



        <script>
            // 메인화면 페이지 로드 함수

            $(document).ready(function () {

                $('#summernote').summernote({
                    height: 400,
                    maxHeight: 400
                });
            });

        </script>
        <script>

            $(document).ready(function () {
                let boardId = $("#boardId").val();
                $("#btn-danger").click(function () {
                    if (confirm("정말로 글을 삭제하시겠습니까?")) {
                        location.href = '/board/delete/' + boardId;
                    }
                });
            });
        </script>

        <script>
            /*
             * 댓글 등록하기(Ajax)
             */
            $(document).ready(function () {
                $("#saveReply").click(function () {
                    let data = {
                        boardId: $("#boardId").val(),
                        content: $("#replyContent").val()
                    }
                    console.log(data);
                    $.ajax({
                        url: "/reply/save",
                        type: "POST",
                        data: JSON.stringify(data),
                        contentType: "application/json; charset=utf-8",
                        //dataType : "json", //디폴트 값으로 알아서 맞춰서 해준다
                        success: function (data) {
                            alert(data);
                        },
                        error: function (req,status,error) {

                            console.log(req);
                        },


                    });
                });
            });

        </script>



    </section>
</div>

또한 글 수정,삭제 버튼은 로그인한 사용자가 글작성한 사용자가 같을때에 보여지게 해두었는데 여기다가 로그인을 했는지 확인하는 조건도 추가적으로 걸어주고, 댓글 또한 비회원은 사용하지 못하도록 

sec:authorize="isAuthenticated()"	//로그인했는지 확인하는 함수

를 추가로 작성해준다.

profile
박세건
멋있는 사람 - 일단 하자
이전 포스트

게시판 만들어보기 10일차

다음 포스트

게시판 만들어보기 12일차

0개의 댓글