반응형
🤍게시판 글 상세 조회 구현
글 조회 컨트롤러 코드 작성
@GetMapping("/board/view") //localhost:8080/board/view?id=1
public String boardView(Model model, Integer id){
model.addAttribute("bootboard",boardService.boardView(id));
return "boardview";
}
글 조회 화면 boardview.html 작성
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>게시글 상세 페이지</title>
</head>
<body>
<h1 th:text="${bootboard.title}">제목입니다.</h1>
<p th:text="${bootboard.content}">내용입니다.</p>
<!--
th:href : a태그에 경로 걸 때 사용
th:text : 태그에 문자열을 출력할 때 사용
-->
</body>
</html>
글 조회 서비스 코드 작성
//특정 게시글 불러오기
public Bootboard boardView(Integer id){
return boardRepository.findById(id).get();
}
글 목록에서 제목을 클릭했을 때 상세 조회 화면으로 넘어가도록 boardList.html 수정
<td>
<a th:text="${bootboard.title}" th:href="@{/board/view(id=${bootboard.id})}"></a>
</td>
실행해 보면 글 제목에 <a> 태그가 적용되었다. 제목을 클릭하면
게시글 상세 페이지로 이동한다.
🤍게시판 글 삭제 구현
게시글 상세 페이지에 글 삭제 버튼 추가
<a th:href="@{/board/delete(id=${bootboard.id})}">글 삭제</a>
게시글 삭제 서비스 코드 작성
//특정 게시글 삭제
public void boardDelete(Integer id){
boardRepository.deleteById(id);
}
컨트롤러 코드 작성
@GetMapping("/board/delete")
public String boardDelete(Integer id){
boardService.boardDelete(id);
return "redirect:/board/list";
}
삭제 버튼을 클릭하면
글이 삭제됨.
🤍게시판 글 수정 구현
먼저 게시판 글을 수정할 수 있는 화면을 만들어야 한다. 그리고 그 화면에는 DB에 저장된 글 제목, 내용이 담겨있어야 한다.
boardmodify.html 작성
- 여기에서 중요한 점은 th:value이다.
- 기존에는 쿼리스트링을 사용하여 글 상세 조회 시에도 board/boardview?id=1 이런 식으로 조회했는데 이번에는 @PathVariable 어노테이션을 사용하여 좀더 깔끔하게 구현할 것이다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>게시물 작성폼</title>
</head>
<style>
.layout{
width: 500px;
margin: 0 auto;
margin-top: 40px;
}
.layout textarea{
width: 100%;
margin-top: 10px;
min-height: 300px;
}
.layout input{
width: 100%;
box-sizing: border-box;
}
</style>
<body>
<div class="layout">
<form th:action="@{/board/update/{id}(id=${bootboard.id})}" method="post">
<input name="title" type="text" th:value="${bootboard.title}">
<textarea name="content" th:text="${bootboard.content}"></textarea>
<button type="submit">수정</button>
</form>
</div>
</body>
</html>게시글 수정 컨트롤러 코드 작성
- @PathVariable 사용
- 기존 글을 가져옴 -> 수정한 내용을 덮어씌움 -> 수정 후 글 목록 화면으로 리다이렉트
@PostMapping("/board/update/{id}")
public String boardUpdate(@PathVariable("id") Integer id, Bootboard bootboard, MultipartFile file) throws Exception{
//기존 글을 가져옴
Bootboard boardTemp = boardService.boardView(id);
boardTemp.setTitle(bootboard.getTitle());
boardTemp.setContent(bootboard.getContent());
//수정한 내용 덮어씌움
boardService.write(boardTemp, file);
return "redirect:/board/list";
}
실행해 보면 수정 페이지에 디비에 저장된 글 제목, 내용이 담겨있다.
제목, 내용을 바꾸고 수정 버튼을 누르면
수정 완료!!
🤍글 작성 후 메시지 띄우기 구현
메시지 띄우기 위한 message.html 작성
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script th:inline="javascript">
/*<![CDATA[*/
var message = [[${message}]];
alert(message);
location.replace([[${searchUrl}]]);
/*]]>*/
</script>
<body>
</body>
</html>메시지를 화면단으로 전달하기 위한 컨트롤러 코드 수정
@PostMapping("/board/writepro")
public String boardWritePro(Bootboard bootboard, Model model, MultipartFile file) throws Exception{
boardService.write(bootboard, file);
model.addAttribute("message","글 작성이 완료되었습니다.");
model.addAttribute("searchUrl","/board/list");
return "message";
}
글 작성 후 버튼을 눌러보면
이렇게 메시지 창이 알맞게 잘 나온다.
에러가 계속 나서 글이 3개나 등록됐다..ㅎㅎㅎ오늘도 쉽지 않군...
반응형
'💻 my code archive > 🎨게시판 만들기' 카테고리의 다른 글
| [스프링부트 게시판 만들기] pageable 사용하여 간단한 페이징 처리 구현하기 (0) | 2022.03.13 |
|---|---|
| [스프링부트 게시판 만들기] 파일 업로드 구현하기 (0) | 2022.03.13 |
| [스프링부트 게시판 만들기] 게시글 작성, 게시글 리스트 출력 (0) | 2022.03.13 |
| [스프링부트 게시판 만들기] IntelliJ 프로젝트 생성, MySQL 연동 (0) | 2022.03.13 |
| [STS Spring] 게시판 만들기 -- 05. 글 등록(INSERT), 글 수정(UPDATE), 글 삭제(DELETE), 글 상세 조회(SELECT) (0) | 2022.01.17 |
