스프링 (Spring Vue) 게시판 만들기 #14. 글 삭제 구현 (마지막)

CRUD의 마지막인 D(Delete) 삭제를 구현해 보도록 하겠습니다.

글 상세보기에서 수정 옆에 삭제 버튼을 넣어서 해당 게시글을 삭제하도록 구현을 해보겠습니다.

삭제 버튼과 해당 버튼 클릭 시 메서드를 구현 BoardDetail에 구현해줍니다.

75번째 라인을 보면 reload 메소드를 사용해 목록을 리로드 하는 메소드도 사용해 주도록 합니다.

<template>
  <div>
    <!-- 글 상세 보기 내용 -->
    <el-dialog title="글 상세 보기" :visible.sync="openDetail" width="30%" center>
      글 번호 : {{ boardDetail.bno }} <br>
      제목 : {{ boardDetail.title }} <br>
      등록일 : {{ boardDetail.regDate }} <br>
      내용 : {{ boardDetail.content }} <br>
      작성자 : {{ boardDetail.writer }} <br>
      <el-row type="flex" justify="end" style="margin-top:30px;">
        <el-button type="primary" @click="clcikEditButton()">수정</el-button>
        <el-button type="danger" @click="clcikDeleteButton()">삭제</el-button>
      </el-row>
    </el-dialog>
    <regist-board @reload="reload" ref="registPopup"></regist-board>
  </div>
</template>

<script>
import axios from 'axios';
import RegistBoard from './RegistBoard.vue';

