作为一名主要专注于后端的开发人员，我一直觉得我的前端技能需要一些改进。为了测试这一点，我决定通过使用 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
该组件代表一部单独的电影。它会显示电影海报，并在悬停时显示标题、评级和发行年份等附加信息。
@@##@@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{{ movie.title }}
rating: {{ movie.vote_average }}/10
芝麻乐开源众筹cms系统查看详情芝麻乐开源众筹系统采用php+mysql开发，基于MVC开发，适用于各类互联网金融公司使用，程序具备模板分离技术，您可以根据您的需要进行应用扩展来达到更加强大功能。前端使用pintuer、jquery、layer等....系统易于使用和扩展简单的安装和升级向导多重业务逻辑判断，预防出现bug后台图表数据方式，一目了然后台包含但不限于以下功能：用户认证角色管理节点管理管理员管理上传配置支付配置短信平
{{ releaseyear }}
主要学习内容：
使用派生数据的计算属性使用 css 过渡实现悬停效果延迟加载图像以获得更好的性能
movierow.vue
此组件创建一排可水平滚动的电影，通常按类型分组。
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' });};### tmdb.js (api service)this service handles all api calls to the movie database (tmdb) using axios.{{ title }}
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 组件为应用程序提供导航，并包含用于查找电影的搜索输入。
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);
homeview.vue
homeview 组件作为应用程序的主页，显示多个不同类型的 movierow 组件。
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; }});
搜索视图.vue
searchview 组件根据用户的查询显示搜索结果。
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 });Search Results for "{{ searchQuery }}"
您可以在 github 上找到该项目的完整源代码。
以上就是克隆 Netflix 以提升您的前端技能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491731.html
微信扫一扫 
支付宝扫一扫 
