SpringBoot로 Web만들기(5)

기존 만들었던 Cafe 프로젝트로 진행하였다.

글 수정, 삭제 및 댓글달기

1.  article.jsp에 적당한 위치에 버튼을 만든다.

<center>
글 번호<div id="code">${response.code}</div>
제목 <div id="title">${response.title}</div>
내용 <div id="content">${response.content }</div>
작성자<div id="writer">${response.writer }</div>

<button type="button" class="btn btn-success">댓글달기</button>
<button type="button" class="btn btn-primary" id="article_update">수정하기</button>
<button type="button" class="btn btn-danger" id="article_delete">삭제하기</button>
<div id="updateDiv"></div>
</center>

2. 해당하는 수정 버튼에 따른 Event를 my.js에 구현한다.

- 수정하기 버튼을 누르면 수정할 수 있는 input 태그가 나오도록 구현하였다.

$("#article_update").click(function(){    	
    	const login = $.cookie('id');    	
    	const id = $("#writer").text();
    	if(login){    		
            if(login===id){
            	var data = "제목<input id='new_title'><br>내용<input id='new_content'><button id='updateBtn' class='btn btn-info'>저장하기</button>";
            	$("#updateDiv").html(data);
            }
            else{
            	alert("본인 글만 수정할 수 있습니다.");
            }
          }else{
            alert("로그인 후 글수정이 가능합니다.");            
          }
    });

3. 그 후 동적으로 생성된 updateBtn을 통해 요청을 넘겨주었다.

$(document).on("click","#updateBtn", function(){
	const content = $("#new_content").val();
	const title = $("#new_title").val();
	const code = $("#code").text();	
	$.post('../board/article/update',{title, content, code},function(data){
		alert(data);
		window.close();
	});

4. BoardController에 update 메소드추가

@PostMapping("article/update")
	public String updateArticle(HttpServletRequest request, BoardVO vo) {
		System.out.println(vo);
		boardService.boardUpdate(vo);
		return "수정되었습니다.";
		
	}

5. BoardService에도 추가

public void boardUpdate(BoardVO vo) {
		boardDAO.boardUpdate(vo);
		
	}

6. BoardDAO에도 추가

public void boardUpdate(BoardVO vo)throws DataAccessException;

 

7. mybatis/mappers/board.xml에도 update 구문 추가

<update id="boardUpdate" parameterType="boardVO">
	UPDATE board SET title = #{title}, content = #{content} WHERE code = #{code}
	</update>

결과확인

 

8. 삭제 기능 구현을 위한 my.js에 이벤트 추가

$("#article_delete").click(function(){    	
    	const login = $.cookie('id');    	
    	const id = $("#writer").text();
    	const num = $("#code").text();
    	if(login){    		
            if(login===id){
            	$.post('../board/article/delete',{num},function(data){
            		alert(data);
            		window.close();
            	});
            }
            else{
            	alert("본인 글만 삭제할 수 있습니다.");
            }
          }else{
            alert("로그인 후 글삭제가 가능합니다.");            
          }
    });

9. Controller에 삭제 메소드 추가

@PostMapping("article/delete")
	public String deleteArticle(HttpServletRequest request) {
		int num = Integer.parseInt(request.getParameter("num"));
		boardService.boardDelete(num);
		return "삭제되었습니다.";
	}

10. BoardService에도 추가

public void boardDelete(int num) {
		boardDAO.boardDelete(num);
		
	}

11. BoardDAO에도 추가

public void boardDelete(int num) throws DataAccessException;

12. board.xml에도 추가

<delete id="boardDelete" parameterType="int">
	DELETE from board WHERE code = #{code}
	</delete>

 

결과 확인

13. 댓글쓰기를 위해 my.js 추가

$("#article_write").click(function(){
    	const login = $.cookie('id');    	
    	if(login){
    		var data = "제목<input id='reply_title'><br>내용<input id='reply_content'><button id='writeBtn' class='btn btn-info'>저장하기</button>";
    		$("#writeDiv").html(data);
    	}
    	else{
    		alert("로그인 후 댓글을 쓸 수 있습니다.");
    	}
    	
    });
    
    $(document).on("click","#writeBtn", function(){
		const content = $("#reply_content").val();
		const title = $("#reply_title").val();
		const originNo = $("#code").text();
		const writer = $.cookie('id');	
		$.post('../board/article/reply',{title, content, originNo, writer},function(data){
			alert(data);
			window.close();
		});

 

14. Controller에 메소드 추가

@PostMapping("article/reply")
	public String replyArticle(HttpServletRequest request, BoardVO vo) {
		boardService.boardReply(vo);
		return "댓글작성 완료";
	}

15. Service에 메소드 추가

public void boardReply(BoardVO vo) {
		boardDAO.boardReply(vo);
		
	}

16. DAO에 메소드 추가

public void boardReply(BoardVO vo) throws DataAccessException;

17. board.xml에 추가

<insert id="insertReply" parameterType="boardVO">
		INSERT INTO board(originNo, title, content, writer, reg_datetime)
		values(#{originNo}, #{title}, #{content}, #{writer}, now())
		<selectKey keyProperty="code" resultType="boardVO" order="AFTER">
			SELECT last_insert_id() code
		</selectKey>
	</insert>

18. 결과 확인