As a developer primarily focused on backend, I've always felt that my frontend skills could use some polishing. To test this, I decided to challenge myself by building a Netflix clone using Vue.js 3 and Vite. In this article, I'll break down the project structure, key components, and share my learning experience.
The goal was to create a responsive web application that mimics the core features of Netflix's user interface. Here's what I initially set out to build:
More to be added in the future.
For this project, I chose the following tools:
Here's an overview of the project structure:
netflix-clone/ ├── src/ │ ├── components/ │ │ ├── MovieCard.vue │ │ ├── MovieList.vue │ │ ├── MovieRow.vue │ │ └── NavBar.vue │ ├── views/ │ │ ├── HomeView.vue │ │ ├── MovieDetailView.vue │ │ └── SearchView.vue │ ├── router/ │ │ └── index.js │ ├── services/ │ │ └── tmdb.js │ ├── stores/ │ │ └── movies.js │ ├── App.vue │ └── main.js ├── .env.example ├── vite.config.js └── package.json
This component represents an individual movie. It displays the movie poster and, on hover, shows additional information like the title, rating, and release year.
<template>
<div class="movie-card" @mouseenter="startHoverTimer" @mouseleave="resetHover">
<img :src="posterUrl" :alt="movie.title" @load="imageLoaded = true" :class="{ 'loaded': imageLoaded }">
<div v-if="isHovered" class="movie-info">
<h3>{{ movie.title }}</h3>
<p>Rating: {{ movie.vote_average }}/10</p>
<p>{{ releaseYear }}</p>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const props = defineProps(['movie']);
const imageLoaded = ref(false);
const isHovered = ref(false);
const posterUrl = computed(() => `https://image.tmdb.org/t/p/w500${props.movie.poster_path}`);
const releaseYear = computed(() => new Date(props.movie.release_date).getFullYear());
// ... hover logic
</script>
Key learnings:
This component creates a horizontally scrollable row of movies, typically grouped by genre.
<template>
<div class="movie-row">
<h2>{{ title }}</h2>
<div class="movie-list" ref="movieList">
<MovieCard v-for="movie in movies" :key="movie.id" :movie="movie" />
</div>
<button @click="scroll('left')" class="scroll-btn left"><</button>
<button @click="scroll('right')" class="scroll-btn right">></button>
</div>
</template>
<script setup>
import { ref } from 'vue';
import MovieCard from './MovieCard.vue';
const props = defineProps(['title', 'movies']);
const movieList = ref(null);
const scroll = (direction) => {
const scrollAmount = direction === 'left' ? -300 : 300;
movieList.value.scrollBy({ left: scrollAmount, behavior: 'smooth' });
};
</script>
### tmdb.js (API Service)
This service handles all API calls to The Movie Database (TMDB) using Axios.
import axios from 'axios';
const API_KEY = import.meta.env.VITE_TMDB_API_KEY;
const BASE_URL = 'https://api.themoviedb.org/3';
const tmdbApi = axios.create({
baseURL: BASE_URL,
params: { api_key: API_KEY },
});
export const getTrending = () => tmdbApi.get('/trending/all/week');
export const getMoviesByGenre = (genreId) => tmdbApi.get('/discover/movie', { params: { with_genres: genreId } });
export const searchMovies = (query) => tmdbApi.get('/search/movie', { params: { query } });
The NavBar component provides navigation for the application and includes a search input for finding movies.
<template>
<nav class="navbar">
<router-link to="/" class="navbar-brand">NetflixClone</router-link>
<div class="navbar-links">
<router-link to="/">Home</router-link>
<div class="search-container">
<input v-model="searchQuery" @input="debounceSearch" placeholder="Search movies...">
</div>
</div>
</nav>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import debounce from 'lodash/debounce';
const router = useRouter();
const searchQuery = ref('');
const debounceSearch = debounce(() => {
if (searchQuery.value) {
router.push({ name: 'search', query: { q: searchQuery.value } });
}
}, 300);
</script>
The HomeView component serves as the main page of the application, displaying multiple MovieRow components with different genres.
<template>
<div class="home-view">
<MovieRow title="Trending" :movies="trendingMovies" />
<MovieRow v-for="genre in genres" :key="genre.id" :title="genre.name" :movies="moviesByGenre[genre.id]" />
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import MovieRow from '@/components/MovieRow.vue';
import { getTrending, getGenres, getMoviesByGenre } from '@/services/tmdb';
const trendingMovies = ref([]);
const genres = ref([]);
const moviesByGenre = ref({});
onMounted(async () => {
const [trendingResponse, genresResponse] = await Promise.all([
getTrending(),
getGenres()
]);
trendingMovies.value = trendingResponse.data.results;
genres.value = genresResponse.data.genres.slice(0, 5); // Limit to 5 genres for this example
for (const genre of genres.value) {
const response = await getMoviesByGenre(genre.id);
moviesByGenre.value[genre.id] = response.data.results;
}
});
</script>
The SearchView component displays search results based on the user's query.
<template>
<div class="search-view">
<h2>Search Results for "{{ searchQuery }}"</h2>
<div class="search-results">
<MovieCard v-for="movie in searchResults" :key="movie.id" :movie="movie" />
</div>
</div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import MovieCard from '@/components/MovieCard.vue';
import { searchMovies } from '@/services/tmdb';
const route = useRoute();
const searchQuery = ref('');
const searchResults = ref([]);
const performSearch = async () => {
const response = await searchMovies(searchQuery.value);
searchResults.value = response.data.results;
};
watch(() => route.query.q, (newQuery) => {
searchQuery.value = newQuery;
performSearch();
}, { immediate: true });
</script>
You can find the full source code for this project on GitHub.
以上是Netflix Clone to Level Up Your Frontend Skills的详细内容。更多信息请关注PHP中文网其他相关文章！
