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는 커밋이 발동 } }
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}}
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}}
6. 푸시 서버(push server)
- 일반적으로 클라이언트 애플리케이션으로 메시지를 보내는 서버
- 푸시 알림, 채팅 메시지, 업데이트 알림 등 다양한 형태
- 주로 모바일 애플리케이션에서 사용
- 클라이언트 애플리케이션이 서버에 대한 요청 없이도 서버에서 메시지를 받을 수 있게 해줌
Share article
