게시글 CRUD

게시판 만들기 8 - 게시글 생성, 수정, 삭제(onethejay님)

위 링크 참고하여... 라기에는 반쯤 내맘대로 쓴 것 같다. 마크업은 그대로 썼는데 이거도 달라질 수도 있을 것 같고...

---

라우터는 기존 했던거랑 비슷하게 board 아래의 중첩 라우터로 넣어놨다. write와 edit을 일단 구분은 해 놨는데 나중에 통합할지도 모르겠다. 첨에 라우터부터 나눠서 그래도 수정할 땐 수정할 게시물 번호는 있어야 하지 않나 했는데 어차피 post 객체에서 다 가지고 있는 정보라...

{
      path: '/board',
      component: BoardPage,
      redirect: '/board/list',
      children: [
        {
          path: 'list',
          component: PostListPage
        },
        {
          path: 'post/:idx',
          component: PostDetailPage,
        },
        {
          path: 'edit/:idx',
          component: PostWritePage,
        },
        {
          path: 'write',
          component: PostWritePage,
        }
      ],
    },

BoardWrite.vue는 PostWritePage.vue로 해놨는데 나중에 컴포넌트를 쪼개거나 화면을 합치거나 할 수도 있을 듯 하다. 사실 detail 컴포넌트에서 상태만 체크해주면 읽기 등록 수정을 한 화면에서 모두 처리하는 게 편할 것 같은데...

<template>
  <div class="board-detail">
    <div class="board-contents">
        <input
            type="text"
            class="w3-input w3-border"
            placeholder="제목을 입력해주세요."
            v-model="post.title"
        >
        <input
            type="text"
            class="w3-input w3-border"
            placeholder="작성자를 입력해주세요."
            v-model="post.creatorId"
        >
    </div>
    <div class="board-contents">
        <textarea
            id=""
            cols="30"
            rows="10"
            class="w3-input w3-border"
            style="resize: none;"
            v-model="post.contents"
        >
        </textarea>
    </div>
    <div class="common-buttons">
      <button type="button" class="w3-button w3-round w3-blue-gray" @click="editPost" v-if="post.boardIdx">수정</button>
      <button type="button" class="w3-button w3-round w3-blue-gray" @click="addPost" v-if="!post.boardIdx">등록</button>
      <button type="button" id="button" class="w3-button w3-round w3-gray"><router-link to="/board/list/">목록</router-link></button>
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
import {fetchPost, createPost, updatePost} from '@/api/board';

export default {
  data() {
    return {
      idx: this.$route.params.idx,
      post:{ },
    }
  },
  mounted() {
    this.idx= this.$route.params.idx;
    this.getPost(this.idx);
  },
  methods: {
    async getPost(postIndex) {
        if(_.isNil(postIndex)) return;
        const {data:post} = await fetchPost(postIndex);
        this.initPost(post);
    },
    async addPost() {
        await createPost(this.post);
        this.$router.push('/board/list');
    },
    async editPost() {
        await updatePost(this.post);
        this.$router.push('/board/post/'+this.idx);
    },
    initPost(post) {
        this.post=post;
    },    
  },
}
</script>
<style>
</style>

스타일링도 W3 안쓰고 그냥 css로 나중에 다 처리할까 생각중이다.
로딩 중에 스피너나 예외처리 같은 것도 하긴 해야하는데 일단 다 만들어놓고 모달 컴포넌트 만들고 호출하면 하려고 한다.
백엔드를 실제로 호출하는 함수들도 간단하다.

// @/api/board.js
import { instance } from './index';

function fetchBoard() {
  return instance.get('/board/list');
}

function fetchPost(index) {
  return instance.get('/board/post/'+index);
}

function createPost(post) {
  return instance.post('/board/post', post);
}

function updatePost(post) {
  return instance.patch('/board/post', post);
}

function deletePost(postIndex) {
  return instance.delete('/board/post/'+postIndex);
}

export { fetchBoard, fetchPost, createPost, deletePost, updatePost };

보니까 /board/list를 제외하곤 주소가 거의 같은데 board 관련 axios 객체를 따로 만들어서 관리하는 게 낫나 싶기도 하다. 어차피 지금이야 개쪼끄만한 코드라서 그럴 필요는 없지만.

    async removePost() {
      if (!confirm("삭제하시겠습니까?")) return;
      await deletePost(this.idx);
      alert('삭제되었습니다!'); 
      this.$router.push('/board/list');
    }

삭제하는 함수도 간단하다.

중간에 cors 에러가 나서 좀 당황했는데 관리하는 스프링 컨트롤러에 분명 @CrossOrigin 있는데 왜 그러는지 모르겠다. WebMvcConfiguration 클래스에(근데 검색하니까 좀 다른거만 나오던데 얘도 deprecated 한건지) addCorsMappings에서 allowedOrigins 매핑해주니 되긴 한다.

참고한 링크