반응형
1. 🤍게시판 글 상세 조회 구현
글 조회 컨트롤러 코드 작성
<java />
@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 작성
<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>
글 조회 서비스 코드 작성
<java />
//특정 게시글 불러오기 public Bootboard boardView(Integer id){ return boardRepository.findById(id).get(); }
글 목록에서 제목을 클릭했을 때 상세 조회 화면으로 넘어가도록 boardList.html 수정
<html />
<td> <a th:text="${bootboard.title}" th:href="@{/board/view(id=${bootboard.id})}"></a> </td>
실행해 보면 글 제목에 <a> 태그가 적용되었다. 제목을 클릭하면
게시글 상세 페이지로 이동한다.
2. 🤍게시판 글 삭제 구현
게시글 상세 페이지에 글 삭제 버튼 추가
<html />
<a th:href="@{/board/delete(id=${bootboard.id})}">글 삭제</a>
게시글 삭제 서비스 코드 작성
<java />
//특정 게시글 삭제 public void boardDelete(Integer id){ boardRepository.deleteById(id); }
컨트롤러 코드 작성
<java />
@GetMapping("/board/delete") public String boardDelete(Integer id){ boardService.boardDelete(id); return "redirect:/board/list"; }
삭제 버튼을 클릭하면
글이 삭제됨.
3. 🤍게시판 글 수정 구현
먼저 게시판 글을 수정할 수 있는 화면을 만들어야 한다. 그리고 그 화면에는 DB에 저장된 글 제목, 내용이 담겨있어야 한다.
boardmodify.html 작성
- 여기에서 중요한 점은 th:value이다.
- 기존에는 쿼리스트링을 사용하여 글 상세 조회 시에도 board/boardview?id=1 이런 식으로 조회했는데 이번에는 @PathVariable 어노테이션을 사용하여 좀더 깔끔하게 구현할 것이다.
<html />
<!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 사용
- 기존 글을 가져옴 -> 수정한 내용을 덮어씌움 -> 수정 후 글 목록 화면으로 리다이렉트
<java />
@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"; }
실행해 보면 수정 페이지에 디비에 저장된 글 제목, 내용이 담겨있다.
제목, 내용을 바꾸고 수정 버튼을 누르면
수정 완료!!
4. 🤍글 작성 후 메시지 띄우기 구현
메시지 띄우기 위한 message.html 작성
<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>
메시지를 화면단으로 전달하기 위한 컨트롤러 코드 수정
<java />
@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 |
