글작성할때에 사진이 안들어가고 긴 문장이 안들어가는 오류가 발생했고 Board 클래스의 content부분을 @Column이 아닌 @Lob으로 설정해서 대용량 데이터가 들어갈 수 있게 수정
게시글 작성 후 메인페이지에 글 보이기
타임리프를 사용해서 DB 에있는 모든 Board 객체를 index(메인페이지) 로 불러온다.
@GetMapping("/")
public String index(Model model) {
List<Board> boardList= boardService.takeAll();
model.addAttribute("boardList", boardList);
return "index";
}Model에 모든 Board를 list 형태로 저장해서 html 로넘겨주고 타임리프로 값을 가져온다.
이때 타임리프의 th:each(for문과 비슷)를 사용해서 모든 객체를 불러오고 제목과 작성자를 보여준다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/default_layout}">
<div layout:fragment="content">
<!-- Section-->
<section class="py-5">
<div class="container px-4 px-lg-5 mt-5">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
<!--타임리프적용-->
<tr th:each="board : ${boardList}">
<a th:href="@{/board/detail/{board.id}(board.id=${board.id})}">
<div class="col mb-5">
<div class="card h-100">
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<!---->
<h1 th:text="${board.title}"></h1>
<br><br>
<div>
작성자 :
<td th:text="${board.user.username}"></td>
</div>
<!-- Product price-->
</div>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center">
</div>
</div>
</div>
</div>
</a>
</tr>
</div>
</div>
</section>
</div>게시글 상세보기
게시글 상세보기 기능을 위해서 글의 내용과 작성자를 알아야하기때문에 타임리프사용
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/default_layout}">
<div layout:fragment="content">
<!-- Section-->
<section class="container">
<h1>글 상세보기</h1>
<br>
<button type="button" onclick="location.href ='/board/modifyForm'" class="btn btn-warning">글 수정 </button>
<button type="submit" class="btn btn-danger" id="btn-danger">글 삭제</button>
<br><br>
<div class="form-group">
<h1> 제목 : [[${board.title}]]</h1>
</div>
<br>
<div class="form-group">
<h1> 내용 : </h1>
<div id="content" th:utext="${board.content}"></div>
</div>
</br>
<div class="form-group">
<h1> 작성자 : [[${board.user.username}]]</h1>
</div>
<script>
// 메인화면 페이지 로드 함수
$(document).ready(function () {
$('#summernote').summernote({
height: 400,
maxHeight: 400
});
});
</script>
<script>
$(document).ready(function(){
$("#btn-danger").click(function(){
if(confirm("정말로 글을 삭제하시겠습니까?")){
location.href='/board/delete';
}
});
});
</script>
</section>
</div>게시글 수정 및 삭제
게시글 상세보기 페이지에서 수정과 삭제 버튼을 추가할 것인데 이때 글을 작성한 사람과 현재 로그인한 사용자의 정보가 일치할때만 수정과 삭제가 가능하도록 해야하기때문에 타임리프를 사용해서 작성자와 로그인한 사람이 같은지 비교한다.
컨트롤러 수정
@GetMapping("/board/detail/{boardId}")
public String detailForm(@PathVariable int boardId, Model model, @AuthenticationPrincipal PrincipalDetail principalDetail) {
User loginUser = principalDetail.getUser();
Board board = boardService.findById(boardId);
model.addAttribute("board", board);
model.addAttribute("loginUser", loginUser);
return "/board/detail";
}detail.html 수정
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/default_layout}">
<div layout:fragment="content">
<!-- Section-->
<section class="container">
<h1>글 상세보기</h1>
<br>
<!-- 수정된 부분 -->
<div th:if="${loginUser.id}==${board.user.id}">
<button type="button" onclick="location.href ='/board/modifyForm'" class="btn btn-warning">글 수정 </button>
<button type="submit" class="btn btn-danger" id="btn-danger">글 삭제</button>
</div>
<br><br>
<div class="form-group">
<h1> 제목 : [[${board.title}]]</h1>
</div>
<br>
<div class="form-group">
<h1> 내용 : </h1>
<div id="content" th:utext="${board.content}"></div>
</div>
</br>
<div class="form-group">
<h1> 작성자 : [[${board.user.username}]]</h1>
</div>
<!-- jquery를 사용해서 데이터를 주기위한 input 태그-->
<input id="boardId" type="hidden" th:value="${board.id}">
<script>
// 메인화면 페이지 로드 함수
$(document).ready(function () {
$('#summernote').summernote({
height: 400,
maxHeight: 400
});
});
</script>
<script>
$(document).ready(function(){
let boardId=$("#boardId").val();
$("#btn-danger").click(function(){
if(confirm("정말로 글을 삭제하시겠습니까?")){
location.href='/board/delete/'+boardId;
}
});
});
</script>
</section>
</div>삭제 기능완료
수정 기능 추가
<div th:if="${loginUser.id}==${board.user.id}">
<button type="button" th:onclick="|location.href ='@{/board/modify/${board.id}}'|" class="btn btn-warning">글 수정 </button>
<button type="submit" class="btn btn-danger" id="btn-danger">글 삭제</button>
</div>onclick함수를 사용해서 클릭했을때에 수정하는 페이지로 이동시킬것인데 board의 id 값을 사용해서 location.href 에 넣어주고싶은데 해결하지못함
멋있는 사람 - 일단 하자