[Vue.js] Today I Learned - 학습 노트 수정

학습 노트 수정

Today I Learned의 학습 노트를 수정할 수 있는 기능을 구현한다.

학습 노트 수정을 위한 페이지 연결

학습 노트 수정은 수정 페이지에서 진행하려고 한다. 따라서 수정 페이지 진입 시 해당 학습 노트의 고유 ID 값을 가지고 진입을 해야하는데 이 과정에서 Dynamic Routing이 사용된다.

<!-- src/components/posts/PostListItem.vue -->
<template>
  <li>
    <div class="post-title">
      {{ postItem.title }}
    </div>
    <div class="post-contents">
      {{ postItem.contents }}
    </div>
    <div class="post-time">
      {{ postItem.createdAt }}
      <!-- 수정 버튼 클릭 시 routeEditPage 함수 호출 -->
      <i class="icon ion-md-create" @click="routeEditPage"></i>
      <i class="icon ion-md-trash" @click="deleteItem"></i>
    </div>
  </li>
</template>

<script>
import { deletePost } from '@/api/posts';

export default {
  props: {
    postItem: {
      type: Object,
      required: true,
    },
  },
  methods: {
    async deleteItem() {
      if (confirm('You want to delete it?')) {
        await deletePost(this.postItem._id);
        this.$emit('refresh');
      }
    },
    routeEditPage() {
      // 수정 페이지로 전환하기 위해 router.push() 사용
      const id = this.postItem._id;
      this.$router.push(`/post/${id}`);
    },
  },
};
</script>

<!-- src/routes/index.js -->
<script>
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

export default new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/login',
    },
    {
      // Dynamic Routing 사용
      // 고유 ID 값 가지고 수정페이지 이동
      path: '/post/:id',
      component: () => import('@/views/PostEditPage.vue'),
    },
    {
      path: '*',
      component: () => import('@/views/NotFoundPage.vue'),
    },
  ],
});
</sciprt>

학습 노트 수정을 위한 특정 게시물 조회

수정을 하기 위해서는 파라미터로 넘어온 고유 ID 값을 가진 기존 데이터를 조회하여 표시하도록 구현해야 한다.

<!-- src/api/posts.js -->
<script>
// 학습 노트 조작과 관련된 CRUD API 함수 파일
import { posts } from './index';

// 학습 노트 데이터 1개를 조회하는 API
function fetchPost(postId) {
  return posts.get(postId);
}

export { fetchPost };
</script>

<!-- src/components/posts/PostEditForm.vue -->
<script>
// 특정 학습 노트 조회 API import
import { fetchPost } from '@/api/posts';

export default {
  data() {
    return {
      title: '',
      contents: '',
      logMessage: '',
    };
  },
  computed: {
    isContentsValid() {
      return this.contents.length <= 200;
    },
  },
  methods: {
    async submitForm() {},
  },
  // 컴포넌트가 생성된 후 실행
  async created() {
    // 파라미터로 넘어온 고유 ID값
    const id = this.$route.params.id;
    // 특정 학습 노트 조회
    const { data } = await fetchPost(id);
    // 조회한 데이터 설정
    this.title = data.title;
    this.contents = data.contents;
  },
};
</script>

학습 노트 수정 기능 구현

조회한 특정 학습 노트 데이터를 수정하는 기능을 구현한다.

<!-- src/api/posts.js -->
<script>
// 학습 노트 조작과 관련된 CRUD API 함수 파일
import { posts } from './index';

// 학습 노트 데이터 1개를 조회하는 API
function fetchPost(postId) {
  return posts.get(postId);
}
// 학습 노트 데이터를 수정하는 API
function editPost(postId, postData) {
  return posts.put(postId, postData);
}

export { fetchPost, editPost };
</script>

<!-- src/components/posts/PostEditForm.vue -->
<script>
// 수정 API 함수 import
import { fetchPost, editPost } from '@/api/posts';

export default {
  data() {
    return {
      title: '',
      contents: '',
      logMessage: '',
    };
  },
  computed: {
    isContentsValid() {
      return this.contents.length <= 200;
    },
  },
  methods: {
    async submitForm() {
      const id = this.$route.params.id;
      try {
        // 수정 API 함수 호출
        await editPost(id, {
          title: this.title,
          contents: this.contents,
        });
        // 수정 완료 시 메인페이지 이동
        this.$router.push('/main');
      } catch (error) {
        console.log(error);
        this.logMessage = error;
      }
    },
  },
  async created() {
    const id = this.$route.params.id;
    const { data } = await fetchPost(id);
    this.title = data.title;
    this.contents = data.contents;
  },
};
</script>