728x90
20221115(화)
- 목차
- 댓글 등록 - 날짜 데이터 수정
- 댓글 목록과 페이징 출력
- jQuery 눈도장 찍어두기
- 댓글 모달창 구현
< 댓글 등록 - 날짜 데이터 수정 >
- Postman에 뜨는 날짜형식 수정
- get.jsp에 자바스크립트 코드 사용
< 댓글 목록과 페이징 출력 >
- get.jsp 코드추가
// 익명함수를 변수로 선언
// replyList : json로 반환된 댓글데이타
// target : 댓글목록이 출력될 위치.
// templateObject : 핸들바 템플릿 참조변수.
let printReplyData = function(replyList, target, templateObject) {
//
let template = Handlebars.compile(templateObject.html());
let replyListHtml = template(replyList); // json데이터와 템플릿이 데이터바인딩식에 의하여 결합된 결과
target.empty();
target.append(replyListHtml);
}
/*
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
*/
let printPaging = function(pageMaker, target) {
let pagingStr = '<nav aria-label="Page navigation example">';
pagingStr += '<ul class="pagination">';
// 이전 1 2 3 4 5 다음 / 이전 6 7 8 9 10 다음
// 이전표시작업
if(pageMaker.prev) {
pagingStr += '<li class="page-item"><a class="page-link" href="' + (pageMaker.startPage-1);
pagingStr += '">Previous</a></li>';
}
// 페이지번호 표시작업
for(let i=pageMaker.startPage; i<=pageMaker.endPage; i++) {
let strClass = (pageMaker.cri.pageNum == i) ? 'active': '';
pagingStr += '<li class="page-item ' + strClass + '"><a class="page-link" href="' + i + '">' + i + '</a></li>';
}
// 다음표시작업
if(pageMaker.next) {
pagingStr += '<li class="page-item"><a class="page-link" href="' + (pageMaker.endPage+1);
pagingStr += '">Next</a></li>';
}
pagingStr += '</ul>';
pagingStr += '</nav>';
target.html(pagingStr);
}
< jQuery 눈도장 찍어두기 >
- 표현양식
$(function() {
// jQuery methods go here...
}); - text(), html() : 일반태그의 내용을 참조
- val() : <form> 태그의 하위태그
- <input>, <select>, <textarea>
jQuery HTML | 예시 | |
jQuery 요소 추가 | append()- 선택한 요소의 끝에 내용 삽입 prepend()- 선택한 요소의 시작 부분에 콘텐츠 삽입 after()- 선택한 요소 뒤에 내용 삽입 before()- 선택한 요소 앞에 콘텐츠 삽입 |
$("p").append("Some appended text."); |
jQuery 요소 제거 | remove()- 선택한 요소(및 하위 요소)를 제거 empty()- 선택한 요소에서 하위 요소를 제거 |
$("#div1").remove(); |
jQuery css() | 선택한 요소에 대해 하나 이상의 스타일 속성 설정 or 반환 | $("p").css({"background-color": "yellow", "font-size": "200%"}); |
jQuery Traversing Traversing (탐색) | ||
jQuery Ancestors 조상 |
parent()메서드는 선택한 요소의 직접 상위 요소를 반환 parents()메서드는 문서의 루트 요소( )까지 선택한 요소의 모든 상위 요소를 반환 parentsUntil()메서드는 주어진 두 인수 사이의 모든 조상 요소를 반환 |
$(document).ready(function(){ $("span").parent(); }); |
jQuery Descendants 자손 |
children()메서드는 선택한 요소의 모든 직계 자식을 반환 find()메서드는 선택한 요소의 하위 요소를 마지막 하위 요소까지 반환 |
$(document).ready(function(){ $("div").children(); }); |
jQuery Siblings 형제 |
siblings()메서드는 선택한 요소의 모든 형제 요소를 반환 | $(document).ready(function(){ $("h2").siblings(); }); |
< 댓글 모달창 구현 >
- get.jsp 코드추가
<script>
$(document).ready(function(){
//댓글 모달대화상자 띄우기
$("#btnReplyWriteModal").on("click", function(){
$("#replyModal").modal('show'); // 부트스트랩4의 메서드
});
//댓글 저장하기
$("#btnReplyWrite").on("click", function(){
let bno = $("#bno").val(); //게시물번호
let replyer = $("#replyer").val(); // 작성자
let reply = $("#reply").val(); // 댓글내용
//JavaScript Object문법. let 객체명 = {이름1:값, 이름2:값, 이름3:값}
let replyObj = {bno:bno, replyer:replyer, reply:reply};
//서버의 스프링의 메서드에 json문자열로 변환하여, 정보를 전송하는 작업.
let replyStr = JSON.stringify(replyObj); // {"bno": 1500, "replyer":"user01", "reply":"댓글내용"}
console.log(replyStr);
$.ajax({
type: 'post',
url: '/replies/new',
headers: {
"Content-Type" : "application/json", "X-HTTP-Method-Override" : "POST"
},
dataType: 'text', // 스프링에서 넘어오는 데이타타입 명시.
data: replyStr, // 서버(스프링)으로 보내는 댓글 데이타
success: function(data) {
if(data == "success") {
alert("댓글 데이타 삽입성공");
getPage(url); // 댓글목록과 페이징정보를 갱신.
}
},
error : function(xhr, status, error) {
alert("댓글 데이타 삽입실패");
}
});
});
//댓글 페이지번호 클릭.
// 동적으로 추가된 태그를 이벤트 설정을 할려면, 아래와 같이 해야 한다.
$("#replyPageStr").on("click", "ul.pagination li.page-item a", function(e) {
e.preventDefault();
replyPage = $(this).attr("href");
url = "/replies/pages/" + bno + "/" + replyPage + ".json";
getPage(url);
});
});
</script>
<!-- 댓글 모달대화상자-->
<div class="modal fade" id="replyModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New Reply</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="replyer" class="col-form-label">Replyer:</label>
<input type="hidden" class="form-control" id="bno" value="${board.bno }">
<input type="text" class="form-control" id="replyer">
</div>
<div class="form-group">
<label for="reply" class="col-form-label">Reply:</label>
<textarea class="form-control" id="reply"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="btnReplyWrite">Save</button>
<button type="button" class="btn btn-primary" id="btnReplyModify">Modify</button>
<button type="button" class="btn btn-primary" id="btnReplyDelete">Delete</button>
</div>
</div>
</div>
</div>
https://getbootstrap.com/docs/4.6/components/modal/
✨ get.jsp실행되면
1. 게시물에 대한 내용을 받아와 화면에 보여주고
2. 코드를 받아와서 게시물에 해당되는 내용과 코드를 해석해서
3. 안에 코드가 댓글 데이터를 또 가져와서 채우기 때문에 시간차를 두고 받아온다.
➡ 댓글 요청이 시간차가 일어난다.
**데이터베이스에 있는 데이터를 가져오는게 함수 안의 작업으로 진행되기 때문에
게시글 내용과 댓글 내용 인출에 시간 차이가 발생한다.
728x90
'🏫 Open API_JAVA' 카테고리의 다른 글
[81일차] 회원가입 페이지 폼 / 추가 작업 / daum 우편번호 api 삽입 / ID 중복체크 / 이메일 인증 (0) | 2022.11.18 |
---|---|
[80일차] 게시판 댓글 수정 및 삭제 구현 (0) | 2022.11.17 |
[78일차] REST 방식 / gson 라이브러리 추가 / 게시판에 댓글 기능 구현 (ex04) (0) | 2022.11.15 |
[77일차] 게시판에 페이징 기능 / 검색 기능 (ex03) (0) | 2022.11.13 |
[76일차] 게시판 기능구현 순서 / 의존성 주입 / 게시물 삭제 기능 구현 / 오라클 인덱스 힌트 (0) | 2022.11.13 |