克隆 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" @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>

<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 } });

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

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

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