[22/02/23]SpringBoot賛機能の実施

27531 ワード


SpringFrameworkで実現した「いいね」機能も本プロジェクトで実現します.
🧐 デザイン
  • の詳細な投稿を検索する場合は、登録会員の賛数をチェックして、
  • が好きかどうかを表示してください.
  • の情報があれば、いいねと同時にユーザーに見せることができます.
  • がなければ、空の愛が見えます.
  • いいねをつけていないプレイヤーがクリックすると、saveでなければ削除!
  • 今回はlike check列がなくnull値で比較します.
    LikeEntity
    @Entity
    @Getter
    @Setter
    @Table(name = "like_table")
    public class LikeEntity {
        @Id
        @GeneratedValue(strategy = GenerationType.IDENTITY)
        @Column(name = "like_id")
        private Long id;
    
        @ManyToOne(fetch = FetchType.LAZY)
        @JoinColumn(name = "member_id")
        private MemberEntity memberEntity;
    
        @ManyToOne(fetch = FetchType.LAZY)
        @JoinColumn(name = "board_id")
        private BoardEntity boardEntity;
    
        public static LikeEntity toLikeEntity(MemberEntity memberEntity, BoardEntity boardEntity){
            LikeEntity likeEntity = new LikeEntity();
            likeEntity.setMemberEntity(memberEntity);
            likeEntity.setBoardEntity(boardEntity);
    
            return likeEntity;
        }
    
    
    }
    
    htmlのスクリプトは以前と似ています.
    <script>
        $(document).ready(function () {
            let likeVal = document.getElementById('like_check').value
            const boardId = $("#boardId").val();
            const memberId = $("#memberId").val();
            console.log(memberId);
            console.log(likeVal);
            const likeImg = document.getElementById("likeImg")
    
            if (likeVal > 0) {
                likeImg.src = "/assets/img/like_click.png";
            } else {
                likeImg.src = "/assets/img/like_empty.png";
            }
            // 좋아요 버튼을 클릭 시 실행되는 코드
            $("#likeImg").on("click", function () {
                $.ajax({
                    url: '/board/like',
                    type: 'POST',
                    data: {'boardId': boardId, 'memberId': memberId},
                    success: function (data) {
                        if (data == 1) {
                            $("#likeImg").attr("src", "/assets/img/like_click.png");
                            location.href="/board/"+boardId;
    
                        } else {
                            $("#likeImg").attr("src", "/assets/img/like_empty.png");
                            location.href="/board/"+boardId;
                        }
                    }, error: function () {
                        $("#likeImg").attr("src", "/assets/img/like_click.png");
                        console.log('오타 찾으세요')
                    }
    
                });
    
            });
        });
    </script>
    boardController
     // 상세조회
        @GetMapping("{boardId}")
        public String findById(@PathVariable("boardId") Long boardId, Model model, HttpSession session){
            BoardDetailDTO boardDetailDTO = bs.findById(boardId);
            List<CommentDetailDTO> commentList = cs.findAll(boardId);
            // memberId 세션값 가져오기
            Long memberId = (Long) session.getAttribute(LOGIN_ID);
    
            model.addAttribute("board",boardDetailDTO);
            model.addAttribute("commentList",commentList);
    
            bs.findLike(boardId,memberId);
    
            int like = bs.findLike(boardId,memberId);
            model.addAttribute("like",like);
    
            return "/board/findById";
        }
    //좋아요
        @PostMapping("/like")
        public @ResponseBody int like(Long boardId, Long memberId) {
            int result = bs.saveLike(boardId,memberId);
            return result;
        }
    投稿IDと会員IDを一緒に取り出して照会するので、新しいrepositoryでメソッドを作成して照会します.
    nullPointErexceptionは大変でしたが、Optionalで包んで空の比較値を使うので簡単に通れました.
     @Override
        public int findLike(Long boardId, Long memberId) {
            // 저장된 DTO 가 없다면 0, 있다면 1
    
            Optional<LikeEntity> findLike = lr.findByBoardEntity_IdAndMemberEntity_Id(boardId, memberId);
    
    
            if (findLike.isEmpty()){
                return 0;
            }else {
    
                return 1;
            }
        }
    
        @Transactional
        @Override
        public int saveLike(Long boardId, Long memberId) {
            Optional<LikeEntity> findLike = lr.findByBoardEntity_IdAndMemberEntity_Id(boardId, memberId);
    
            System.out.println(findLike.isEmpty());
    
            if (findLike.isEmpty()){
                MemberEntity memberEntity = mr.findById(memberId).get();
                BoardEntity boardEntity = br.findById(boardId).get();
    
                LikeEntity likeEntity = LikeEntity.toLikeEntity(memberEntity, boardEntity);
                lr.save(likeEntity);
                br.plusLike(boardId);
                return 1;
            }else {
                lr.deleteByBoardEntity_IdAndMemberEntity_Id(boardId, memberId);
                br.minusLike(boardId);
                return 0;
    
            }
    
        }
    LikeRepository
    public interface LikeRepository extends JpaRepository<LikeEntity,Long> {
        Optional<LikeEntity> findByBoardEntity_IdAndMemberEntity_Id(Long boardId, Long memberId);
        void  deleteByBoardEntity_IdAndMemberEntity_Id(Long boardId, Long memberId);
    }
    
    SpringFrameWorkで成功できなかったのでお疲れ様でした!
    また、多くのエラーや疲れが発生した場合は、コード休憩をやめたほうがいいです.さっぱりした髪で見ると、間違いがはっきり見える.このさわやかな髪で、ショッピングバスケットの機能まで行きます!
    ああ!いいねをキャンセルするときはページのロードに時間がかかりますが、この部分は必ず改善しなければなりません.