[Springboot] 게시판따라하기(4) - 게시글 삭제·수정 ✔정리

728x90

원본 영상 링크:

https://www.youtube.com/watch?v=Y7S1xXsKy_w&list=PLZzruF3-_clsWF2aULPsUPomgolJ-idGJ&index=8

게시글 삭제

templates > boardview.html

<!--상세페이지1-->
<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>게시글상세페이지</title>
</head>
<body>

<h1 th:text="${testboard.title}">제목입니다</h1>
<p th:text="${testboard.content}">내용이들어갈부분입니다</p>

<!--글삭제1-->
<a href="#">글삭제</a>

</body>
</html>

글삭제 버튼을 만들어주자

Service > BoardService.java

package com.example.demo.service;

import com.example.demo.entity.testboard;
import com.example.demo.repository.BoardRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class BoardService {

    @Autowired //new를 써야하지만, 스프링부트가 알아서 읽어와서 주입을해준다.
    private BoardRepository boardRepository;

    //글작성
    public void write(testboard board){
    boardRepository.save(board);
    }

    //게시글리스트처리
    public List<testboard> boardList(){
        //findAll : 테스트보드라는 클래스가 담긴 List를 반환하는것을 확인할수있다
        return boardRepository.findAll();
    }

    //특정 게시글 불러오기
    public testboard boardview(Integer id){
        return boardRepository.findById(id).get(); //어떤게시글을 불러올지 지정을해주어야한다 (Integer값으로)
    }
    
    //글삭제2
    //특정게시글삭제
    public void boardDelete(Integer id){ /*id값 1번을 넣어주면 1번을 삭제한다*/
        boardRepository.deleteById(id);
    }

}

특정게시글삭제 :
public void boardDelete(Integer id){
boardRepository.deleteById(id);}

controller > BoardController.java

package com.example.demo.contoller;


import com.example.demo.entity.testboard;
import com.example.demo.service.BoardService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/*shift + f10 재실행*/
@Controller
public class BoardContoller {

    @Autowired
    private BoardService boardService;

    @GetMapping("/board/write") //어떤 url로 접근할 것인지 정해주는 어노테이션 //localhost:8080/board/write
    public String boardWriteForm() {
        return "boardwrite";
    }

    @PostMapping("/board/writepro")
    public String boardWritePro(testboard board){

        boardService.write(board);

        return "";
    }

    @GetMapping("/board/list")
    public String boardList(Model model){
        //BoardService에서 만들어준 boardList가 반환되는데, list라는 이름으로 받아서 넘기겠다는 뜻
        model.addAttribute("list" , boardService.boardList()); //4번
        return "boardList";
    }

    @GetMapping("/board/view") //localhost:8080/board/view?id=1 //(get방식 파라미터)
    public String boardView(Model model, Integer id){
        model.addAttribute("testboard", boardService.boardview(id));
        return "boardview";
    }

    //글삭제3
    @GetMapping("/board/delete")
    public String boardDelete(Integer id){

        boardService.boardDelete(id);
        //게시물삭제하고 게시물리스트로 넘어가야하므로
        return "redirect:/board/list";
    }


}

게시물삭제하고 게시물리스트로 넘어가야하므로
return "redirect:/board/list";

templates > boardview.html

<!--상세페이지1-->
<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>게시글상세페이지</title>
</head>
<body>

<h1 th:text="${testboard.title}">제목입니다</h1>
<p th:text="${testboard.content}">내용이들어갈부분입니다</p>

<!--글삭제3-->
<!--id값은 상세페이지마다 다르다-->
<a th:href="@{/board/delete(id=${testboard.id})}">글삭제</a>

</body>
</html>

<a th:href="@{/board/delete(id=${testboard.id})}">글삭제</a>

리스트에 있는 4번을 삭제해보자

상세를 들어가서 글삭제버튼을 누르면

4번글이 삭제된것을확인할수있다

templates > boardview.html

<!--상세페이지1-->
<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>게시글상세페이지</title>
</head>
<body>

<h1 th:text="${testboard.title}">제목입니다</h1>
<p th:text="${testboard.content}">내용이들어갈부분입니다</p>
<a th:href="@{/board/delete(id=${testboard.id})}">글삭제</a>
<!--수정1-->
<a th:href="@{/board/modify/{id}(id = ${testboard.id})}">수정</a>

</body>
</html>

상세에서 수정버튼 추가

controller > BoardController.java

package com.example.demo.contoller;


import com.example.demo.entity.testboard;
import com.example.demo.service.BoardService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/*shift + f10 재실행*/
@Controller
public class BoardContoller {

    @Autowired
    private BoardService boardService;

    @GetMapping("/board/write") //어떤 url로 접근할 것인지 정해주는 어노테이션 //localhost:8080/board/write
    public String boardWriteForm() {
        return "boardwrite";
    }

