From 1d5616633306c0c0cad0914a7c6433988d5c8ea4 Mon Sep 17 00:00:00 2001
From: haerong22 <haerong22@naver.com>
Date: Mon, 1 Aug 2022 00:56:24 +0900
Subject: [PATCH] #14 simple blog : front - read view

---
 simpleblog/front/src/router/index.ts    |  7 ++++++
 simpleblog/front/src/views/HomeView.vue |  7 +++++-
 simpleblog/front/src/views/ReadView.vue | 29 +++++++++++++++++++++++++
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 simpleblog/front/src/views/ReadView.vue

diff --git a/simpleblog/front/src/router/index.ts b/simpleblog/front/src/router/index.ts
index 23508816..9e9c03c2 100644
--- a/simpleblog/front/src/router/index.ts
+++ b/simpleblog/front/src/router/index.ts
@@ -1,6 +1,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";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -14,6 +15,12 @@ const router = createRouter({
       path: "/write",
       name: "write",
       component: WriteView,
+    },
+    {
+      path: "/read/:postId",
+      name: "read",
+      component: ReadView,
+      props: true,
     }
     // {
     //   path: "/about",
diff --git a/simpleblog/front/src/views/HomeView.vue b/simpleblog/front/src/views/HomeView.vue
index a35a6479..cb12382d 100644
--- a/simpleblog/front/src/views/HomeView.vue
+++ b/simpleblog/front/src/views/HomeView.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import axios from "axios";
 import {ref} from "vue";
+import {useRouter} from "vue-router";
+
+const router = useRouter();
 
 const posts = ref([]);
 
@@ -15,7 +18,9 @@ axios.get("/api/posts?page=1&size=5", ).then((response) => {
   <ul>
     <li v-for="post in posts" :key="post.id">
       <div>
-        {{ post.title }}
+        <router-link :to="{ name: 'read', params: { postId: post.id }}">
+          {{ post.title }}
+        </router-link>
       </div>
 
       <div>
diff --git a/simpleblog/front/src/views/ReadView.vue b/simpleblog/front/src/views/ReadView.vue
new file mode 100644
index 00000000..6bae4f65
--- /dev/null
+++ b/simpleblog/front/src/views/ReadView.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {onMounted, ref} from "vue";
+import axios from "axios";
+
+const props = defineProps({
+  postId: {
+    type: [Number, String],
+    require: true,
+  },
+});
+
+const post = ref({
+  id: 0,
+  title: "",
+  content: "",
+});
+
+onMounted(() => {
+  axios.get(`/api/posts/${props.postId}`).then((response) => {
+    post.value = response.data;
+  });
+});
+
+</script>
+
+<template>
+  <h2>{{ post.title }}</h2>
+  <div>{{ post.content }}</div>
+</template>
\ No newline at end of file