[MAJ] Routing - Système de blog

p3-dev_pro_composants_vue_cli/src/Routes.js

@@ -1,11 +1,11 @@
 import Accueil from "./components/Accueil";
-import Page1 from "./components/Page1";
+import Articles from "./components/Articles";
 import Page2 from "./components/Page2";
 import Post from "./components/Post";
 
 export default [
   { path: "/", component: Accueil },
-  { path: "/page1", component: Page1 },
+  { path: "/blogposts", component: Articles },
   { path: "/page2", component: Page2 },
-  { path: "/blogpost/:id", component: Post },
+  { path: "/blogposts/:id", component: Post },
 ];

p3-dev_pro_composants_vue_cli/src/components/Articles.vue

@@ -0,0 +1,71 @@
+<template>
+  <main class="container-fluid">
+
+
+    <div class="row">
+      <div class="col text-center">
+        <h1>Les articles de blog !</h1>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col">
+
+        <ul class="list-group list-group-flush">
+          <li
+            v-for="(article, index) in allArticles"
+            :key="index"
+            class="list-group-item list-group-item-action"
+          >
+            <router-link :to="`/blogposts/${index + 1}`">
+
+              <div class="card">
+                <div class="card-body">
+                  {{ article.title }}
+                </div>
+              </div>
+
+            </router-link>
+
+          </li>
+        </ul>
+
+      </div>
+    </div>
+
+
+  </main>
+</template>
+
+<script>
+  import axios from "axios";
+
+  export default {
+    name: "Articles",
+    data() {
+      return {
+        allArticles: [],
+      };
+    },
+    created() {
+      axios
+        .get("https://jsonplaceholder.typicode.com/posts")
+        .then((reponse) => {
+          console.log(reponse);
+          for (const blogPost of reponse.data) {
+            this.allArticles.push(blogPost);
+          }
+        });
+    },
+  };
+</script>
+
+<style>
+  /* .list-group-item{
+   border:none
+ } */
+  .list-group-item-action:focus,
+  .list-group-item-action:hover {
+    background-color: #b0d5fc;
+  }
+</style>

p3-dev_pro_composants_vue_cli/src/components/Header.vue

@@ -9,7 +9,7 @@
         </li>
 
         <li class="btn btn-primary btn-nav">
-            <router-link to="/page1">Page 1</router-link>
+            <router-link to="/blogposts">Articles</router-link>
         </li>
 
         <li class="btn btn-primary btn-nav">

p3-dev_pro_composants_vue_cli/src/components/Post.vue

@@ -2,14 +2,27 @@
   <main class="container-fluid">
 
 
-    <div class="row mb-5">
+    <div class="row my-5">
       <div class="col text-center">
         <h1>Le Post numéro {{ id }}</h1>
       </div>
     </div>
 
     <div class="row my-5 fill-page">
       <div class="col">
+
+            <div class="card">
+              <div class="card-body">
+                <h2 class="h4 card-title">{{ articleUnique.title }}</h2>
+                <p class="card-text">{{ articleUnique.body }}</p>
+              </div>
+              <div class="card-footer">
+                  <router-link to="./">
+                    <button class="btn btn-warning">Retour aux articles</button>
+                  </router-link>
+              </div>
+            </div>
+
       </div>
     </div>
 
@@ -24,13 +37,24 @@
 </template>
 
 <script>
+ import axios from "axios";
+
   export default {
     name: "Post",
     data() {
         return {
             id: this.$route.params.id,
+            articleUnique: [],
         }
     },
+    mounted() {
+      axios
+        .get(`https://jsonplaceholder.typicode.com/posts/${this.id}`)
+        .then((reponse) => {
+          console.log(reponse);
+          this.articleUnique = reponse.data;
+        });
+    },
     methods: {
       goDebut(){
         this.$router.push("/");