댓글및 목록, 수정, 삭제를 할수 있게 코딩했다.
detail.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="layouts/layout.html">
<head>
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<!-- css 링크 코드 -->
<link rel="stylesheet" th:href="@{/css/paging.css}">
</head>
<body>
<div layout:fragment="content">
<div class="container text-center mt-5">
<table class="table center" style="color:black;">
<thead class="thead-dark">
<tr>
<th>NO</th>
<th>제목</th>
<th>작성자</th>
<th>시간</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<tr th:each="board: ${boardList}">
<td th:text="${board.id}"></td>
<td><a th:href="@{|/capoeiraweb/${board.id}|(page=${boardList.number + 1})}" th:text="${board.boardTitle}"></a></td>
<td th:text="${board.boardWriter}"></td>
<td th:text="*{#temporals.format(board.boardCreatedTime, 'yyyy-MM-dd')}"></td>
<td th:text="${board.boardHits}"></td>
</tr>
</tbody>
</table>
</div>
<div class="container text-right mt-5">
<a th:href="${session.loginNickname != null} ? '/capoeiraweb/save' : '/capoeiraweb/login'" class="btn btn-primary">글 작성하기</a>
</div>
<div class="container text-center mt-5">
<!-- 첫번째 페이지로 이동 -->
<!-- /board/paging?page=1 -->
<a th:href="@{/capoeiraweb/paging(page=1)}">First</a>
<!-- 이전 링크 활성화 비활성화 -->
<!-- boardList.getNumber() 사용자:2페이지 getNumber()=1 -->
<a th:href="${boardList.first} ? '#' : @{/capoeiraweb/paging(page=${boardList.number})}">prev</a>
<!-- 페이지 번호 링크(현재 페이지는 숫자만)
for(int page=startPage; page<=endPage; page++)-->
<span th:each="page: ${#numbers.sequence(startPage, endPage)}">
<!-- 현재페이지는 링크 없이 숫자만 -->
<span th:if="${page == boardList.number + 1}" th:text="${page}"></span>
<!-- 현재페이지 번호가 아닌 다른 페이지번호에는 링크를 보여줌 -->
<span th:unless="${page == boardList.number + 1}">
<a th:href="@{/capoeiraweb/paging(page=${page})}" th:text="${page}"></a>
</span>
</span>
<!-- 다음 링크 활성화 비활성화
사용자: 2페이지, getNumber: 1, 3페이지-->
<a th:href="${boardList.last} ? '#' : @{/capoeiraweb/paging(page=${boardList.number + 2})}">next</a>
<!-- 마지막 페이지로 이동 -->
<a th:href="@{/capoeiraweb/paging(page=${boardList.totalPages})}">Last</a>
</div>
</div>
</body>
</html>detail.js 파일
$(document).ready(function() {
// 댓글작성 버튼 클릭 이벤트
$('#comment-write-btn').click(function() {
// 작성자와 내용을 가져옴
const writer = $('#commentWriter').val();
const contents = $('#commentContents').val();
console.log("작성자: ", writer);
console.log("내용: ", contents);
// 게시글 번호 가져옴
const boardId = Number($('#board-id').val());
// 댓글작성 요청 보냄
$.ajax({
type: 'POST',
url: '/comment/save',
data: {
commentWriter: writer,
commentContents: contents,
boardId: boardId
},
success: function(res) {
console.log('요청성공', res);
$('#comment-list').load(' #comment-list > *');
// 작성자와 내용 입력칸 초기화
//$('#commentWriter').val(''); //작성자 입력칸을 초기화하는 js문법
$('#commentContents').val('');
},
error: function(err) {
console.log('요청실패', err);
}
});
});
});
const listReq = () => {
console.log("목록 요청");
const page = Number($('#page').val());
location.href = "/capoeiraweb/paging?page=" + page;
}
const updateReq = () => {
console.log("수정 요청");
const id = Number($('#board-id').val());
location.href = "/capoeiraweb/update/" + id;
}
const deleteReq = () => {
console.log("삭제 요청");
const id = Number($('#board-id').val());
// 세션에서 닉네임 가져오기 05-05수정
const nickname = $("#nickname").val();
if (nickname) {
// 세션에 닉네임이 저장되어 있으면 글삭제 요청 보내기
location.href = "/capoeiraweb/delete/" + id;
console.log("nickname" , nickname);
} else {
// 세션에 닉네임이 저장되어 있지 않으면 메시지 띄우기
alert("로그인이 필요합니다");
location.href = "/capoeiraweb/login";
}
}처음에 외부 js파일을 작성할때 타임리프 언어를 써 에러가 떴지만
<!-- HTML 파일에 Thymeleaf 변수 저장 -->
<input type="hidden" id="board-id" th:value="${board.id}">
<input type="hidden" id="page" th:value="${page}">변수 저장을 하고 언어를 js파일에 맞게 수정하니 정상적으로 작동 했다.
삭제 코드 수정
detail.html 페이지에서 로그인 상관없이 삭제 버튼을 누르게 되면 삭제 되는 부분을 수정
detail.html
<!-- 세션의 닉네임 값 추가 05-05 수정-->
<input type="hidden" id="nickname" th:value="${nickname}">설명 : input 타입으로 hidden으로 주고 th: value=”${nickname}” 는
session에 nickname 값을 가져올 수 있게 했다.
detail.js
const deleteReq = () => {
console.log("삭제 요청"); const id = Number($('#board-id').val());
// 세션에서 닉네임 가져오기 05-05수정
const nickname = $("#nickname").val();
if (nickname) {
// 세션에 닉네임이 저장되어 있으면 글삭제 요청 보내기
location.href = "/capoeiraweb/delete/" + id;
console.log("nickname" , nickname);
}else {
// 세션에 닉네임이 저장되어 있지 않으면 메시지 띄우기
alert("로그인이 필요합니다");
location.href = "/capoeiraweb/login";
}
}설명 : session에 넣은 닉네임 값을 가져와서 if()문으로 조건식에 (nickname) 값을 넣고
location.href = “/capoeiraweb/delete/” + id; 로 session에 닉네임이 있으면 삭제가 되고
else문에는 session에 닉네임 즉 (로그인 X) 없으면 alert 아래 사진 처럼 나오게 한다.
BoardController
//새로 추가 05-05 수정
String nickname = (String)session.getAttribute("loginNickname");
model.addAttribute("nickname", nickname);설명 : nickname을 문자열 형식인 String으로 값을 주고 getAttribute는 최고 조상 인 Object이므로 (String)으로 형변환을 해 주고
MemberController에
session.setAttribute("loginNickname", loginResult.getNickname());loginNickname을 가져와 (”loginNickname”)에 넣어주고
model.addAttribute("nickname", nickname)은 nickname 이라는 이름으로 nickname의 변수의 값을 모델에 추가 하는 코드다. model은 뷰(view)에서 사용할 데이터를 담는 객체로 addAttribute() 메서드를 사용하여 모델에 데이터를 추가 할수 있다. 이렇게 추가된 데이터는 뷰에서 ${nickname} 과 같은 표현식으로 html에서 사용할 수 있다.
비전공 신입 개발자