[B -2-59] 스프링 시큐리티 6
2019. 10. 12. 06:57ㆍProject B (SPMS)/Project B 파트7
반응형
댓글 삭제
댓글 삭제는 자신이 작성한 댓글만 삭제 가능하게 해야한다.
화면에서는 자바스크립트를 이용해서 모달창의 댓글 작성자 정보와 현재 로그인한 사용자가 같은지 비교해서 같은 경우에만 Ajax로 댓글을 삭제할 수 있게 한다.
만약 자신이 작성한 댓글이 아닌 경우나 로그인하지 않은 경우에는 삭제할 수 없게 제한해야 한다.
views/board
get.jsp
modalRemoveBtn 자바스크립트 함수 처리
...더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec"%>
<%@ include file="../includes/header.jsp"%>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">게시판 조회</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">게시글 조회 페이지</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="form-group">
<label>글 번호</label>
<input class="form-control" name="bno" value='<c:out value="${board.bno }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>작성자</label>
<input class="form-control" name="writer" value='<c:out value="${board.writer }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>제목</label>
<input class="form-control" name="title" value='<c:out value="${board.title }"/>' readonly="readonly">
</div>
<div class="form-group">
<label>내용</label>
<textarea class="form-control" rows="10" name="content" readonly="readonly"><c:out value="${board.content}"/></textarea>
</div>
<sec:authentication property="principal" var="pinfo"/>
<sec:authorize access="isAuthenticated()">
<c:if test="${pinfo.username eq board.writer}">
<button data-oper='modify' class="btn btn-default">수정</button>
</c:if>
</sec:authorize>
<button data-oper='list' class="btn btn-info">목록</button>
<!-- operForm 시작 -->
<form id='operForm' action="/board/modify" method="get">
<input type='hidden' id='bno' name='bno' value='<c:out value="${board.bno}"/>'>
<input type='hidden' name='pageNum' value='<c:out value="${cri.pageNum}"/>'>
<input type='hidden' name='amount' value='<c:out value="${cri.amount}"/>'>
<!-- Criteria의 키워드와 타입에 대한 처리 시작 -->
<input type='hidden' name='keyword' value='<c:out value="${cri.keyword}"/>'>
<input type='hidden' name='type' value='<c:out value="${cri.type}"/>'>
<!-- Criteria의 키워드와 타입에 대한 처리 종료 -->
</form>
<!-- operForm 종료 -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<!-- 댓글 목록 표시 영역 시작 -->
<div class='row'>
<div class="col-lg-12">
<!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-comments fa-fw"></i> 댓글 목록
<sec:authorize access="isAuthenticated()">
<button id='addReplyBtn' class='btn btn-primary btn-xs pull-right'>댓글 작성</button>
</sec:authorize>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<ul class="chat">
</ul>
<!-- ./ end ul -->
</div>
<!-- /.panel .chat-panel -->
<div class="panel-footer"></div>
</div>
</div>
<!-- ./ end row -->
</div>
<!-- 댓글 목록 표시 영역 끝 -->
</div>
<!-- 모달 추가 시작 -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">댓글 등록</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>작성자</label>
<input class="form-control" name='replyer' value='replyer' readonly="readonly">
</div>
<div class="form-group">
<label>내용</label>
<input class="form-control" name='reply' value='New Reply!!!!'>
</div>
<div class="form-group">
<label>일자</label>
<input class="form-control" name='replyDate' value='2018-01-01 13:13'>
</div>
</div>
<div class="modal-footer">
<button id='modalModBtn' type="button" class="btn btn-warning">수정</button>
<button id='modalRemoveBtn' type="button" class="btn btn-danger">삭제</button>
<button id='modalRegisterBtn' type="button" class="btn btn-primary">등록</button>
<button id='modalCloseBtn' type="button" class="btn btn-default">닫기</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- 모달 추가 끝 -->
<script type="text/javascript">
$(document).ready(function() {
var operForm = $("#operForm");
$("button[data-oper='modify']").on("click", function(e){
operForm.attr("action","/board/modify").submit();
});
$("button[data-oper='list']").on("click", function(e){
operForm.find("#bno").remove();
operForm.attr("action","/board/list")
operForm.submit();
});
});
</script>
<script type="text/javascript" src="/resources/js/reply.js"></script>
<!-- 이벤트 처리 시작 -->
<script>
$(document).ready(function () {
var bnoValue = '<c:out value="${board.bno}"/>';
var replyUL = $(".chat");
showList(1);
function showList(page){
console.log("show list " + page);
replyService.getList({bno:bnoValue,page: page|| 1 }, function(replyCnt, list) {
console.log("replyCnt: "+ replyCnt );
console.log("list: " + list);
console.log(list);
if(page == -1){
pageNum = Math.ceil(replyCnt/10.0);
showList(pageNum);
return;
}
var str="";
if(list == null || list.length == 0){
return;
}
for (var i = 0, len = list.length || 0; i < len; i++) {
str += "<li class='left clearfix' data-rno='" + list[i].rno + "'>";
str += " <div>";
str += " <div class='header'>";
str += " <strong class='primary-font'>[" + list[i].rno + "] " + list[i].replyer + "</strong>";
str += " <small class='pull-right text-muted'>" + replyService.displayTime(list[i].replyDate) + "</small>";
str += " </div>";
str += " <p>" + list[i].reply + "</p>";
str += " </div>";
str += "</li>";
}
replyUL.html(str);
showReplyPage(replyCnt);
});//end function
}//end showList
var pageNum = 1;
var replyPageFooter = $(".panel-footer");
function showReplyPage(replyCnt){
var endNum = Math.ceil(pageNum / 10.0) * 10;
var startNum = endNum - 9;
var prev = startNum != 1;
var next = false;
if(endNum * 10 >= replyCnt){
endNum = Math.ceil(replyCnt/10.0);
}
if(endNum * 10 < replyCnt){
next = true;
}
var str = "<ul class='pagination pull-right'>";
if(prev){
str+= "<li class='page-item'><a class='page-link' href='"+(startNum -1)+"'>Previous</a></li>";
}
for(var i = startNum ; i <= endNum; i++){
var active = pageNum == i? "active":"";
str+= "<li class='page-item "+active+" '><a class='page-link' href='"+i+"'>"+i+"</a></li>";
}
if(next){
str+= "<li class='page-item'><a class='page-link' href='"+(endNum + 1)+"'>Next</a></li>";
}
str += "</ul></div>";
console.log(str);
replyPageFooter.html(str);
}
replyPageFooter.on("click","li a", function(e){
e.preventDefault();
console.log("page click");
var targetPageNum = $(this).attr("href");
console.log("targetPageNum: " + targetPageNum);
pageNum = targetPageNum;
showList(pageNum);
});
var modal = $(".modal");
var modalInputReply = modal.find("input[name='reply']");
var modalInputReplyer = modal.find("input[name='replyer']");
var modalInputReplyDate = modal.find("input[name='replyDate']");
var modalModBtn = $("#modalModBtn");
var modalRemoveBtn = $("#modalRemoveBtn");
var modalRegisterBtn = $("#modalRegisterBtn");
var replyer = null;
<sec:authorize access="isAuthenticated()">
replyer = '<sec:authentication property="principal.username"/>';
</sec:authorize>
var csrfHeaderName = "${_csrf.headerName}";
var csrfTokenValue = "${_csrf.token}";
$("#modalCloseBtn").on("click", function(e){
modal.modal('hide');
});
$("#addReplyBtn").on("click", function(e){
modal.find("input").val("");
modal.find("input[name='replyer']").val(replyer);
modalInputReplyDate.closest("div").hide();
modal.find("button[id !='modalCloseBtn']").hide();
modalRegisterBtn.show();
$(".modal").modal("show");
});
//Ajax spring security header..
$(document).ajaxSend(function(e, xhr, options){
xhr.setRequestHeader(csrfHeaderName, csrfTokenValue);
});
modalRegisterBtn.on("click",function(e){
var reply = {
reply: modalInputReply.val(),
replyer:modalInputReplyer.val(),
bno:bnoValue
};
replyService.add(reply, function(result){
alert(result);
modal.find("input").val("");
modal.modal("hide");
showList(1);
//showList(-1); // 댓글 페이지의 마지막 페이지로 이동
});
});
//댓글 조회 클릭 이벤트 처리
$(".chat").on("click", "li", function(e){
var rno = $(this).data("rno");
replyService.get(rno, function(reply){
modalInputReply.val(reply.reply);
modalInputReplyer.val(reply.replyer);
modalInputReplyDate.val(replyService.displayTime(reply.replyDate)).attr("readonly","readonly");
modal.data("rno", reply.rno);
modal.find("button[id !='modalCloseBtn']").hide();
modalModBtn.show();
modalRemoveBtn.show();
$(".modal").modal("show");
});
});
// 댓글 수정 이벤트 처리
modalModBtn.on("click", function(e){
var reply = {
rno:modal.data("rno"),
reply: modalInputReply.val()
};
replyService.update(reply, function(result){
alert(result);
modal.modal("hide");
showList(1);
});
});
// 댓글 삭제 이벤트 처리
modalRemoveBtn.on("click", function (e){
var rno = modal.data("rno");
console.log("RNO: " + rno);
console.log("REPLYER: " + replyer);
if(!replyer){
alert("로그인후 삭제가 가능합니다.");
modal.modal("hide");
return;
}
var originalReplyer = modalInputReplyer.val();
console.log("Original Replyer: " + originalReplyer);
if(replyer != originalReplyer){
alert("자신이 작성한 댓글만 삭제가 가능합니다.");
modal.modal("hide");
return;
}
replyService.remove(rno, originalReplyer, function(result){
alert(result);
modal.modal("hide");
showList(pageNum);
});
});
});
</script>
<!-- 이벤트 처리 끝 -->
<script>
console.log("===============");
console.log("JS TEST");
var bnoValue = '<c:out value="${board.bno}"/>';
/* 댓글 등록 처리 시작 */
/*
// for replyService add test
replyService.add(
{
reply:"JS Test",
replyer:"tester",
bno:bnoValue
},
function(result){
alert("RESULT : " + result);
}
);
*/
/* 댓글 등록 처리 끝 */
/* 댓글 목록 처리 시작 */
/*
replyService.getList({bno:bnoValue, page:1}, function(list){
for(var i = 0, len = list.length||0; i < len; i++ ){
console.log(list[i]);
}
});
*/
/* 댓글 목록 처리 끝 */
/* 댓글 15 번 삭제 처리 시작 */
/*
replyService.remove(15, function(count) {
console.log(count);
if (count === "success") {
alert("REMOVED");
}
}, function(err) {
alert('ERROR...');
});
*/
/* 댓글 삭제 처리 끝 */
/* 14번 댓글 수정 처리 시작 */
/*
replyService.update({
rno : 14,
bno : bnoValue,
reply : "댓글 수정 테스트 완료!"
}, function(result) {
alert("수정 완료...");
});
*/
/* 댓글 수정 처리 끝 */
/* 16번 댓글 조회 처리 시작 */
replyService.get(16, function(data){
console.log('16번 댓글 조회 : ' + data);
});
/* 댓글 조회 처리 끝 */
</script>
<!-- /#page-wrapper -->
<%@ include file="../includes/footer.jsp"%>
기존과 달리 댓글 작성자 항목을 같이 전송해야하므로 코드 수정이 불가피하다.
댓글 삭제 시 기존에는 rno와 같이 댓글 번호만 전송했지만, 원래 댓글 작성자를 같이 전송하도록 수정한다.
webapp/resources/js
reply.js
remove()
...더보기
console.log("Reply Module........");
var replyService = (function() {
function add(reply, callback, error) {
console.log("댓글 추가합니다.");
$.ajax({
type : 'post',
url : '/replies/new',
data : JSON.stringify(reply),
contentType : "application/json; charset=utf-8",
success : function(result, status, xhr) {
if (callback) {
callback(result);
}
},
error : function(xhr, status, er) {
if (error) {
error(er);
}
}
})
}
function getList(param, callback, error) {
var bno = param.bno;
var page = param.page || 1;
$.getJSON("/replies/pages/" + bno + "/" + page + ".json",
function(data) {
if (callback) {
//callback(data); // 댓글 목록만 가져오는 경우
callback(data.replyCnt, data.list); // 댓글 숫자랑 목록을 갖고오는 경우
}
}).fail(function(xhr, status, err) {
if (error) {
error();
}
});
}
function remove(rno, replyer, callback, error) {
console.log("--------------------------------------");
console.log(JSON.stringify({rno:rno, replyer:replyer}));
$.ajax({
type : 'delete',
url : '/replies/' + rno,
data: JSON.stringify({rno:rno, replyer:replyer}),
contentType: "application/json; charset=utf-8",
success : function(deleteResult, status, xhr) {
if (callback) {
callback(deleteResult);
}
},
error : function(xhr, status, er) {
if (error) {
error(er);
}
}
});
}
function update(reply, callback, error) {
console.log("RNO: " + reply.rno);
$.ajax({
type : 'put',
url : '/replies/' + reply.rno,
data : JSON.stringify(reply),
contentType : "application/json; charset=utf-8",
success : function(result, status, xhr) {
if (callback) {
callback(result);
}
},
error : function(xhr, status, er) {
if (error) {
error(er);
}
}
});
}
function get(rno, callback, error) {
$.get("/replies/" + rno + ".json", function(result) {
if (callback) {
callback(result);
}
}).fail(function(xhr, status, err) {
if (error) {
error();
}
});
}
function displayTime(timeValue) {
var today = new Date();
var gap = today.getTime() - timeValue;
var dateObj = new Date(timeValue);
var str = "";
if (gap < (1000 * 60 * 60 * 24)) {
var hh = dateObj.getHours();
var mi = dateObj.getMinutes();
var ss = dateObj.getSeconds();
return [ (hh > 9 ? '' : '0') + hh, ':', (mi > 9 ? '' : '0') + mi,
':', (ss > 9 ? '' : '0') + ss ].join('');
} else {
var yy = dateObj.getFullYear();
var mm = dateObj.getMonth() + 1; // getMonth() is zero-based
var dd = dateObj.getDate();
return [ yy, '/', (mm > 9 ? '' : '0') + mm, '/',
(dd > 9 ? '' : '0') + dd ].join('');
}
}
return {
add : add,
getList : getList,
remove : remove,
update : update,
get : get,
displayTime : displayTime
};
})();
rno와 replyer를 같이 전송하도록 수정한다.
기존과는 다르게 replyer를 추가적으로 파라미터를 지정했고, 데이터 전송 시 JSON 타입으로 전송하도록 변경한다.
src/main/java
com.spms.controller
ReplyController.java
remove()
...더보기
package com.spms.controller;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.security.access.prepost.PreAuthorize;
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.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import com.spms.domain.Criteria;
import com.spms.domain.ReplyPageDTO;
import com.spms.domain.ReplyVO;
import com.spms.service.ReplyService;
import lombok.AllArgsConstructor;
import lombok.extern.log4j.Log4j;
@RequestMapping("/replies/")
@RestController
@Log4j
@AllArgsConstructor
public class ReplyController {
private ReplyService replyService;
@PreAuthorize("isAuthenticated()")
@PostMapping(value = "/new", consumes = "application/json", produces = { MediaType.TEXT_PLAIN_VALUE })
public ResponseEntity<String> create(@RequestBody ReplyVO reply) {
log.info("ReplyVO: " + reply);
int insertCount = replyService.register(reply);
log.info("Reply INSERT COUNT: " + insertCount);
return insertCount == 1 ? new ResponseEntity<>("success", HttpStatus.OK)
: new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
@GetMapping(value = "/pages/{bno}/{page}",
produces = {
MediaType.APPLICATION_XML_VALUE,
MediaType.APPLICATION_JSON_UTF8_VALUE
})
public ResponseEntity<ReplyPageDTO> getList(
@PathVariable("page") int page,
@PathVariable("bno") Long bno) {
log.info("getList.................");
Criteria cri = new Criteria(page,10);
log.info("get Reply List bno : " + bno);
log.info(cri);
return new ResponseEntity<>(replyService.getListPage(cri, bno), HttpStatus.OK);
}
@GetMapping(value = "/{rno}",
produces = { MediaType.APPLICATION_XML_VALUE,
MediaType.APPLICATION_JSON_UTF8_VALUE })
public ResponseEntity<ReplyVO> get(@PathVariable("rno") Long rno) {
log.info("get: " + rno);
return new ResponseEntity<>(replyService.get(rno), HttpStatus.OK);
}
@DeleteMapping(value = "/{rno}", produces = { MediaType.TEXT_PLAIN_VALUE })
@PreAuthorize("principal.username == #reply.replyer")
public ResponseEntity<String> remove(@RequestBody ReplyVO reply, @PathVariable("rno") Long rno) {
log.info("remove : " + rno);
log.info("replyer : " + reply.getReplyer());
return replyService.remove(rno) == 1
? new ResponseEntity<>("success", HttpStatus.OK)
: new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
@RequestMapping(method = { RequestMethod.PUT,
RequestMethod.PATCH
}, value = "/{rno}",
consumes = "application/json",
produces = {
MediaType.TEXT_PLAIN_VALUE
})
public ResponseEntity<String> modify(
@RequestBody ReplyVO reply,
@PathVariable("rno") Long rno) {
reply.setRno(rno);
log.info("rno: " + rno);
log.info("modify: " + reply);
return replyService.modify(reply) == 1
? new ResponseEntity<>("success", HttpStatus.OK)
: new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
}
}
JSON으로 전송되는 데이터를 처리한다.
어노테이션이 추가되고, 파라미터가 @RequestBody가 적용되서 JSON으로 된 데이터를 받게끔 수정됐다.
반응형
'Project B (SPMS) > Project B 파트7' 카테고리의 다른 글
| [B -2-61] 스프링 시큐리티 8 (0) | 2019.10.12 |
|---|---|
| [B -2-60] 스프링 시큐리티 7 (0) | 2019.10.12 |
| [B -2-58] 스프링 시큐리티 5 (0) | 2019.10.12 |
| [B -2-57] 스프링 시큐리티 4 (0) | 2019.10.11 |
| [B -2-56] 스프링 시큐리티 3 (0) | 2019.10.11 |