728x90
반응형
1) SpringBoot
1-1) 복습 예제
1-1-1) 글 읽기 기능 업데이트 / 글 수정 및 삭제 / 댓글 작성 및 삭제 기능 구현
1-2) 추가 참고사항
1) SpringBoot
1-1) 복습 예제
1-1-1) 글 읽기 기능 업데이트 / 글 수정 및 삭제 / 댓글 작성 및 삭제 기능 구현
(1) [src/main/java] - [net.datasa.web5.controller] 안에 BoardController.java 파일 생성 후 아래와 같이 작성
package net.datasa.web5.controller;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.data.domain.Page;
import org.springframework.security.core.annotation.AuthenticationPrincipal;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import net.datasa.web5.domain.dto.BoardDTO;
import net.datasa.web5.domain.dto.ReplyDTO;
import net.datasa.web5.security.AuthenticatedUser;
import net.datasa.web5.service.BoardService;
/**
* 게시판 관련 Controller
*/
@Slf4j
@RequestMapping("board")
@RequiredArgsConstructor
@Controller
public class BoardController {
private final BoardService boardService;
//application.properties 파일의 게시판 관련 설정값
@Value("${board.pageSize}")
int pageSize;
@Value("${board.linkSize}")
int linkSize;
@Value("${board.uploadPath}")
String uploadPath;
// 메인화면에서 "board/list" 경로를 클릭했을 때 처리하는 메소드
// templates/boardView/list.html 파일로 포워딩
// 로그인 안 한 상태에서 해당 페이지의 "게시판"이라는 제목이 보여야 함
/**
* 게시판 목록을 조회하고 페이징 및 검색 기능을 제공
*
* @param model 모델 객체
* @param page 현재 페이지 (default: 0)
* @param searchType 검색 대상 (default: "")
* @param searchWord 검색어 (default: "")
* @return 글 목록 한 페이지
*/
@GetMapping("list")
public String list(Model model,
@RequestParam(name="page", defaultValue = "1") int page,
@RequestParam(name="searchType", defaultValue = "") String searchType,
@RequestParam(name="searchWord", defaultValue = "") String searchWord) {
log.debug("properties의 값 : pageSize={}, linkSize={}, uploadPath={}",
pageSize, linkSize, uploadPath);
log.debug("요청 파라미터 : page={}, searchType={}, searchWord={}",
page, searchType, searchWord);
// 서비스로 (페이지, 페이지당 글 수, 검색조건, 검색어) 전달하여 결과를 Page 객체로 받음
Page<BoardDTO> boardPage = boardService.getList(page, pageSize, searchType, searchWord);
// Page 객체 내의 정보들
log.debug("목록정보 getContent() : {}", boardPage.getContent());
log.debug("현재페이지 getNumber() : {}", boardPage.getNumber());
log.debug("전체 개수 getTotalElements() : {}", boardPage.getTotalElements());
log.debug("전체 페이지수 getTotalPages() : {}", boardPage.getTotalPages());
log.debug("한페이지당 글 수 getSize() : {}", boardPage.getSize());
log.debug("이전페이지 존재 여부 hasPrevious() : {}", boardPage.hasPrevious());
log.debug("다음페이지 존재 여부 hasNext() : {}", boardPage.hasNext());
// HTML로 포워딩하기 전에 모델에 필요 정보들을 저장
model.addAttribute("boardPage", boardPage);
model.addAttribute("page", page);
model.addAttribute("linkSize", linkSize);
model.addAttribute("searchType", searchType);
model.addAttribute("searchWord", searchWord);
// HTML로 포워딩
return "boardView/list";
/*
// 서비스에서 전체 글 목록 전달받음
List<BoardDTO> boardList = boardService.getList(searchWord);
log.debug("전달된 글 목록 : {}", boardList);
// 글 목록을 모델에 저장하고 HTML로 포워딩하여 출력
model.addAttribute("boardList", boardList);
return "boardView/list";
*/
}
/**
* 글쓰기 폼으로 이동
* @return 글쓰기 폼을 출력하는 HTML 파일
* */
@GetMapping("write")
public String write() {
return "boardView/writeForm";
}
/**
* 글 저장
* @param boardDTO 작성한 글 정보 (제목, 내용)
* @param user 로그인한 사용자 정보
* @return 게시판 글목록 경로
*/
@PostMapping("write")
public String write(@AuthenticationPrincipal AuthenticatedUser user,
@ModelAttribute BoardDTO boardDTO) {
log.debug("전달된 글정보 : {}", boardDTO);
boardDTO.setMemberId(user.getUsername());
log.debug("저장할 글 정보 : {}", boardDTO);
// 서비스로 전달하여 저장
boardService.saveWrite(boardDTO);
return "redirect:list";
}
/**
* 게시글 상세보기
* @param model 모델
* @param boardNum 조회할 글 번호
* @return 게시글 상세보기 HTML 경로
*/
@GetMapping("read")
public String read(@RequestParam("boardNum") int boardNum,
Model model) {
try {
BoardDTO dto = boardService.getBoard(boardNum);
log.debug("선택한 글 정보 : {}", dto);
// 해당 게시글을 모델에 저장하고 HTML로 포워딩하여 출력
model.addAttribute("boardDTO", dto);
return "boardView/readForm";
} catch (Exception e) {
// e.printStackTrace() : 예외가 발생할 시 Console에 에러를 출력해주는 역할을 함
e.printStackTrace();
return "redirect:list";
}
}
/**
* 본인 게시글 삭제
* @param boardNum 삭제할 글 번호
* @param user 로그인한 사용자 정보
* @return 게시판 글 목록 보기 경로
* */
@GetMapping("delete")
public String delete(@RequestParam("boardNum") int boardNum,
@AuthenticationPrincipal AuthenticatedUser user) {
try {
// 삭제할 글 번호와 로그인한 아이디를 서비스로 전달하여 본인 글인 경우에만 삭제
boardService.delete(boardNum, user.getUsername());
} catch (Exception e) {
e.printStackTrace();
}
return "redirect:list";
}
/**
* 게시글 수정 폼으로 이동
* @param boardNum 수정할 글번호
* @param user 로그인한 사용자 정보
* @return 수정폼 HTML
*/
@GetMapping("update")
public String update(@RequestParam("boardNum") int boardNum,
@AuthenticationPrincipal AuthenticatedUser user,
Model model) {
try {
BoardDTO boardDTO = boardService.getBoard(boardNum);
if (!user.getUsername().equals(boardDTO.getMemberId())) {
throw new RuntimeException("수정 권한이 없습니다.");
}
model.addAttribute("board", boardDTO);
return "boardView/updateForm";
}
catch (Exception e) {
e.printStackTrace();
return "redirect:list";
}
}
/**
* 게시글 수정 처리
* @param boardDTO 수정할 글 정보
* @param user 로그인한 사용자 정보
* @return 수정폼 HTML
*/
// update form에서 글 내용 수정하고 "수정" 버튼 누르면 받아서 수정된 글 저장
@PostMapping("update")
public String update(@ModelAttribute BoardDTO boardDTO,
@AuthenticationPrincipal AuthenticatedUser user) {
try {
boardService.update(boardDTO, user.getUsername());
return "redirect:read?boardNum=" + boardDTO.getBoardNum();
}
catch (Exception e) {
e.printStackTrace();
return "redirect:list";
}
}
/**
* 리플 쓰기
* @param replyDTO 저장할 리플 정보
* @param user 로그인 사용자 정보
* @return 게시글 보기 경로로 이동
*/
// read form에서 리플 입력란에 내용 입력 후 "확인" 버튼 누르면 새로 입력한 리플 저장
@PostMapping("rippleWrite")
public String rippleWrite(@ModelAttribute ReplyDTO replyDTO,
@AuthenticationPrincipal AuthenticatedUser user) {
replyDTO.setMemberId(user.getUsername());
boardService.rippleWrite(replyDTO);
return "redirect:read?boardNum=" + replyDTO.getBoardNum();
}
/**
* 리플 삭제
* @param replyDTO 삭제할 리플번호와 본문 글번호
* @param user 로그인한 사용자 정보
* @return 게시글 상세보기 경로
*/
@GetMapping("rippleDelete")
public String rippleDelete(@ModelAttribute ReplyDTO replyDTO,
@AuthenticationPrincipal AuthenticatedUser user) {
try {
log.debug("삭제할 replyDTO : {}", replyDTO);
boardService.rippleDelete(replyDTO.getReplyNum(), user.getUsername());
}
catch (Exception e) {
e.printStackTrace();
}
return "redirect:read?boardNum=" + replyDTO.getBoardNum();
}
}
(2) [src/main/java] - [net.datasa.web5.service] 안에 BoardService.java 파일 생성 후 아래와 같이 작성
package net.datasa.web5.service;
import java.util.ArrayList;
import java.util.List;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;
import jakarta.persistence.EntityNotFoundException;
import jakarta.transaction.Transactional;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import net.datasa.web5.domain.dto.BoardDTO;
import net.datasa.web5.domain.dto.ReplyDTO;
import net.datasa.web5.domain.entity.BoardEntity;
import net.datasa.web5.domain.entity.MemberEntity;
import net.datasa.web5.domain.entity.ReplyEntity;
import net.datasa.web5.repository.BoardRepository;
import net.datasa.web5.repository.MemberRepository;
import net.datasa.web5.repository.ReplyRepository;
/**
* 게시판 관련 서비스
* */
@Slf4j
@RequiredArgsConstructor
@Service
// @Transactional : Commit, Rollback을 감지하는 역할을 하는 Annotation
@Transactional
public class BoardService {
private final BoardRepository boardRepository;
private final MemberRepository memberRepository;
private final ReplyRepository replyRepository;
/**
* 게시판 글 저장
* @param boardDTO 게시판 글 정보
* */
public void saveWrite(BoardDTO boardDTO) {
MemberEntity memberEntity = memberRepository.findById(boardDTO.getMemberId())
.orElseThrow(() -> new EntityNotFoundException("아이디가 없습니다."));
BoardEntity entity = BoardEntity.builder()
// DTO로 전달받은 값들을 Entity에 세팅
// .memberId(boardDTO.getMemberId())
.member(memberEntity)
.title(boardDTO.getTitle())
.contents(boardDTO.getContents())
// 기타 추가 데이터를 Entity에 세팅
.viewCount(0)
.likeCount(0)
.build();
log.debug("저장되는 entity : {}", entity);
// DB에 저장
boardRepository.save(entity);
}
/**
* 검색 결과 글 목록을 지정한 한 페이지 분량의 Page 객체로 리턴
* @param page 현재 페이지
* @param pageSize 페이지당 글 수
* @param searchType 검색조건(제목 검색: title, 본문 검색: contents, 작성자 검색: id)
* @param searchWord 검색어
* @return 게시글 목록 정보
* */
public Page<BoardDTO> getList(int page, int pageSize, String searchType, String searchWord) {
// 조회 조건을 담은 Pageable 객체 생성
// page의 경우, 배열의 인덱스처럼 0부터 시작하기에 1페이지(인덱스로 0페이지에 해당)를 가져오기 위해 "page - 1"로 작성함
Pageable p = PageRequest.of(page - 1, pageSize, Sort.Direction.DESC, "boardNum");
Page<BoardEntity> entityPage;
// repository의 메소드로 Pageable 전달하여 조회. Page 리턴받음.
if (searchType.equals("title")) {
entityPage = boardRepository.findByTitleContaining(searchWord, p);
} else if (searchType.equals("contents")) {
entityPage = boardRepository.findByContentsContaining(searchWord, p);
} else if (searchType.equals("id")) {
entityPage = boardRepository.findByMember_MemberId(searchWord, p);
} else {
entityPage = boardRepository.findAll(p);
}
log.debug("조회된 결과 Entity 페이지 : {}", entityPage.getContent());
// entityPage 객체 내의 Entity들을 DTO 객체로 변환하여 새로운 Page 객체 생성
Page<BoardDTO> dtoPage = entityPage.map(this::convertToDTO);
return dtoPage;
}
/**
* DB에서 조회한 게시글 정보인 BoardEntity 객체를 BoardDTO 객체로 변환
* @param entity 게시글 정보 Entity 객체
* @return 게시글 정보 DTO 개체
*/
private BoardDTO convertToDTO(BoardEntity entity) {
return BoardDTO.builder()
.boardNum(entity.getBoardNum())
.memberId(entity.getMember() != null ? entity.getMember().getMemberId() : null)
.memberName(entity.getMember() != null ? entity.getMember().getMemberName() : null)
.title(entity.getTitle())
.contents(entity.getContents())
.viewCount(entity.getViewCount())
.likeCount(entity.getLikeCount())
.originalName(entity.getOriginalName())
.fileName(entity.getFileName())
.createDate(entity.getCreateDate())
.updateDate(entity.getUpdateDate())
.build();
}
/**
* ReplyEntity객체를 ReplyDTO 객체로 변환
* @param entity 리플 정보 Entity 객체
* @return 리플 정보 DTO 객체
*/
private ReplyDTO convertToReplyDTO(ReplyEntity entity) {
return ReplyDTO.builder()
.replyNum(entity.getReplyNum())
.boardNum(entity.getBoard().getBoardNum())
.memberId(entity.getMember().getMemberId())
.memberName(entity.getMember().getMemberName())
.contents(entity.getContents())
.createDate(entity.getCreateDate())
.build();
}
/**
* 게시글 1개 조회
* @param boardNum 글번호
* @return the BoardDTO 글 정보
* @throws EntityNotFoundException 게시글이 없을 때 예외
*/
// localhost:8888/board/read?boardNum=1
public BoardDTO getBoard(int boardNum) {
BoardEntity entity = boardRepository.findById(boardNum)
.orElseThrow(() -> new EntityNotFoundException("해당 번호의 글이 없습니다."));
entity.setViewCount(entity.getViewCount() + 1);
log.debug("{}번 게시물 조회 결과 : {}", boardNum, entity);
BoardDTO dto = convertToDTO(entity);
List<ReplyDTO> replyDTOList = new ArrayList<ReplyDTO>();
for (ReplyEntity replyEntity : entity.getReplyList()) {
ReplyDTO replyDTO = convertToReplyDTO(replyEntity);
replyDTOList.add(replyDTO);
}
dto.setReplyList(replyDTOList);
return dto;
}
/**
* 게시글 삭제
* @param boardNum 삭제할 글번호
* @param username 로그인한 아이디
*/
public void delete(int boardNum, String username) {
BoardEntity boardEntity = boardRepository.findById(boardNum)
.orElseThrow(() -> new EntityNotFoundException("게시글이 없습니다."));
if (!boardEntity.getMember().getMemberId().equals(username)) {
throw new RuntimeException("삭제 권한이 없습니다.");
}
boardRepository.delete(boardEntity);
}
/**
* 게시글 수정
* @param boardDTO 수정할 글정보
* @param username 로그인한 아이디
*/
public void update(BoardDTO boardDTO, String username) {
BoardEntity boardEntity = boardRepository.findById(boardDTO.getBoardNum())
.orElseThrow(() -> new EntityNotFoundException("게시글이 없습니다."));
if (!boardEntity.getMember().getMemberId().equals(username)) {
throw new RuntimeException("수정 권한이 없습니다.");
}
//전달된 정보 수정
boardEntity.setTitle(boardDTO.getTitle());
boardEntity.setContents(boardDTO.getContents());
}
/**
* 리플 저장
* @param replyDTO 작성한 리플 정보
* @throws EntityNotFoundException 사용자 정보가 없을 때 예외
*/
public void rippleWrite(ReplyDTO replyDTO) {
MemberEntity memberEntity = memberRepository.findById(replyDTO.getMemberId())
.orElseThrow(() -> new EntityNotFoundException("사용자 아이디가 없습니다."));
BoardEntity boardEntity = boardRepository.findById(replyDTO.getBoardNum())
.orElseThrow(() -> new EntityNotFoundException("게시글이 없습니다."));
ReplyEntity entity = ReplyEntity.builder()
.board(boardEntity)
.member(memberEntity)
.contents(replyDTO.getContents())
.build();
log.debug("저장되는 entity : {}", entity);
// DB에 저장
replyRepository.save(entity);
}
/**
* 리플 삭제
* @param replyNum 삭제할 리플 번호
* @param username 로그인한 아이디
*/
public void rippleDelete(Integer replyNum, String username) {
ReplyEntity replyEntity = replyRepository.findById(replyNum)
.orElseThrow(() -> new EntityNotFoundException("리플이 없습니다."));
if (!replyEntity.getMember().getMemberId().equals(username)) {
throw new RuntimeException("삭제 권한이 없습니다.");
}
replyRepository.delete(replyEntity);
}
/**
* 게시판의 글 목록 조회
* @return 글 목록 정보
* */
/*
public List<BoardDTO> getList(String searchWord) {
// BoardRepository의 메소드를 호출하여 게시판의 모든 글 정보를 조회
// Entity의 개수만큼 반복하면서 Entity의 값을 BoardDTO 객체를 생성하여 저장
// 생성된 BoardDTO 객체를 ArrayList에 저장
// 최종 완성된 ArrayList 객체를 리턴함
// Sort : SQL의 order by 구문을 만들어주는 역할
Sort sort = Sort.by(Sort.Direction.DESC, "boardNum");
List<BoardEntity> entityList = boardRepository.findByTitleContaining(searchWord, sort);
// List<BoardEntity> entityList = boardRepository.findTop3ByTitleContainingOrderByBoardNum(searchWord);
// List<BoardEntity> entityList = boardRepository.findAll(sort);
List<BoardDTO> boardDTOList = new ArrayList<>();
// 반복문으로 Entity 객체를 DTO로 변환해서 ArrayList에 저장
for (BoardEntity entity : entityList) {
BoardDTO dto = BoardDTO.builder()
.boardNum(entity.getBoardNum())
.memberId(entity.getMember().getMemberId())
.memberName(entity.getMember().getMemberName())
.title(entity.getTitle())
.viewCount(entity.getViewCount())
.createDate(entity.getCreateDate())
.updateDate(entity.getUpdateDate())
.build();
boardDTOList.add(dto);
}
return boardDTOList;
}
*/
}
(3) [src/main/resources] - [templates.boardView] 안에 list.html 파일 생성 후 아래와 같이 작성
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
<title>게시판</title>
<style>
#listArea {
width: 1000px;
margin: 0 auto;
text-align: center;
}
a {
text-decoration-line: none;
color: black;
}
h1 {
text-align: center;
}
table, th, tr, td {
border: 2px solid black;
border-collapse: collapse;
padding: 10px;
text-align: center;
}
.white {
border: none;
}
.head {
border: none;
}
th {
background-color: grey;
color: white;
}
td {
width: 100px;
}
.title {
width: 300px;
}
.date {
width: 130px;
}
#pageArea {
margin: 30px 0;
}
</style>
<script th:src="@{/js/jquery-3.7.1.min.js}"></script>
<!-- 페이지 이동 스크립트 -->
<script>
function pagingFormSubmit(currentPage) {
$('#page').val(currentPage);
$('#pagingForm').submit();
}
</script>
</head>
<body>
<div id="listArea">
<h1>
<a th:href="@{/board/list}">[ 게시판 ]</a>
</h1>
<!--/*
<div>[[${boardPage.getContent()}]]</div>
<div>[[${boardPage.getTotalElements()}]]</div>
<div>[[${boardPage.getTotalPages()}]]</div>
<div>[[${boardPage.getNumber()}]]</div>
<div>[[${boardPage.getSize()}]]</div>
<div>[[${boardPage.hasPrevious()}]]</div>
<div>[[${boardPage.hasNext()}]]</div>
*/-->
<!-- 글목록 출력 영역 -->
<div id="list">
<table style="border: none;">
<tr class="white">
<td class="white">
전체 <span th:text="${boardPage.totalElements}"></span>
</td>
<td class="white">페이지 <span th:text="${page}"></span> of <span th:text="${boardPage.getTotalPages()}"></span></td>
<td class="white" colspan="4"></td>
<td class="head">
<a sec:authorize="isAuthenticated()" th:href="@{/board/write}">글쓰기</a>
<a th:href="@{/}">HOME</a>
</td>
</tr>
<tr>
<th>번호</th>
<th class="title">제목</th>
<th>작성자 ID</th>
<th>작성자명</th>
<th>조회수</th>
<th class="date">작성일</th>
<th class="date">수정일</th>
</tr>
<tr th:each="board, n : ${boardPage}">
<td th:text="${board.boardNum}"></td>
<td>
<!-- /board/read?boardNum=1 -->
<!--/* <a th:text="${board.title}" th:href="@{/board/read(boardNum=${board.boardNum})}" class="title"></a> */-->
<!-- <a th:text="${board.title}" th:href="|/board/read?boardNum=${board.boardNum}|" class="title"></a> -->
<a th:href="@{/board/read(boardNum=${board.boardNum})}"
th:text="${#strings.length(board.title) > 20 ? #strings.substring(board.title, 0, 20) + '...' : board.title}" class="title">
</a>
</td>
<td th:text="${board.memberId}"></td>
<td th:text="${board.memberName}"></td>
<td th:text="${board.viewCount}"></td>
<!-- LocalDateTime 타입으로 가지고 온 값은 아래와 같이 "temporals.format()"을 써서 형식을 지정해야 함 -->
<td th:text="${#temporals.format(board.createDate, 'yy.MM.dd HH:mm')}" class="date"></td>
<td th:text="${#temporals.format(board.updateDate, 'yy.MM.dd HH:mm')}" class="date"></td>
</tr>
</table>
</div>
<div id="pageArea">
<a
th:if="${boardPage.hasPrevious() and boardPage.getNumber() > 4}"
th:href="|javascript:pagingFormSubmit(${page - 5})|">◁◁</a>
<a
th:if="${boardPage.hasPrevious()}"
th:href="|javascript:pagingFormSubmit(${page - 1})|">◀</a>
<!-- 페이지 이동 링크 -->
<span
th:if="${boardPage.getTotalPages() > 0}"
th:each="counter : ${#numbers.sequence((page - linkSize < 1 ? 1 : page - linkSize), (page + linkSize > boardPage.getTotalPages() ? boardPage.getTotalPages() : page + linkSize))}">
<th:block th:if="${counter == page}"><b></th:block>
<a th:text="${counter}" th:href="|javascript:pagingFormSubmit(${counter})|"></a>
<th:block th:if="${counter == page}"></b></th:block>
</span>
<a
th:if="${boardPage.hasNext()}"
th:href="|javascript:pagingFormSubmit(${page + 1})|">▶</a>
<a
th:if="${boardPage.hasNext() and boardPage.getNumber() < boardPage.getTotalPages() - 5}"
th:href="|javascript:pagingFormSubmit(${page + 5})|">▷▷</a>
</div>
<!-- 검색폼 -->
<div id="searchArea">
<form id="pagingForm" method="get" th:action="@{/board/list}">
<input type="hidden" name="page" id="page" />
<select id="type" name="searchType">
<option value="title" th:selected="${searchType == 'title'}">제목</option>
<option value="contents" th:selected="${searchType == 'contents'}">본문</option>
<option value="id" th:selected="${searchType == 'id'}">작성자ID</option>
</select>
<input type="text" name="searchWord" th:value="${searchWord}">
<input type="button" onclick="pagingFormSubmit(1)" value="검색">
</form>
</div>
</div>
</body>
</html>
(4) [src/main/resources] - [templates.boardView] 안에 readForm.html 파일 생성 후 아래와 같이 작성
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
<title>게시글 읽기</title>
<style>
a {
text-decoration-line: none;
color: black;
font-weight: bold;
}
#readArea {
width: 900px;
margin: 0 auto;
text-align: center;
}
#readForm {
display: flex;
flex-direction: column;
justify-content: center;
}
#formArea {
display: flex;
justify-content: center;
margin-bottom: 50px;
}
#boardRead {
width: 800px;
}
#boardRead, #boardRead tr, #boardRead td {
border: 2px solid black;
border-collapse: collapse;
padding: 10px;
margin: 20px 0 15px 0;
}
th {
width: 100px;
height: 40px;
background-color: grey;
color: white;
}
#boardRead td {
width: 500px;
height: 40px;
text-align: left;
}
#replyForm {
margin: 50px 0;
}
#rippleList {
width: 800px;
margin: 0 auto;
border-left: 2px solid black;
border-collapse: collapse;
}
#rippleList .visible {
border: 2px solid black;
border-collapse: collapse;
}
#rippleList th {
width: 120px;
}
#rippleContents {
width: 470px;
}
#rippleDate {
width: 150px;
}
#rippleDel {
border: none;
}
</style>
<script th:src="@{/js/jquery-3.7.1.min.js}"></script>
<script>
$(document).ready(function() {
//글 삭제
$('#deleteBtn').click(function() {
let boardNum = $(this).data('num');
if (confirm('삭제하시겠습니까?')) {
location.href = 'delete?boardNum=' + boardNum;
}
});
//글 수정
$('#updateBtn').click(function() {
let boardNum = $(this).data('num');
location.href = 'update?boardNum=' + boardNum;
});
//리플 작성
$('#replyForm').submit(function() {
if ($('#contents').val().length < 5) {
alert('리플 내용을 5자 이상으로 입력하세요.');
$('#contents').focus();
$('#contents').select();
return false;
}
return true;
});
});
//리플 삭제
function rippleDelete(replyNum, boardNum) {
if (confirm('삭제하시겠습니까?')) {
location.href = `rippleDelete?replyNum=${replyNum}&boardNum=${boardNum}`;
}
}
</script>
</head>
<body>
<div id="readArea">
<h1>[ 게시글 읽기 ]</h1>
<div id="readForm">
<div id="formArea">
<table id="boardRead">
<tr>
<th>작성자</th>
<td th:text="${boardDTO.memberId}"></td>
</tr>
<tr>
<th>작성일</th>
<td th:text="${#temporals.format(boardDTO.createDate, 'yyyy.MM.dd HH:mm:ss')}"></td>
</tr>
<tr>
<th>조회수</th>
<td th:text="${boardDTO.viewCount}"></td>
</tr>
<tr>
<th>제목</th>
<td th:text="${boardDTO.title}"></td>
</tr>
<tr>
<th>내용</th>
<td th:text="${boardDTO.contents}"></td>
</tr>
<tr>
<th>파일첨부</th>
<td th:text="${boardDTO.fileName}"></td>
</tr>
</table>
</div>
<!-- 글 수정/삭제(본인글일 때만 보임) -->
<div id="btnArea" th:if="${#authentication.name} == ${boardDTO.memberId}">
<input type="button" id="updateBtn" value="수정" th:data-num="${boardDTO.boardNum}">
<input type="button" id="deleteBtn" value="삭제" th:data-num="${boardDTO.boardNum}">
</div>
<!-- 리플 작성 폼(로그인했을 때만 보임) -->
<div id="rippleArea" sec:authorize="isAuthenticated()">
<form th:action="@{/board/rippleWrite}" method="post" id="replyForm">
<span>리플내용 </span>
<input type="text" name="contents" id="contents">
<!-- controller의 rippleWrite 메소드(PostMapping)에 글 번호를 넘겨주기 위해 추가한 내용이다. -->
<input type="hidden" name="boardNum" id="boardNum" th:value="${boardDTO.boardNum}" />
<!-- <button>저장</button> -->
<input type="submit" value="저장" />
</form>
</div>
<!-- 리플 목록 출력(다 보임) -->
<table id="rippleList">
<tr th:each="reply : ${boardDTO.replyList}">
<th th:text="${reply.memberId}" class="visible"></th>
<td th:text="${reply.contents}" id="rippleContents" class="visible"></td>
<td th:text="${#temporals.format(reply.createDate, 'yy.MM.dd HH:mm')}" id="rippleDate" class="visible"></td>
<td th:if="${#authentication.name} == ${reply.memberId}" id="rippleDel">
<a th:href="|javascript:rippleDelete(${reply.replyNum}, ${reply.boardNum})|" id="rippleDelBtn">X</a>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
(5) [src/main/resources] - [templates.boardView] 안에 updateForm.html 파일 생성 후 아래와 같이 작성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글수정</title>
<style>
#updateArea {
width: 900px;
margin: 0 auto;
text-align: center;
}
#updateForm {
display: flex;
flex-direction: column;
justify-content: center;
}
#formArea {
display: flex;
justify-content: center;
}
table, tr, td {
border: 2px solid black;
border-collapse: collapse;
padding: 10px;
margin: 20px 0 15px 0;
}
th {
width: 100px;
background-color: grey;
color: white;
}
td {
width: 300px;
text-align: left;
}
td > .writeContent {
width: 300px;
}
td > textarea {
height: 250px;
}
</style>
<script th:src="@{/js/jquery-3.7.1.min.js}"></script>
<script>
$(document).ready(function() {
$("#writeForm").submit(check);
if ("[[${msg}]]") {
alert("[[${msg}]]");
}
});
function check() {
let title = $("#title").val();
let contents = $("#contents").val();
if (title.length < 7) {
alert("제목은 최소 7자 이상으로 반드시 입력해주세요!!");
$("#title").focus();
$("#title").val('');
return false;
}
if (contents.length < 20) {
alert("내용은 20자 이상으로 반드시 입력해주세요!!");
$("#contents").focus();
$("#contents").val('');
return false;
}
return true;
}
</script>
</head>
<body>
<div id="updateArea">
<h1>[ 글수정 ]</h1>
<form th:action="@{/board/update}" method="post" id="updateForm">
<div id="formArea">
<!-- controller의 update 메소드(PostMapping)에 글 번호를 넘겨주기 위해 추가한 내용이다. -->
<input type="hidden" name="boardNum" id="boardNum" th:value="${board.boardNum}" />
<table>
<tr>
<th>
<label for="title">제목</label>
</th>
<td>
<input type="text" name="title" id="title" th:value="${board.title}" class="writeContent" />
</td>
</tr>
<tr>
<th>
<label for="contents">내용</label>
</th>
<td>
<textarea name="contents" id="contents" class="writeContent">[[${board.contents}]]</textarea>
</td>
</tr>
<tr>
<th>파일첨부</th>
<td>
<input type="file" name="file" id="file" th:value="${board.fileName}" class="writeContent" />
</td>
</tr>
</table>
</div>
<div id="btnArea">
<input type="submit" value="수정" />
</div>
</form>
</div>
</body>
</html>
1-2) 추가 참고사항
[Window] - [Preferences] - [Java] - [Installed JREs] : JDK 제대로 연결되어 있는지 확인하는 루트
[Window] - [Preferences] - [Java] - [Compiler] : Java version이 17버전으로 잘 설정되어 있는지 확인하는 루트
'SpringBoot' 카테고리의 다른 글
| SpringBoot(31) - 복습 예제(파일 첨부 기능에 이미지 미리보기 및 다운로드 기능 추가), Ajax 예제(테스트 예제) (0) | 2024.08.07 |
|---|---|
| SpringBoot(30) - 복습 예제(글 작성 및 수정 파일 첨부 기능 추가) (0) | 2024.08.06 |
| SpringBoot(28) - 복습 예제(글 읽기 기능 업데이트 / 글 수정 및 삭제 / 댓글 작성 및 삭제) (0) | 2024.08.03 |
| SpringBoot(27) - 복습 예제(게시판 글 목록 페이징 / 검색 선택 / 글 읽기) (0) | 2024.08.01 |
| SpringBoot(26) - 복습 예제(게시판 글 목록 보기) (0) | 2024.07.31 |
