JQuery

AJAX : 게시글 삭제하기

Feb 22, 2024
AJAX : 게시글 삭제하기

1. BoardApiController에서 @DeleteMapping("api/boards/{id}") 만들기

  • 아이디 중복체크는 무조건 ajax로 해야 함!
  • 아니면 적은 글이 다 날아감
  • 로직이 실행이 안됨
  • res에 html을 담아준다는 것은 말이 안됨 → index를 리턴하면 망함
package shop.mtcoding.blog.board;

import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RequiredArgsConstructor
@RestController // 데이러틀 리턴
public class BoardApiController {
    private final BoardRepository boardRepository; // DI

    // 삭제하기
    @DeleteMapping("api/boards/{id}") // 보드 중에 몇번을 삭제할게
    public ApiUtil<?> deleteById(@PathVariable Integer id) {
        boardRepository.deleteById(id);
        return  new ApiUtil<>(null); // 삭제는 데이터를 줄 것이 없음
    }

    // 주소 만들기
    @GetMapping("api/boards") // 보드 줘라는 주소, 복수는 보드들 줘, 보드들 중에 1번 줘해서 복수형을 씀
    public ApiUtil<List<Board>> findAll(HttpServletResponse response) {
        //response.setStatus(401);
        List<Board> boardList = boardRepository.selectAll(); // 상태코드랑 메세지랑 같이 줘야함
        return new ApiUtil<>(boardList); // MessageConverter라는 클래스가 오브젝트를 응답할때 자동 발동함
    }
}
 

2. BoardRepository에 deleteById() 만들기

package shop.mtcoding.blog.board;

import jakarta.persistence.EntityManager;
import jakarta.persistence.Query;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@RequiredArgsConstructor
@Repository
public class BoardRepository {
    private final EntityManager em;

    public List<Board> selectAll() {
        Query query = em.createNativeQuery("select * from board_tb order by id desc ", Board.class);
        List<Board> boardList = query.getResultList(); // 못찾으면 빈 컬렉션을 준다 (크기=0)
        return boardList;
    }

    public Board selectOne(int id) {
        Query query = em.createNativeQuery("select * from board_tb where id = ?", Board.class);
        query.setParameter(1, id);

        try {
            Board board = (Board) query.getSingleResult();
            return board;
        } catch (Exception e) {
            return null;
        }
    }

    @Transactional
    public void insert(String title, String content, String author) {
        Query query = em.createNativeQuery("insert into board_tb(title, content, author) values(?, ?, ?)");
        query.setParameter(1, title);
        query.setParameter(2, content);
        query.setParameter(3, author);

        query.executeUpdate();
    }

    @Transactional
    public void deleteById(Integer id) {
        Query query = em.createNativeQuery("delete from board_tb where id = ?");
        query.setParameter(1, id);
        query.executeUpdate(); // insert, update, delete는 커밋이 발동
    }
}
notion image
 

3. BoardApiController에 api/boards/{id}에 null일 때 셋팅하기

package shop.mtcoding.blog.board;

import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RequiredArgsConstructor
@RestController // 데이러틀 리턴
public class BoardApiController {
    private final BoardRepository boardRepository; // DI

    // 삭제하기
    @DeleteMapping("api/boards/{id}") // 보드 중에 몇번을 삭제할게
    public ApiUtil<?> deleteById(@PathVariable Integer id, HttpServletResponse response) {
        Board board = boardRepository.selectOne(id);
        if (board == null) {
            response.setStatus(404);
            return new ApiUtil<>(404, "해당 데이터를 찾을 수 없습니다");
        }
        boardRepository.deleteById(id);
        return new ApiUtil<>(null); // 삭제는 데이터를 줄 것이 없음
    }

    // 주소 만들기
    @GetMapping("api/boards") // 보드 줘라는 주소, 복수는 보드들 줘, 보드들 중에 1번 줘해서 복수형을 씀
    public ApiUtil<List<Board>> findAll(HttpServletResponse response) {
        //response.setStatus(401);
        List<Board> boardList = boardRepository.selectAll(); // 상태코드랑 메세지랑 같이 줘야함
        return new ApiUtil<>(boardList); // MessageConverter라는 클래스가 오브젝트를 응답할때 자동 발동함
    }
}
 

4. index.mustache에 del함수 추가하기

{{> layout/header}}

