克隆 Netflix 以提升您的前端技能

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

<template><div class="movie-card">    @@##@@    <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>

<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"></moviecard></div>    <button class="scroll-btn left">    <button class="scroll-btn right">&gt;</button>  </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 } });

<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" 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>

<template><div class="home-view">    <movierow title="trending" :movies="trendingmovies"></movierow><movierow v-for="genre in genres" :key="genre.id" :title="genre.name" :movies="moviesbygenre[genre.id]"></movierow></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>

<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"></moviecard></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>