SpringBoot+Vue.js - 글 수정/삭제

글 수정/삭제

BoardJpaController

@PutMapping(value = "/{id}")
    public ApiResponse<BoardDTO> putBoard(@PathVariable int id,
                                          @RequestBody BoardDTO boardDTO){

        return boardJpaService.putBoard(id,boardDTO);
    }

    // DB에 데이터를 DELETE 시키지 말고, board 컬럼 중 isDel 을 "Y"로 업데이트.
    @DeleteMapping(value = "/{id}")
    public ApiResponse<BoardDTO> updateIsDelBoardById(@PathVariable int id,
                                                      @RequestBody BoardDTO boardDTO){
        return boardJpaService.updateIsDelBoardById(id,boardDTO);
    }

 

BoardJpaService

public ApiResponse<BoardDTO> putBoard(int id, BoardDTO boardDTO) {

        // 글을 수정할시 작성자가 동일한지 체크
        boolean checkNick = this.checkNick(id,boardRepository,boardDTO);
        if (checkNick){
            Optional<Board> boardData = boardRepository.findBoardById(id);

            // 람다식을 사용하여
            boardData.ifPresent(selectedBoard -> {
                selectedBoard.setSubject(boardDTO.getSubject());
                selectedBoard.setContent(boardDTO.getContent());
                selectedBoard.setWriteDate(LocalDate.now());
                selectedBoard.setWriteTime(LocalTime.now());
                boardRepository.save(selectedBoard);
            });

            Board data = boardData.orElseGet(boardData::get);
            return new ApiResponse(true, data);

        }

        return new ApiResponse(false, "no authority");
    }

    private boolean checkNick(int id, BoardRepository boardRepository, BoardDTO boardDTO) {
        String getNickname = boardDTO.getAuthor();
        String Nickname = boardRepository.getAuthorById(id);
        if (Objects.equals(getNickname, Nickname)){
            return true;
        }else
            return false;
    }

    public ApiResponse<BoardDTO> updateIsDelBoardById(int id, BoardDTO boardDTO) {

        // 글을 삭제할시 작성자가 동일한지 체크
        boolean checkNick = this.checkNick(id,boardRepository,boardDTO);
        if (checkNick){
        // JDK 1.8 Optional에 관해 찾아볼것.
        Optional<Board> boardData = boardRepository.findBoardById(id);
        // 위 boardData가 null 이면 RuntimeException 발생시키고 메소드 종료.
        Board data = boardData.orElseThrow(() -> new RuntimeException("no data"));

        data.setIsDel("Y");
        boardRepository.save(data); // JPA는 INSERT나 update 같이 save()를 호출
        return new ApiResponse(true, "board id " + id + " is successfully deleted");
        }
        return new ApiResponse(false, "no authority");
    }

- checkNick()을 통해 DB에 있는 글의 작성자와 현재 수정/삭제할려는 작성자의 닉네임이 동일한지 체크 후 동일할 경우 true 리턴, 아닐 경우 false 리턴

- true일 경우 글 수정/삭제 성공 , false일 경우 실패메세지 출력

---

BoardUpdate.vue

<template>
  <v-row
    justify="center"
    align="center"
  >
    <v-col
      cols="12"
      sm="8"
      md="6"
    >
      <v-form
        @submit.prevent="onSubmit"
      >
        <v-card>
          <v-card-title class="text-h5">
            글 수정
          </v-card-title>
          <v-card-text>
            <v-text-field
              v-model="subject"
              outlined
              label="제목"
              type="text"
              placeholder="제목"
              required
            />
            <v-textarea
              v-model="content"
              outlined
              label="내용"
              type="text"
              placeholder="내용"
              required
            />
          </v-card-text>
          <v-card-actions>
            <v-spacer />
            <v-btn
              color="secondary"
              type="submit"
              nuxt
            >
              저장
            </v-btn>
            <v-btn
              color="secondary"
              nuxt
              @click="$router.back()"
            >
              취소
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-form>
    </v-col>
  </v-row>
</template>

<script>

export default {
  name: 'NewConsult',
  data: () => ({
    subject : '',
    content : '',
  }),
  computed: {

  },
  methods: {
    onSubmit(){
      let id = this.$route.query.id
      let board = {};
      board.subject = this.subject
      board.content = this.content
      board.author = this.$store.state.userStore.nickname
      this.$axios.put("/boardjpa/" + id, JSON.stringify(board),{
           headers:{
             "Content-Type": `application/json`,
             Authorization : "Bearer "+ this.$store.state.userStore.token
        }
      })
          .then(response=>{
            if(response.data.success === true){
            console.log(response.data);
            alert("게시글을 성공적으로 수정했습니다.");
            this.$router.push('./qna')
            }
            else{
              alert("글을 수정할 권한이 없습니다")
            }
          })
          .catch(e=>{
            console.log(e);
            this.$store.commit('loginCheck', e.response.status)
          })
    }

  }
}
</script>

- 수정할 제목,내용을 작성한 후 userstore에 저장된 닉네임을 함께 전송

- success === true일 경우 글 수정 성공 알림창 출력

- success === false일 경우 글 수정할 권한 없다는 알림창 출력

 

Board.vue(script)

deleteBoard(){
      let id = this.$route.query.id
      let author = this.$store.state.userStore.nickname
      this.$axios.delete("/boardjpa/" + id,{
        headers:{
          Authorization : "Bearer "+ this.$store.state.userStore.token
        },
        data: {
          author : author
        }
      })
        .then(response=>{
          if(response.data.success === true){
            console.log(response.data);
            alert("글이 삭제되었습니다.");
            this.$router.push('./qna')
          }
          else{
            alert("글을 삭제할 권한이 없습니다")
          }
          })
          .catch(e=>{
            console.log(e);
            this.$store.commit('loginCheck', e.response.status)
          })
    },

- 수정할 제목,내용을 작성한 후 userstore에 저장된 닉네임을 함께 전송

- success === true일 경우 글 삭제 성공 알림창 출력

- success === false일 경우 글 삭제할 권한 없다는 알림창 출력