export default {
  name: 'BoardDetail',
  components: { RegistBoard },
  data() {
    return {
      openDetail: false,
      boardDetail: [],
    };
  },
  computed: {
    setParams() {
      const params = {
        title: this.title,
        content: this.content,
      };
      return params;
    },
  },
  methods: {
    getBoardDetail(row) {
      const params = {
        bno: row.bno,
      };
      axios
        .post('http://localhost:8080/board/get-board-detail.do', params)
        .then((response) => {
          if (response.data.success) {
            this.boardDetail = response.data.result;
            this.openDetail = true;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    clcikEditButton() {
      this.openDetail = false;
      this.$refs.registPopup.bno = this.boardDetail.bno;
      this.$refs.registPopup.title = this.boardDetail.title;
      this.$refs.registPopup.content = this.boardDetail.content;
      this.$refs.registPopup.editMode = true;
      this.$refs.registPopup.openPopup = true;
    },
    clcikDeleteButton () {
      const params = {
        bno: this.boardDetail.bno,
      };
      axios
        .post('http://localhost:8080/board/delete-board.do', params)
        .then((response) => {
          if (response.data.success) {
            this.openDetail = false;
            this.reload();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    reload() {
      // 목록을 재로딩을 위해 이벤트 emit
      this.$emit('reload');
    }
  },
};
</script>

<style scoped></style>

Controller와 Service 코드도 작성해 주도록 합니다.

package com.dream.controller;

import java.util.Map;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.dream.service.BoardService;
import com.dream.vo.BoardVO;
import com.dream.vo.ResultVO;

@CrossOrigin(origins = "*")
@Controller
@RequestMapping("board/")
public class BoardController {

    private static final Logger LOG = LoggerFactory.getLogger(BoardController.class);

    @Autowired
    BoardService service;

    @ResponseBody
    @RequestMapping(value = "get-board-list.do", method = RequestMethod.GET)
    public ResultVO getBoardList() 
    {    
        // 호출 시 찍히게 될 로그
        LOG.info("[GET] getBoardList");
        // 결과 값을 담을 ResultVO를 선언한 생성자를 통해서 만드는데 기본값은 success는 false, result는 null로 세팅
        ResultVO result = new ResultVO(false, null);

        try {
            result.setResult(service.getBoardList());
            result.setSuccess(true);
        } catch (Exception e) {
            // TODO: handle exception
            LOG.error("[Board] getBoardList : " + e.getMessage(), e);
        }

        return result;

    }
    
    @ResponseBody
    @RequestMapping(value = "regist-board.do", method = RequestMethod.POST)
    public ResultVO registBoard(@RequestBody BoardVO vo) 
    {    
        // 호출 시 찍히게 될 로그
        LOG.info("[POST] registBoard");
        // 결과 값을 담을 ResultVO를 선언한 생성자를 통해서 만드는데 기본값은 success는 false, result는 null로 세팅
        ResultVO result = new ResultVO(false, null);

        try {
            result.setResult(service.registBoard(vo));
            result.setSuccess(true);
        } catch (Exception e) {
            // TODO: handle exception
            LOG.error("[Board] getBoardList : " + e.getMessage(), e);
        }

        return result;

    }
    
    @ResponseBody
    @RequestMapping(value = "get-board-detail.do", method = RequestMethod.POST)
    public ResultVO getBoardDetail(@RequestBody BoardVO vo) 
    {    
        // 호출 시 찍히게 될 로그
        LOG.info("[POST] getBoardDetail");
        // 결과 값을 담을 ResultVO를 선언한 생성자를 통해서 만드는데 기본값은 success는 false, result는 null로 세팅
        ResultVO result = new ResultVO(false, null);

        try {
            result.setResult(service.getBoardDetail(vo));
            result.setSuccess(true);
        } catch (Exception e) {
            // TODO: handle exception
            LOG.error("[Board] getBoardDetail : " + e.getMessage(), e);
        }

        return result;

    }
    
    @ResponseBody
    @RequestMapping(value = "edit-board.do", method = RequestMethod.POST)
    public ResultVO editBoard(@RequestBody BoardVO vo) 
    {    
        // 호출 시 찍히게 될 로그
        LOG.info("[POST] editBoard");
        // 결과 값을 담을 ResultVO를 선언한 생성자를 통해서 만드는데 기본값은 success는 false, result는 null로 세팅
        ResultVO result = new ResultVO(false, null);

        try {
            result.setResult(service.editBoard(vo));
            result.setSuccess(true);
        } catch (Exception e) {
            // TODO: handle exception
            LOG.error("[Board] editBoard : " + e.getMessage(), e);
        }

        return result;

    }
    
    @ResponseBody
    @RequestMapping(value = "delete-board.do", method = RequestMethod.POST)
    public ResultVO deleteBoard(@RequestBody BoardVO vo) 
    {    
        // 호출 시 찍히게 될 로그
        LOG.info("[POST] deleteBoard");
        // 결과 값을 담을 ResultVO를 선언한 생성자를 통해서 만드는데 기본값은 success는 false, result는 null로 세팅
        ResultVO result = new ResultVO(false, null);

        try {
            result.setResult(service.deleteBoard(vo));
            result.setSuccess(true);
        } catch (Exception e) {
            // TODO: handle exception
            LOG.error("[Board] deleteBoard : " + e.getMessage(), e);
        }

        return result;

    }
}

package com.dream.service;

import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import java.util.Map;

import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.dream.mapper.BoardMapper;
import com.dream.vo.BoardVO;

@Service
public class BoardService implements BoardServiceIF {

    @Autowired
    private SqlSessionFactory sqlSessionFactory;

    @Override
    public List<BoardVO> getBoardList() {
        // TODO Auto-generated method stub
        List<BoardVO> boardList = new ArrayList<BoardVO>();

        try (SqlSession session = sqlSessionFactory.openSession()) {
            BoardMapper mapper = session.getMapper(BoardMapper.class);

            boardList = mapper.getBoardList();
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
        return boardList;
    }

    public Boolean registBoard(BoardVO vo) {
        // TODO Auto-generated method stub
        
        vo.setRegDate(new Date());
        vo.setWriter("user");
        
        boolean result = false;
        
        try (SqlSession session = sqlSessionFactory.openSession()) {
            BoardMapper mapper = session.getMapper(BoardMapper.class);

            // 매퍼의 결과를 담을 변수
            int mapperResult = 0;
            
            // 성공시 1이 반환됩니다.
            mapperResult = mapper.registBoard(vo);
            
            //정상 동작시 return 값을 true
            if (mapperResult > 0) {
                result = true;
            }
            //정상 동작이 아닐 시 return 값을 false
            else {
                result = false;
            }
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
    
        return result;
    }

    public BoardVO getBoardDetail(BoardVO vo) {
        // TODO Auto-generated method stub
        BoardVO board = new BoardVO();

        try (SqlSession session = sqlSessionFactory.openSession()) {
            BoardMapper mapper = session.getMapper(BoardMapper.class);

            board = mapper.getBoardDetail(vo.getBno());
            
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
        return board;
    }

    public Object editBoard(BoardVO vo) {
        
        vo.setRegDate(new Date());
        vo.setWriter("user");
        
        boolean result = false;
        
        try (SqlSession session = sqlSessionFactory.openSession()) {
            BoardMapper mapper = session.getMapper(BoardMapper.class);

            // 매퍼의 결과를 담을 변수
            int mapperResult = 0;
            
            // 성공시 1이 반환됩니다.
            mapperResult = mapper.editBoard(vo);
            
            //정상 동작시 return 값을 true
            if (mapperResult > 0) {
                result = true;
            }
            //정상 동작이 아닐 시 return 값을 false
            else {
                result = false;
            }
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
    
        return result;
    }

    public Object deleteBoard(BoardVO vo) {
        // TODO Auto-generated method stub
        boolean result = false;
        
        try (SqlSession session = sqlSessionFactory.openSession()) {
            BoardMapper mapper = session.getMapper(BoardMapper.class);

            // 매퍼의 결과를 담을 변수
            int mapperResult = 0;
            
            // 성공시 1이 반환됩니다.
            mapperResult = mapper.deleteBoard(vo);
            
            //정상 동작시 return 값을 true
            if (mapperResult > 0) {
                result = true;
            }
            //정상 동작이 아닐 시 return 값을 false
            else {
                result = false;
            }
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }
    
        return result;
    }
}

mybatis에서 삭제를 구현하는 메소드와 그에 일치하는 메소드도 작성해 주도록 합니다.

package com.dream.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;

import com.dream.vo.BoardVO;

@Mapper
public interface BoardMapper {

    public List<BoardVO> getBoardList();

    public int registBoard(BoardVO vo);

    public BoardVO getBoardDetail(int bno);
    
    public int editBoard(BoardVO vo);

    public int deleteBoard(BoardVO vo);
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.dream.mapper.BoardMapper">
 
    <resultMap type="com.dream.vo.BoardVO" id="boardMap">
        <id property="bno" column="bno"></id>
        <result property="title" column="title"/>
        <result property="content" column="content"/>
        <result property="writer" column="writer"/>
        <result property="regDate" column="regDate"/>
    </resultMap>
    
    <select id="getBoardList" resultMap="boardMap">
        SELECT * FROM BOARD
    </select>
    
    <insert id="registBoard">
        INSERT INTO BOARD
            (title, content, writer, regDate)
            VALUES (#{title}, #{content}, #{writer}, #{regDate})
    </insert>
    
    <select id="getBoardDetail" resultMap="boardMap">
        SELECT * FROM BOARD WHERE bno = #{bno}
    </select>
    
    <update id="editBoard">
        UPDATE BOARD 
            SET title = #{title}, content = #{content}, writer = #{writer}, regDate = #{regDate}
            WHERE BNO = #{bno}
    </update>
    
    <delete id="deleteBoard">
        DELETE FROM BOARD 
        WHERE BNO = #{bno}
    </delete>
 
</mapper>

그럼 삭제 버튼을 눌러 삭제가 잘 되는지 확인해 보겠습니다.

이렇게 Vue Spring을 통한 게시글 작성 포스팅은 여기까지 작성하도록 하겠습니다.

처음 작성해보는 포스팅 시리즈라 부족한 부분들이 너무 많았습니다...

한 개의 단위 단위를 코드로 작성하고 그 흐름을 포스팅해서 포스팅에 집중하느라 코드에는 치중되는 부분들이 많이 무뎌져서 코드의 퀄리티가 조금 낮아 아쉬움이 남는 부분들이 많습니다.

다른 포스팅 연재 게시글들을 올리고 싶은 것들이 아직 많이 있어서 어떤 것을 작성해야 할 지 고민하고 다음 포스팅 시리즈에서 뵙겠습니다.

프로젝트의 소스코드는 아래의 깃허브에서 확인 할 수 있습니다.

https://github.com/skarbgud/Board-Project

GitHub - skarbgud/Board-Project: 스프링 Vue 게시판 만들기 (티스토리 블로그 레포지토리)

스프링 Vue 게시판 만들기 (티스토리 블로그 레포지토리). Contribute to skarbgud/Board-Project development by creating an account on GitHub.

github.com

저작자표시

'Spring > 게시판 만들기' 카테고리의 다른 글

스프링 (Spring Vue) 게시판 만들기 #13. 글 수정 구현 (0)	2021.12.13
스프링 (Spring Vue) 게시판 만들기 #12. 글 상세보기 구현 (0)	2021.11.29
스프링 (Spring Vue) 게시판 만들기 #11. 글등록 한글 오류 및 등록 후 목록 리로드 (0)	2021.11.28

'Spring > 게시판 만들기' 카테고리의 다른 글

검색 태그

티스토리툴바