使用Vue-cli从零开始搭建Vue全家桶(仿b站客户端)项目(3.主页和视频播放页面的实现)

主页分为三个板块：1.轮播图 2.虚拟直播板块 3.推荐内容板块

实现主页内容需要用到Element.ui里的Carousel 走马灯(轮播图)、Card 卡片(推荐内容)组件。对于轮播图的功能是点击跳转到b站官方网页，点击虚拟直播板块显示功能还未开放，点击推荐内容则跳转到播放页面进行视频播放。

实现主页内容的步骤为：1.通过Axios来获取接口数据，把获取到的数据进行分类 2.把获取的数据渲染到主页页面 3.点击主页轮播图跳转到b站官方网页 4.点击虚拟直播板块弹出警告框提示：功能还未开放 5.点击推荐内容板块跳转到播放页面组件的同时把点击的视频对象数据一起给播放页面组件。

1.主页Home.vue的HTML

<template><!-- 推荐 --><div class="block"><NavBar></NavBar><!-- 轮播图 --><div class="zmd" @click="linkto"><el-carousel height="300px"><el-carousel-item v-for="(item, index) in chaide" :key="index"><img :src="chaide[index]" alt="" class="img1" /><img :src="chaide[index]" alt="" class="img2" /><img :src="chaide[index]" alt="" class="img3" /></el-carousel-item></el-carousel><div class="width"><!-- 直播数据 --><divv-for="(item, index) in picture1":key="index"class="live"@click="cancel"><img :src="picture1[index]" alt="" class="picture1" /></div></div></div><!-- 显示的内容 --><el-card class="box-card"><div slot="header" class="clearfix"><span id="text">推荐内容</span></div><div class="neiro"><divv-for="(item, index) in contentS":key="index"class="cc"@click="tiaoz(item.video, images[index], item.name)"><img :src="data:images[index]" alt="" class="picture" /><span class="text">{{ item.name }}</span></div></div></el-card></div>
</template>

主页Home.vue里的js

这里还实现了播放历史功能，播放历史功能这部分放在视频播放页面实现更好能少写一些代码，当时没想到。

播放历史步骤：1.创建一个link数组存放播放历史数据 2.点击视频时把这条视频数据通过localStorage保存到本地link数组里。 3.link: JSON.parse(localStorage.getItem("link")) || [],这句代码的意思是，读取本地存储里的link数据，如果没有，则link数组为空。 4.使用watch监听link数组，注意监听数组需要深度监听,获取到新数据 5.点击视频时判断监听的新数据是否为空(因为watch会把空传过来)在判断link是否有相同的视频信息，如果有就删除，在把他添加到第一个位置。没有的话就把视频数据添加到第一个位置。(因为播放历史功能是点击过的都显示在最前面)

