Skip to content
Snippets Groups Projects
Commit 8a53592e authored by Bilel El Yaagoubi's avatar Bilel El Yaagoubi
Browse files

view Home

parent e2015710
No related branches found
No related tags found
1 merge request!5Draft: Front bilel
Pipeline #42326 passed
<template> <template>
<div class="home"> <div class="home">
<img alt="Vue logo" src="../assets/logo.png" /> <img alt="Vue logo" src="../assets/logo.png" />
<h1>Welcome to Your Vue.js App</h1> <h1>Welcome to Movie Website</h1>
<p> <!-- <p>
For a guide and recipes on how to configure / customize this project,<br /> For a guide and recipes on how to configure / customize this project,<br />
check out the check out the
<a href="https://cli.vuejs.org" target="_blank">vue-cli documentation</a>. <a href="https://cli.vuejs.org" target="_blank">vue-cli documentation</a>.
</p> </p>
<h3>Installed CLI Plugins</h3> <p>
<ul> <input
<li> v-model="movieName"
<a placeholder="Type any movie here"
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" type="text"
target="_blank" />
>babel</a </p>
> <div>Nom du film: {{ movieName }}</div> -->
</li> <div class="parent">
<li> <Movie
<a class="child"
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" :movie="movie"
target="_blank" v-for="movie in movies"
>router</a :key="movie.id"
> />
</li> </div>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank"
>eslint</a
>
</li>
</ul>
<h3>Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank">Forum</a>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank">Community Chat</a>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank">Twitter</a>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank">News</a>
</li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank">vue-router</a>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank">vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-devtools#vue-devtools"
target="_blank"
>vue-devtools</a
>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank">vue-loader</a>
</li>
<li>
<a href="https://github.com/vuejs/awesome-vue" target="_blank"
>awesome-vue</a
>
</li>
</ul>
</div> </div>
</template> </template>
<script> <script>
import axios from "axios";
import Movie from "@/components/Movie";
export default { export default {
name: "Home", name: "Home",
components: {
Movie,
},
data: function () {
return {
movieName: "",
movies: [],
moviesLoadingError: "",
};
},
methods: {
fetchMovies: function () {
axios
.get(
`https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a`
)
.then((response) => {
// Do something if call succeeded
this.movies = response.data.results;
console.log(this.movies);
})
.catch((error) => {
// Do something if call failed
this.usersLoadingError = "An error occured while fetching movies.";
console.error(error);
});
},
fetchMoviesAsync: async function () {
try {
// Do something if call succeeded
const response = await axios.get(
`https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a`
);
await (this.movies = response.data.results);
console.log(this.movies);
} catch (error) {
// Do something if call failed
this.usersLoadingError = "An error occured while fetching movies.";
console.error(error);
}
},
},
created() {
console.log("Hello World");
this.fetchMoviesAsync();
},
}; };
</script> </script>
...@@ -88,6 +87,17 @@ export default { ...@@ -88,6 +87,17 @@ export default {
text-align: center; text-align: center;
} }
.parent {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-evenly;
}
.child {
width: 20%;
}
h3 { h3 {
margin: 40px 0 0; margin: 40px 0 0;
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment