作为一名主要专注于后端的开发人员，我一直觉得我的前端技能需要一些改进。为了测试这一点，我决定通过使用 vue.js 3 和 vite 构建 netflix 克隆来挑战自己。在这篇文章中，我将分解项目结构、关键组件，并分享我的学习经验。
项目概况
目标是创建一个模仿 netflix 用户界面核心功能的响应式 web 应用程序。这是我最初打算构建的：
- 主页有多行电影，按类型分类
- 电影行平滑水平滚动
- 延迟加载图像以获得更好的性能
- 查找电影的搜索功能
未来还会添加更多内容。
技术堆栈
对于这个项目，我选择了以下工具：
立即学习“前端免费学习笔记（深入）”；
- vue.js 3：其反应系统和基于组件的架构
- vite：作为快速构建工具和开发服务器
- vue router：用于处理导航
- pinia：用于状态管理
- axios：用于向 tmdb 发出 api 请求
- @vueuse/motion：用于添加平滑的动画
项目结构
以下是项目结构的概述：
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
关键部件分解
电影卡.vue
该组件代表一部单独的电影。它会显示电影海报，并在悬停时显示标题、评级和发行年份等附加信息。
<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><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9838" title="git摸鱼周报自动化"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="git摸鱼周报自动化" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9838" title="git摸鱼周报自动化">git摸鱼周报自动化</a>
<p>生成周报：读取本机 Git 仓库最近一周的提交记录，按项目分类提炼总结，生成标准周报格式，通过微信推送并返回给用户。触发词：周报、weekly report、git总结、提交记录总结、工作周报。</p>
</div>
<a href="/xiazai/skill9838" title="git摸鱼周报自动化" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<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>
主要学习内容：
- 使用派生数据的计算属性
- 使用 css 过渡实现悬停效果
- 延迟加载图像以获得更好的性能
movierow.vue
此组件创建一排可水平滚动的电影，通常按类型分组。
<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 } });
导航栏.vue
navbar 组件为应用程序提供导航，并包含用于查找电影的搜索输入。
<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>
homeview.vue
homeview 组件作为应用程序的主页，显示多个不同类型的 movierow 组件。
<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>
搜索视图.vue
searchview 组件根据用户的查询显示搜索结果。
<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>
您可以在 github 上找到该项目的完整源代码。
