blog21 : 글 수정 화면 만들기

1. 수정화면을 표현할 뷰 컴포넌트 파일 만들기(EditView.vue)

 

2. 라우터에 등록

// index.ts
import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import WriteView from "../views/WriteView.vue"
import ReadView from "../views/ReadView.vue";
import EditView from "../views/EditView.vue"; //경로를 적어줌으로써 import 필요

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/", //루트 경로라면
      name: "home", //home 뷰를 불러온다.
      component: HomeView,
    },
    {
      path: "/write",
      name: "write",
      component : WriteView //import가 필요하다.
    },
    {
      // path: "/read",
      path: "/read/:postId", //파라미터를 받을 수 있도록 설정 ######
      name: "read",
      component: ReadView,
      props: true, //해당 변수는 ReadView 컴포넌트에서 받을 수 있게 하겠다
    },
    {//수정
      path:"/edit/:postId", //postId를 같이 넘겨준다.
      name: "edit",
      component: EditView,
      props: true
    }
  ],
});

export default router;

 

3. ReadView에 수정 버튼을 만들고 연결해주기

<!-- WriteView.vue -->
<script setup lang="ts">
import {ref} from "vue";
import axios from 'axios'
import {useRouter} from "vue-router";

const title = ref("") //입력받은 값을 저장할 변수 선언
const content = ref("") //입력받은 값을 저장할 변수 선언

const router = useRouter();
const post = ref({
  id: 0,
  title: "",
  content: "",
})

const props = defineProps({
  postId: {
    type: [Number, String],
    require: true
  },
});
//해당 포스트 Id보내서 객체 가져온 뒤 다시 뿌려주기
axios.get(`/api/posts/${props.postId}`).then((response) => {
      post.value = response.data;
});

//수정값 보내기. 그리고 home으로 돌아가기
const edit = () => {
  axios.patch(`/api/posts/${props.postId}`, post.value).then(() => {
    router.replace({name: "home"})
  });
};

</script>

<template>
  <div class="mt-2">
    <el-input v-model="post.title"/>
  </div>

  <div class="mt-2">
     <el-input v-model="post.content" type="textarea" rows="15"></el-input>
  </div>

  <div class="mt-2">
    <el-button type="warning" @click="edit()">수정완료</el-button> <!--눌렀을 때 write() 함수 호출 -->
  </div>

</template>

<style>
</style>

홈에서, "제목 바뀌네1" 을 클릭한다

 

 

제목과 내용이 표시된다. 수정 버튼을 누른다.

 

화면이 로딩되면 처음에는 초기값을 화면에 뿌리고 있다가 axios가 동작하며 값을 가져오면 화면에 다시 표시해준다.

아래와 같이 제목과 내용을 변경한다.

수정완료 버튼을 누른다.

 

 

내용이 수정되고 메인화면으로 이동하였다.

 

 

 

당연히 DB도 바뀌어있다.