Exercice supp - Hugo

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@vue/eslint-config-prettier": "^7.0.0",
+    "axios": "^0.27.2",
     "pinia": "^2.0.14",
     "quichtify": "^1.15.11",
     "vue": "^3.2.36",
@@ -34,5 +35,5 @@
   },
   "engines": {
     "node": "16.15.1"
-}
+  }
 }

src/components/AddUserAPI.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="container">
+    <input placeholder="Prenom"/>
+    <input placeholder="Nom"/>
+    <input placeholder="Framework"/>
+    <q-button @click="getUsers()">See each user on the console</q-button>
+    <q-button @click="postUsers()">Valider</q-button>
+  </div>
+</template>
+
+<script setup>
+import axios from "axios";
+
+const getUsers =() => {
+  const getData = axios.get("https://4078-92-103-197-34.eu.ngrok.io/users");
+  console.log(getData)
+}
+
+const postUsers =() => {
+  axios.post(`https://4078-92-103-197-34.eu.ngrok.io/users`, {
+    body: {
+      firstname: "Prénom",
+      lastname: "Nom",
+      framework: "Framework",
+    },
+  })
+}
+</script>

src/router/index.js

@@ -3,6 +3,7 @@ import HomeView from "../views/HomeView.vue";
 import VersusView from "../views/VersusView.vue";
 import FinalLeaderboardView from "../views/FinalLeaderboardView.vue";
 import FaqView from "../views/FaqView.vue";
+import AddUserAPI from "../views/addingUserHugo.vue";
 import NotFoundView from "../views/NotFoundView.vue";
 
 const router = createRouter({
@@ -28,6 +29,11 @@ const router = createRouter({
       name: "faq",
       component: FaqView,
     },
+    {
+      path: "/addinguser",
+      name: "adduser",
+      component: AddUserAPI,
+    },
     { path: "/:pathMatch(.*)*", name: "NotFound", component: NotFoundView },
   ],
 });

src/views/addingUserHugo.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <add-user-api/>
+  </div>
+</template>
+
+<script setup>
+import AddUserApi from "../components/AddUserAPI.vue";
+</script>