-
회원가입, 로그인, 게시판 백엔드 실습( 게시판 디테일 )Spring 2023. 4. 5. 15:37
게시판 리스트에서 게시글의 제목을 클릭하면 디테일로 이동할 수 있게 만들었다.
: 디테일로 이동하면 하나의 게시글에 대한 상세 정보를 볼 수 있고, 이를 수정 / 삭제할 수 있는 기능을 넣을 것이다.
1. Controller
@Controller public class BoardController { @Autowired BoardService bs; // 게시글 Detail @RequestMapping(value = "/board/detail", method = RequestMethod.GET) public String detail (BoardVO board, Model model) { model.addAttribute("detail", bs.detail(board)); return "board/detail"; } // 게시글 수정 @RequestMapping(value = "/board/modify", method = RequestMethod.POST) public String modify(BoardVO board, RedirectAttributes rttr) { bs.modify(board); System.out.println(board); rttr.addAttribute("board_no", board.getBoard_no()); return "redirect:/board/detail"; } // 게시글 삭제 @RequestMapping(value = "/board/remove", method = RequestMethod.POST) public String remove(BoardVO board) { bs.remove(board); return "redirect:/board/list"; } }
- 게시글을 수정한 후, RedirectAttributes 를 이용해서, board_no= 파라메터로 이동할 수 있게 만들었다.
그래서 수정 후 결과물을 바로 확인할 수 있다.
2. Service , ServiceImpl
public interface BoardService { //글 내용 상세 보기 public BoardVO detail(BoardVO board); // 글 수정 설계 public void modify(BoardVO board); // 글 삭제 설계 public void remove(BoardVO board); }
@Service public class BoardServiceImpl implements BoardService{ @Autowired BoardMapper bm; // 글 디테일 보기 @Transactional public BoardVO detail(BoardVO board) { // 상세 페이지 조회 시 조회수 +1 함수를 넣어주자. bm.cntup(board); return bm.detail(board); } // BoardService에서 설계된 modify 추상 메서드 구현 public void modify(BoardVO board) { bm.modify(board); } // BoardService에서 설계되어진 remove 추상 메서드 구현 public void remove(BoardVO board) { bm.remove(board); } }
- @Transactional : 해당 어노테이션이 붙어있는 함수는 작업을 수행하던 중 하나라도 에러가 발생하면
작업하기 전으로 롤백한다. ( 자동으로 증가하는 increse 카운터도 롤백된다. )
3. Mapper , Mapper.Impl
public interface BoardMapper { // 글의 상세 내용 조회 public BoardVO detail(BoardVO board); // 글의 제목을 클릭한 후 상세내용 조회 public void cntup(BoardVO board); // 글의 내용 수정하는 DB 설계 작업 public void modify(BoardVO board); // 글을 삭제하는 DB 설계작업 public void remove(BoardVO board); }
<select id="detail" resultType="hjm.portfolio.model.BoardVO"> select * from port_board where board_no = #{board_no} </select> <update id="cntup"> update port_board set counts = counts + 1 where board_no = #{board_no} </update> <update id="modify"> update port_board set title=#{title}, contents=#{contents} where board_no=#{board_no} </update> <delete id="remove"> delete from port_board where board_no=#{board_no} </delete>
4. jsp
<form method="post"> <div class="container-fluid px-4"> <h1 class="mt-4"><span class="tohidden">${detail.title}</span><input id="titleinput" type="hidden" name="title" value="${detail.title}"></h1> <div class="card mb-4"> <div> <div> <p style="margin-bottom:2px">${detail.id}<input type="hidden" name="id" value="${detail.id}"></p> <span>${detail.updated_time}<input type="hidden" name="update_time" value="${detail.updated_time}"></span> <span>조회 ${detail.counts}<input type="hidden" name="counts" value="${detail.counts}"></span> <input type="hidden" name="board_no" value="${detail.board_no }"> </div> <div></div> </div> </div> <div class="card mb-4"> <div class="card-header" style="height:5px"> </div> <div class="card-body"> <div class="tohidden">${detail.contents}</div> <textarea id="contentsinput" rows="30" cols="80" style="display:none" name="contents">${detail.contents}</textarea> </div> </div> </div> <c:set var="article_id" value="${detail.id}" /> <c:if test="${article_id eq sessionScope.login}"> <input id="modifybtn" type="button" value="수정"> <input id="removebtn" type="submit" value="삭제" formaction="/board/remove"> </c:if> <input type="hidden" id="modifycomplete" value="수정 완료" formaction="/board/modify"> </form>
<script> const modifybtn = document.getElementById("modifybtn"); const titleinput = document.getElementById("titleinput"); const contentsinput = document.getElementById("contentsinput"); const modifycomplete = document.getElementById("modifycomplete"); const tohidden = document.querySelectorAll(".tohidden"); const removebtn = document.getElementById("removebtn"); modifybtn.addEventListener("click", function() { titleinput.setAttribute("type","text"); contentsinput.style.display = "block"; modifybtn.style.display = "none"; modifycomplete.setAttribute("type", "submit"); removebtn.setAttribute("type","hidden"); for (let i = 0; i < tohidden.length; i++){ tohidden[i].style.display = "none"; } }); </script>
- c:set , c:if 태그를 이용해서 현재 session에 저장된 id와 현재 게시글의 작성자가 동일하다면,
게시글을 수정 / 삭제 할 수 있는 버튼이 나타나도록 코드를 작성했다.
- 자바스크립트를 이용해서 수정 버튼을 클릭 할 시 게시글의 제목과 내용을 변경할 수 있도록 attribute를 변경하게 만들었다.
'Spring' 카테고리의 다른 글
회원가입, 로그인, 게시판 백엔드 실습( 댓글 작성 ) (0) 2023.04.06 Spring의 동기식 / 비동기식 (0) 2023.04.06 회원가입, 로그인, 게시판 백엔드 실습( 게시판 글쓰기 ) (0) 2023.04.05 회원가입, 로그인, 게시판 백엔드 실습( 게시판 리스트 ) (0) 2023.04.05 회원가입, 로그인, 게시판 백엔드 실습( login 기능 구현 ) (0) 2023.04.04