    @PostMapping("/board/writepro")
    public String boardWritePro(testboard board){

        boardService.write(board);

        return "";
    }

    @GetMapping("/board/list")
    public String boardList(Model model){
        //BoardService에서 만들어준 boardList가 반환되는데, list라는 이름으로 받아서 넘기겠다는 뜻
        model.addAttribute("list" , boardService.boardList()); //4번
        return "boardList";
    }

    @GetMapping("/board/view") //localhost:8080/board/view?id=1 //(get방식 파라미터)
    public String boardView(Model model, Integer id){
        model.addAttribute("testboard", boardService.boardview(id));
        return "boardview";
    }

    @GetMapping("/board/delete")
    public String boardDelete(Integer id){

        boardService.boardDelete(id);
        //게시물삭제하고 게시물리스트로 넘어가야하므로
        return "redirect:/board/list";
    }
    //수정2
    //PathVariable이라는 것은 modify 뒤에있는 {id}부분이 인식이되서 Integer형태의 id로 들어온다는것
    @GetMapping("/board/modify/{id}")
    public String boardModify(@PathVariable("id") Integer id, Model model){

    //수정4    //상세페이지에 있는 내용과, 수정페이지의 내용이 같기때문에 위 코드와 같은 것을 확인할수있다
        model.addAttribute("testboard", boardService.boardview(id));

        return "boardmodify";
    }
    //수정7
    @PostMapping("/board/update/{id}")
    public String boardUpdate(@PathVariable("id") Integer id, testboard board){
        //기존에있던글이 담겨져서온다.
        testboard boardTemp = boardService.boardview(id);

        //기존에있던 내용을 새로운 내용으로 덮어씌운다.
        boardTemp.setTitle(board.getTitle());
        boardTemp.setContent(board.getContent());

        boardService.write(boardTemp); //추가 → 수정한내용을 boardService의 write부분에 넣기
        return "redirect:/board/list";
    }


}

순서대로 입력해보자.

PathVariable이라는 것은 modify 뒤에있는 {id}부분이 인식이되서 Integer형태의 id로 들어온다는것

@GetMapping("/board/modify/{id}")
public String boardModify(@PathVariable("id") Integer id, Model model){
model.addAttribute("testboard", boardService.boardview(id));
return "boardmodify";
}

@PostMapping("/board/update/{id}")
public String boardUpdate(@PathVariable("id") Integer id, testboard board){

기존에있던글이 담겨져서온다.
testboard boardTemp = boardService.boardview(id);

기존에있던 내용을 새로운 내용으로 덮어씌운다.
boardTemp.setTitle(board.getTitle());
boardTemp.setContent(board.getContent());

boardService.write(boardTemp); *안되서 추가 → 수정한내용을 boardService의 write부분에 넣기

return "redirect:/board/list"; }

templates > boardmodify.html

<!--수정3-->
<!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 하위에 있는 input태그 스타일 설정*/
    .layout input{
        width: 100%;
        box-sizing: border-box;
    }
    .layout textarea{
        width: 100%;
        margin-top: 10px;
        min-height: 300px;
    }
</style>

<!--수정5-->
<body>
<div class="layout">
    <!--수정6-->
    <!--id 넘어가도록 설정-->
    <form th:action="@{/board/update/{id}(id=${testboard.id})}" method="post">
        <input name="title" type="text" th:value="${testboard.title}">
        <!--textarea는 value가 아닌 text로-->
        <textarea name="content" th:text="${testboard.content}"></textarea>
        <button type="submit">수정</button>
    </form>
</div>
</body>
</html>

순서대로 입력해보자.

id 넘어가도록 설정
<form th:action="@{/board/update/{id}(id=${testboard.id})}" method="post">
<input name="title" type="text" th:value="${testboard.title}">
*textarea는 value가 아닌 text로
<textarea name="content" th:text="${testboard.content}"></textarea>
<button type="submit">수정</button>
</form>

리스트에 들어가서 수정할 글을 클릭,

내용을 수정하고, list 화면으로 전환되며

수정입력한 글의 내용이 수정된것을 확인할수있다.

728x90

'STUDY > SpringBoot' 카테고리의 다른 글

[StringBoot] Thymeleaf 사용법 정리✔ (0)	2022.08.10
[Springboot] 게시판따라하기(5) - 메세지 띄우기 ✔정리 (0)	2022.08.09
[Springboot] 게시판따라하기(3) - 게시글 상세페이지 ✔정리 (0)	2022.08.09
[Springboot] 게시판따라하기(2) - 게시글 리스트 ✔정리 (0)	2022.08.09
[Springboot] 게시판따라하기(1) - 게시글 작성폼생성·작성처리 ✔정리 (0)	2022.08.09

게시글 삭제

'STUDY > SpringBoot' 카테고리의 다른 글

티스토리툴바