#14 simple blog : front - edit view

simpleblog/front/src/router/index.ts

@@ -2,6 +2,7 @@ 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";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -21,6 +22,12 @@ const router = createRouter({
       name: "read",
       component: ReadView,
       props: true,
+    },
+    {
+      path: "/edit/:postId",
+      name: "edit",
+      component: EditView,
+      props: true,
     }
     // {
     //   path: "/about",

simpleblog/front/src/views/EditView.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import {useRouter} from "vue-router";
+import {ref} from "vue";
+import axios from "axios";
+
+const router = useRouter();
+
+const post = ref({
+  id: 0,
+  title: "",
+  content: "",
+});
+
+const props = defineProps({
+  postId: {
+    type: [Number, String],
+    require: true,
+  },
+});
+
+axios.get(`/api/posts/${props.postId}`).then((response) => {
+  post.value = response.data;
+});
+
+const edit = () => {
+  axios.patch(`/api/posts/${props.postId}`, post.value).then(() => {
+    router.replace({ name: "home"})
+  });
+}
+
+</script>
+
+<template>
+
+  <div>
+    <div>
+      <el-input v-model="post.title" placeholder="제목을 입력해주세요." />
+    </div>
+
+    <div class="mt-2">
+      <el-input v-model="post.content" type="textarea" rows="15" />
+    </div>
+
+    <div class="mt-2">
+      <el-button type="warning" @click="edit()">수정완료</el-button>
+    </div>
+  </div>
+
+</template>
+
+<style>
+
+</style>

simpleblog/front/src/views/ReadView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {onMounted, ref} from "vue";
 import axios from "axios";
+import {useRouter} from "vue-router";
 
 const props = defineProps({
   postId: {
@@ -15,6 +16,12 @@ const post = ref({
   content: "",
 });
 
+const router = useRouter();
+
+const moveToEdit = () => {
+  router.push({ name: "edit", params: { postId: props.postId } })
+}
+
 onMounted(() => {
   axios.get(`/api/posts/${props.postId}`).then((response) => {
     post.value = response.data;
@@ -26,4 +33,6 @@ onMounted(() => {
 <template>
   <h2>{{ post.title }}</h2>
   <div>{{ post.content }}</div>
+
+  <el-button type="warning" @click="moveToEdit()">수정</el-button>
 </template>