<script>
import { mapState } from "vuex";
import NavBar from "@/components/common/nav.vue";
import ContentS from "@/components/common/contentS.vue";
import home from "@/db/home.json";
export default {data() {return {// 读取localStorage里的link数据link: JSON.parse(localStorage.getItem("link")) || [],domann: [],Home: [],homeList: [],contentS: [],images: [],picture1: [],aide: [],chaide: [],};},created() {this.newdata();this.two();},methods: {newdata() {let result = home.result;//    获取轮播图数据let item = result.find((item) => item.id === 0);this.aide = item.panelContents;// 获取内容图片地址 require('@/assets/images' + domanchild[i].picture)for (var i = 0; i < this.aide.length; i++) {this.chaide.push(require("@/assets/images" + this.aide[i].picUrl));}this.Home = item.panelContents;// 获取动漫内容数据let doman = result.find((doman) => doman.nrid === 1);this.domann = doman.contentS;let domanchild = doman.contentS;// 获取内容图片地址 require('@/assets/images' + domanchild[i].picture)for (var i = 0; i < domanchild.length; i++) {this.images.push(require("@/assets/images" + domanchild[i].picture));}// 给直播内容图片for (var i = 0; i < domanchild.length; i++) {this.picture1.push(require("@/assets/images" + domanchild[i].picture));}domanchild.forEach((d) => {this.contentS.push(d);});// 获取音乐内容数据let yinyue = result.find((yinyue) => yinyue.nrid === 2);let yinyuechild = yinyue.contentS;// 获取内容图片地址 require('@/assets/images' + domanchild[i].picture)for (var i = 0; i < yinyuechild.length; i++) {this.images.push(require("@/assets/images" + yinyuechild[i].picture));}// 给直播内容图片for (var i = 0; i < 4; i++) {this.picture1.push(require("@/assets/images" + yinyuechild[i].picture));}yinyuechild.forEach((y) => {this.contentS.push(y);});// 获取游戏内容数据let youxi = result.find((youxi) => youxi.nrid === 3);let youxichild = youxi.contentS;// 获取内容图片地址 require('@/assets/images' + domanchild[i].picture)for (var i = 0; i < youxichild.length; i++) {this.images.push(require("@/assets/images" + youxichild[i].picture));}youxichild.forEach((y) => {this.contentS.push(y);});// 获取舞蹈内容数据let wudao = result.find((wudao) => wudao.nrid === 4);let wudaochild = wudao.contentS;// 获取内容图片地址 require('@/assets/images' + domanchild[i].picture)for (var i = 0; i < wudaochild.length; i++) {this.images.push(require("@/assets/images" + wudaochild[i].picture));}wudaochild.forEach((w) => {this.contentS.push(w);});},linkto() {// 新窗口跳转b站官网window.open("http://www.bilibili.com");},// 点击跳转至播放页面并把播放地址传过去tiaoz(video, picture, name) {// vuex里传入点击的图片、名字、播放的地址this.$store.commit("tiaoz", [video, picture, name]);this.$router.push({name: "player",query: {id: video,picture: picture,name: name,},});},// 获取vuex的内容 做播放历史板块two() {// 首先判断内容是否为空if (this.history.name != "") {// 不为空的话让link里的数据和this.history的数据是否有相同的for (let i = 0; i < this.link.length; i++) {if (this.link[i].video === this.history.video) {// 如果有就删除this.link.splice(i, 1);break;}}// 删除完在把这条数据添加到第一位this.link.unshift(this.history);}},// 获取新点击的视频 并做本地存储newlink(n) {localStorage.setItem("link", JSON.stringify(n));},cancel() {alert("此区域为模拟直播虚假区域暂无相关功能，可点击下方推荐内容观看视频");},},computed: {...mapState(["history"]),},components: {NavBar,ContentS,},// 监听linkwatch: {link(n, o) {console.log(n, o);this.newlink(n);},deep: "true",},
};
</script>

主页实现完成

2.播放页面的实现

分为两个板块：视频播放和推荐内容板块

播放页面实现步骤：1.在created期间把传过来的视频数据赋值对应给data里。 2.创建一个组件作为推荐内容板块 3.渲染页面

播放页面play.vue

<template>
<!-- 播放页面 --><div class="player"><!-- 视频 --><div class="vid-wrappper"><video class="play" width="1000px" height="562.5px" :src="video" controls  autoplay></video><!-- 点击换视频 --><div class="left"><recommend class="recommend" @vd='ffive'></recommend></div></div></div>
</template><script>
import recommend from '@/components/common/recommend.vue';
import comment from '@/components/common/comment.vue';export default {data() {return {vd:'',video:"",picture:'',name:'',color:"#808080"} },components: {recommend,comment},created () {this.getData();},methods: {getData() {this.video = require('@/assets/images' + this.$route.query.id);this.vd = this.$route.query.id;this.picture = this.$route.query.picture;this.name = this.$route.query.name;},ffive(video){this.video = require('@/assets/images' + video);},star(){this.$store.commit('star',[this.picture,this.name,this.vd])}},}
</script>

视频播放页面里的推荐内容板块recommend.vue

<template><div  class="recommend"><el-card class="box-card"><div slot="header" class="clearfix"><span>推荐内容</span></div><!-- 推荐内容 --><div v-for="(contentS,index) in contentS" :key="index" class="cc" @click="tiaoz(contentS.video)"><img :src="chaide[index]" alt="" class="picture"><div class="text">{{contentS.name}}</div></div></el-card></div>
</template><script>
import home from '@/db/home.json';export default {data() {return {Home:[],contentS:[],chaide:[],id:''}},created () {this.newdata();},methods: {newdata(){let result = home.result;let item = result.find(item => item.id === 0);console.log(item);this.Home = item.panelContents;let cc = result.find(cc => cc.nrid === 1);this.contentS = cc.contentS;console.log(this.contentS);// 获取内容图片地址 require('@/assets/images' + domanchild[i].picture)for(var i=0;i<this.contentS.length;i++){this.chaide.push(require('@/assets/images' + this.contentS[i].picture))console.log(this.chaide);}},tiaoz(video) {this.$emit('vd',video)}},}
</script>

播放视频和推荐内容板块完成

使用Vue-cli从零开始搭建Vue全家桶(仿b站客户端)项目(3.主页和视频播放页面的实现)相关推荐

使用Vue-cli从零开始搭建Vue全家桶(仿b站客户端)项目(1.环境配置、实现登录功能)
1.前言技术栈:Vue全家桶+Element.ui组件库+Axios 功能:具有登录.配置个人信息.修改个人头像.发布评论.发布动态等功能话不多说,先看成品动图,也可点击此链接进行 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
Vue全家桶仿网易优选商城APP源码
介绍: Vue全家桶仿优选商城APP源码,只写了前端,用到的技术栈是Vue全家桶.mintUI.axios,没有实现后端接口,全部是抓包至商城App接口. 实现了挺多的功能的,比如首页.商品列表.商品 ...
2021-03-24 从零开始搭建vue移动端项目
从零开始搭建vue移动端项目一.Vue项目搭建二.使用步骤 1.初始化 2.路由 3.Vuex(状态管理) 4.Axios(数据请求模块) 5.使用Less 6.移动端适配 7.注意事项 8.移动 ...
从零搭建React全家桶框架教程
从零搭建React全家桶框架教程源码地址:https://github.com/brickspert/react-family 欢迎star 提问反馈:blog 原文地址:https://githu ...
Vue 入门之搭建vue脚手架
系列文章目录第一章 Vue 入门之搭建vue脚手架第二章 Vue入门之项目结构介绍第三章 Vue入门之基本语法第四章 Vue入门之企业站点开发实践第五章 Vue入门之前端部署文章目录系列 ...
vue/cli是什么?vue/cli如何使用? 入门篇(安装创建,组件使用,定义路由,项目导出) ∠( °ω°)／前端知识
文章目录简介安装安装nodejs nvm npm换源单次换源永久换源方法一方法二 Vue/cli安装创建Vue/cli项目解决常见错误用命令行创建项目可视化界面创建项目目录简介 ...
从零开始搭建口袋妖怪管理系统(4)-借助webpack4.6工程化项目(上)
"手动是不可能手动的了,这辈子都不可能手动的了." 一.目标上一章我们借助ngRoute,完成了口袋妖怪SPA系统的多模块导航开发,但是现在引用的东西越来越多,项目文件目录开始变 ...

使用Vue-cli从零开始搭建Vue全家桶(仿b站客户端)项目(3.主页和视频播放页面的实现)

使用Vue-cli从零开始搭建Vue全家桶(仿b站客户端)项目(3.主页和视频播放页面的实现)相关推荐

最新文章

热门文章