beginning of work

frontend/src/components/Movie.vue

@@ -9,7 +9,11 @@
       <tr v-for="movie in movies" :key="movie.id">
         <td>{{ movie.title }}</td>
         <td>{{ movie.release_date }}</td>
-        <td> <img :src= "'https://image.tmdb.org/t/p/original/' + movie.poster_path" /> </td>
+        <td>
+          <img
+            :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
+          />
+        </td>
       </tr>
     </tbody>
   </table>
@@ -23,5 +27,4 @@ export default {
 };
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>

frontend/src/router/index.js

@@ -3,6 +3,7 @@ import Home from "../views/Home.vue";
 import Counter from "../views/Counter.vue";
 import Users from "../views/Users.vue";
 import About from "../views/About.vue";
+import MoviePage from "../views/MoviePage";
 
 const routes = [
   {
@@ -25,6 +26,11 @@ const routes = [
     name: "About",
     component: About,
   },
+  {
+    path: "/movie/:id",
+    name: "MoviePage",
+    component: MoviePage,
+  },
 ];
 
 const router = createRouter({

frontend/src/views/MoviePage.vue

+<template>
+  <div class="home">
+    <h1>Bienvenue sur la page film</h1>
+    <img class="logo" alt="Vue logo" src="../assets/logo.png" />
+    <br />
+    <input type="text" v-model="moviename" placeholder="enter a movie name" />
+    <div class="film-name">Le film est : {{ moviename }}</div>
+    <li v-for="movie in movies" :key="movie.id">
+      <p class="movie-title">
+        {{ movie.title }}
+      </p>
+      <p>
+        <img
+          :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
+          withd="100"
+          height="300"
+        />
+      </p>
+    </li>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
+
+export default {
+  name: "Home",
+  data: function () {
+    return {
+      movieId: "",
+      moviesInfos: {},
+    };
+  },
+  methods: {
+    fetchMovie: async function () {
+      try {
+        // Do something if call succeeded
+        const response = await axios.get(
+          backendURL + "/movie/id/" + this.movieId
+        );
+        await (this.moviesInfos = response);
+        console.log(this.moviesInfos);
+      } catch (error) {
+        // Do something if call failed
+        this.usersLoadingError = "An error occured while fetching movies.";
+        console.error(error);
+      }
+    },
+  },
+  created() {
+    this.movieId = this.$route.params.id;
+    console.log(this.movieId);
+    this.fetchMovie();
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.home {
+  text-align: center;
+}
+
+.logo {
+  max-width: 100px;
+}
+
+h3 {
+  margin: 40px 0 0;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #ff68ad;
+}
+</style>