티스토리 뷰

SCIT/8월

8/13 [Ajax] Test3. 추천

Seraphim_ 2024. 8. 13. 17:05

추천수 클릭시 +1 증가

1. HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Test 1</title>
    <link rel="stylesheet" th:href="@{/static/css/styles.css}">
    <script th:src="@{/static/jq/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/static/js/test3JS.js}"></script>
</head>
<body>
<div class="container">
    <header>
        <h1>[ Ajax Test 3 - 추천]</h1>
    </header>
    <main>
        <div id="content" class="content">
            <!-- AJAX 로드된 데이터가 아래에 표시됩니다. -->
          <p><button id="bt">추천</button></p>
            <div id="view">
                0
            </div>
        </div>
    </main>
    <footer>
        <p>&copy; 2024.08.13 AJAX Practice</p>
    </footer>
</div>
</body>
</html>

 

2. Javascript

$(document).ready(function () {
    // 추천 테스트 - '추천' 버튼 클릭 시 실행
    $('#bt').click(function () {
        // 서버로 글번호 (num) 1번을 전달하여 추천하고 돌아올 때 추천수를 가지고 와서 출력
        $.ajax({
            // 갈 때
            url: 'likeUp',
            type: 'post',
            data: {num : 1},    // 추천할 글번호를 1로 TEST
            // 갔다가 돌아올때
            dataType : 'text',
            success: function (cnt) {
                $('#view').html(cnt);
                alert('추천 성공');
            },
            error: function () {
                alert('추천 실패');
            }
        });
    });
});

 

3. Controller

package net.datasa.test_ajax.controller;

import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import net.datasa.test_ajax.service.AjaxService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Slf4j
@RequiredArgsConstructor
@Controller
public class AjaxTest3Controller {

    private final AjaxService ajaxService;

    //like.html로 포워딩. 추천기능 테스트
    @GetMapping("like")
    public String like() {
        return "AjaxTest/ajax3";
    }

    @ResponseBody
    @PostMapping("likeUp")
    public int likeUp(@RequestParam("num") Integer num) {
        // ※ Integer : 객체(null 可) int : 자료형(null 不可)
        int cnt = ajaxService.like(num);
        return cnt;
    }
}

 

4. Service

package net.datasa.test_ajax.service;

import jakarta.persistence.EntityManager;
import jakarta.persistence.EntityNotFoundException;
import jakarta.transaction.Transactional;
import lombok.*;
import lombok.extern.slf4j.Slf4j;
import net.datasa.test_ajax.domain.Entity.BoardEntity;
import net.datasa.test_ajax.repository.BoardRepository;
import net.datasa.test_ajax.repository.MemberRepository;
import org.springframework.stereotype.Service;

@Service
@Transactional
@RequiredArgsConstructor
@Slf4j
public class AjaxService {

    private final BoardRepository boardRepository;
    private final MemberRepository memberRepository;

    /**
     * 게시글의 추천수 증가
     * @param num 추천할 글 번호
     * @return    증가된 추천수
     */
    public int like(int num) {
        // 전달된 글 번호로 게시글 정보 조회. 없으면 예외
        BoardEntity boardEntity = boardRepository.findById(num)
                .orElseThrow(() -> new EntityNotFoundException("글 번호 없음"));
        // 리턴받은 엔티티 객체의 추천수를 수정
        int n = boardEntity.getCnt() + 1;
        boardEntity.setCnt(n);
        // 수정된 추천수를 리턴
        return n;
    }
}

 

5. Entity

package net.datasa.test_ajax.domain.Entity;

import jakarta.persistence.*; // JPA 관련 어노테이션을 가져옵니다.
import lombok.*; // Lombok 어노테이션을 가져옵니다.
import org.springframework.data.jpa.domain.support.AuditingEntityListener; // JPA 엔티티 리스너를 가져옵니다.

/**
 * 게시글 엔티티
 */
@Data // Lombok 어노테이션으로, getter, setter, toString, equals, hashCode 메서드를 자동으로 생성
@Builder // Lombok 어노테이션으로, 빌더 패턴을 사용할 수 있게 합니다.
@NoArgsConstructor // Lombok 어노테이션으로, 매개변수가 없는 생성자를 자동으로 생성
@AllArgsConstructor // Lombok 어노테이션으로, 모든 필드를 매개변수로 가지는 생성자를 자동으로 생성
@Entity // JPA 어노테이션으로, 이 클래스가 엔티티임을 나타냄
@Table(name = "ajax_board") // JPA 어노테이션으로, 엔티티와 매핑되는 테이블의 이름을 지정
@EntityListeners(AuditingEntityListener.class) // JPA 어노테이션으로, 엔티티 리스너를 지정하여 생성 및 수정 일자를 자동으로 관리
public class BoardEntity {
    @Id
    @Column(name ="num")
    private Integer num;

    @Column(name ="cnt", columnDefinition = "integer default 0")
    private Integer cnt = 0;
}

 

6. Repository

package net.datasa.test_ajax.repository;

import net.datasa.test_ajax.domain.Entity.BoardEntity;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

/**
 * 게시글 repository
 */
@Repository
public interface BoardRepository extends JpaRepository<BoardEntity, Integer> {
}

 

7. Table

 

저작자표시 비영리 변경금지

'SCIT > 8월' 카테고리의 다른 글

8/17 [SpringBoot & JPA & Ajax Practice]家計簿(1) - 会員登録  (0) 2024.08.17
8/14 [Ajax] Test5. 댓글 저장, 수정, 삭제  (0) 2024.08.14
8/12 [Ajax] Test2. 서버로부터 객체 주고 받기  (0) 2024.08.12
8/9 Spring Test. 성적 입력  (0) 2024.08.12
8/8 [Ajax] Test1(2)  (0) 2024.08.08
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함