<div class="container p-5">

    <table class="table table-striped">
        <thead>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>내용</th>
            <th>작성자</th>
            <th></th>
        </tr>
        s
        </thead>
        <tbody id="board-box">

        </tbody>
    </table>

</div>
<script> // 나중에 js 파일을 따로 빼서 링크를 걸게 됨
function del(boardId) {
    $.ajax({
        url: `api/boards/${boardId}`,
        type: "delete"
    }).done((res) => {
        $(`#board-${boardId}`).remove();
    }).fail((res) => {
        alert(res.responseJSON.msg);
    });
}

// 페이지 로드될때 무조건 시작되야 도니까 밖에 있음
$.ajax({
    url: "/api/boards", //서버가 같으면 8080뒤에 있는 주소는 뒤에 것만 적어도 됨
    type: "get" // poset면 컨텐트타입, 데이터가 추가로 들어감
}).done((res) => { // 정상(200)이면 done->바디 데이터
    console.log("통신 성공");
    console.log(res);

    // for(board of boardList){}도 가능하나 stream api를 쓰는 것이 좋음
    let boardList = res.body;
    boardList.forEach((board) => {
        $("#board-box").append(render(board));
    });

}).fail((res) => {
    //console.log(res);
    alert(res.responseJSON.msg);
    // location.herf="/loginForm";
}); // 실패면 다 fail

function render(board) {
    return `<tr id="board-${board.id}">
            <td>${board.id}</td>
            <td>${board.title}</td>
            <td>${board.content}</td>
            <td>${board.author}</td>
            <td>
                <div class="d-flex">
                        <button onclick="del(${board.id})" class="btn btn-danger">삭제</button>
                    <form action="/board/${board.id}/updateForm" method="get">
                        <button class="btn btn-warning">수정</button>
                    </form>
                </div>
            </td>
        </tr>`;
}
</script>

{{> layout/footer}}
notion image
 

5. 삭제 실패시 강제로 F5하기

  • F5 하면서 확인하는게 폴링 기법
{{> layout/header}}

<div class="container p-5">

    <table class="table table-striped">
        <thead>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>내용</th>
            <th>작성자</th>
            <th></th>
        </tr>

        </thead>
        <tbody id="board-box">

        </tbody>
    </table>

</div>

<script> // 나중에 js 파일을 따로 빼서 링크를 걸게 됨
function del(boardId) {
    $.ajax({
        url: `api/boards/${boardId}`,
        type: "delete"
    }).done((res) => {
        $(`#board-${boardId}`).remove();
    }).fail((res) => {
        alert(res.responseJSON.msg);
        location.reload(); // F5 강제로 해주기
    });
}

// 페이지 로드될때 무조건 시작되야 도니까 밖에 있음
$.ajax({
    url: "/api/boards", //서버가 같으면 8080뒤에 있는 주소는 뒤에 것만 적어도 됨
    type: "get" // poset면 컨텐트타입, 데이터가 추가로 들어감
}).done((res) => { // 정상(200)이면 done->바디 데이터
    console.log("통신 성공");
    console.log(res);

    // for(board of boardList){}도 가능하나 stream api를 쓰는 것이 좋음
    let boardList = res.body;
    boardList.forEach((board) => {
        $("#board-box").append(render(board));
    });

}).fail((res) => {
    //console.log(res);
    alert(res.responseJSON.msg);
    // location.herf="/loginForm";
}); // 실패면 다 fail

function render(board) {
    return `<tr id="board-${board.id}">
            <td>${board.id}</td>
            <td>${board.title}</td>
            <td>${board.content}</td>
            <td>${board.author}</td>
            <td>
                <div class="d-flex">
                        <button onclick="del(${board.id})" class="btn btn-danger">삭제</button>
                    <form action="/board/${board.id}/updateForm" method="get">
                        <button class="btn btn-warning">수정</button>
                    </form>
                </div>
            </td>
        </tr>`;
}
</script>

{{> layout/footer}}
notion image
notion image
notion image
notion image
 

6. 푸시 서버(push server)

  • 일반적으로 클라이언트 애플리케이션으로 메시지를 보내는 서버
  • 푸시 알림, 채팅 메시지, 업데이트 알림 등 다양한 형태
  • 주로 모바일 애플리케이션에서 사용
  • 클라이언트 애플리케이션이 서버에 대한 요청 없이도 서버에서 메시지를 받을 수 있게 해줌
Share article

More articles

See more posts

vosw1

RSS·Powered by Inblog