vue网易云项目笔记

1、使用Vue cli在命令行创建一个vue项目起名music001,如图:

 

 

 

 

下载axios,swiper,vue-awesome-swiper

检查package.json文件

 

2.src下创建app.vue

3.在路由文件router下的index.js中进行配置:

引入HomeView,这个HomeView.vue即是整个项目的主界面

 

4.在components中新建这四个组件的vue文件并在HomeView.vue中进行引入并注册,接下来就可以进行项目的搭建

Components引入四个组件:

(1)topNav.vue(顶部导航栏)

首先是顶部导航栏topNav.vue的搭建,这个组件比较简单,仅仅是css样式进行排版,在阿里的矢量图标库中链入一些小的图标文件

(2)swiperCom.vue(轮播图)

再就是导航栏下面的轮播图swiperCom.vue部分,这个部分需要从网易云API中获取实时的图片,我们需要在当前vue项目中新建一个api文件夹,在api中新建index.js,这里就需要用到Ajax技术了,而我们之前下载好的axios就是一个封装好的Ajax库,直接import引入axios即可.

继续在api中的index中进行操作,let一个值为我们node的那个地址比如我的node地址为http://localhost:3000,

Let baseUrl=’ http://localhost:3000’即可

接下来我们获取轮播图的api:

/banner?type=是网易云api库中可以获取到轮播图的路径

使用${}将一个值变成变量,再通过``解析变量

回到swiperCom.vue,import swiper文件和刚刚在index中新建的getBanner函数

在这里我们先用data(){return{imgs:[]}}定义返回一个imgs

在使用mounted时,由于是异步函数要加上async,来调用轮播图图片,通过这个函数来拿到轮播图数据

 

 

 

这里又新加了一个分页器的函数.

这里是将res获取到的数据中的data中的banner中的前三个数据赋值给imgs

在template中使用v-for循环数据即可:

 

这样轮播图模块就做好了

(3)iconlist(矢量图标)

 

下面是一个简单的静态页面iconList,简单设置一下css样式即可

（4）musicList（歌单列表）

 

最后一个组件musicList,这个组件和前面swiper的数据引用方式相似,但我们选择了组合api的方法再次实现一下这个数据的传输

 

 

 

这是组合api的代码

使用了onMounted的生命周期函数

现将getMusic获取的数据保存到res中.再将res的数据传给musics,最后return这个musics

 

 

 

 

这是渲染到页面上的代码.这里的picUrl,name,playCount都是通过getMusics获取到的数据的名称,所以在这里直接导入即可

至此，静态页面完成。

 

 

 

 

点开每个歌单都是一个这样的单独的页面,数据也是随之变换的

先在原有的基础上新建几个vue项目,views中一个listView,components中listViewTop.vue和playList.vue

这里的listView算是listViewTop和playList 的父级

歌单详情页面的实现效果和之前的大同小异

仍然是在router/index.js中配置一个获取数据的函数:

 

 

 

 

然后在父文件listView中引用函数和两个子文件

使用setup函数组合api:

 

 

 

 

这一步和前面的做法相似,不过多赘述

后面各个组件页面效果的实现就只需要props获得父组件的数据然后渲染到页面的指定位置并进行排版即可

我们在子组件中获取了父组件中的playlist,所以在排版页面上只需要去观察playlist中的各项数据,选择合适的数据名称渲染即可

 

 

 

 

 

组件之间共享的数据,都要使用的数据放到状态管理库store中

数据存放在store文件夹下的index.js中

在state中创建一个playlist音乐播放列表,默认播放playCurrentIndex:0下标为0(第一条数据)

在mutations中定义一个函数来修改state中的playlist音乐播放列表数据

 

 

 

 

下面要将默认的歌曲列表改成当前歌单的歌曲列表

要在listView中执行这个修改函数

当listView获取到歌单的数据时,触发这个修改函数,将默认歌单的数据修改为当前歌单的数据

今日项目的开发主要是实现了音乐播放与暂停,切换播放歌曲的功能

首先是一些昨天的代码回顾,今天的实现效果和昨天的一些代码密切相关:

 

我们先说这个切换播放歌曲:

切换播放歌曲的原理和修改playlist的方法一致,只是把palylist换成了playCurrentIndex,

让传输来的value修改到playCurrentIndex,就是歌曲的下标,因为他默认是0(第一首)

定义一个新的方法:

setPlayIndex参数和setPlaylist一致不过换掉了传输数据的变量

与setPlaylist方法不同的是,这里并没有使用commit来传值,而是使用了mutation来传值,

在有歌单列表的页面playlist.vue

 

即可,这是传值的两种方法,最后在每一个数据上绑定点击事件setPlayIndex(i)传值i(歌曲下标)

再来说说这个音乐播放器的实现:

使用一个audio绑定网易云音乐的api地址

autoplay:自动播放,paused:当前歌曲的暂停状态,play():播放当前歌曲,pause()暂停歌曲

准备一个变量控制播放暂停按钮的切换paused:true 

 

 

 

使用这样一个函数即可

歌曲详情页面

歌曲详情页面    定位fixed  脱离文档流 

swiper框架中的内容  定位  脱离文档流

swiper定位的z-index更高或者class优先级高于歌曲详情页面导致歌曲详情无法覆盖swiper部分,因为swiper是引入的框架,框架的优先级更高

修改swiper.css的代码即可

定义一个show=false(意为默认不显示),给playMusci组件绑定这个v-show=show,在歌曲小圆标头像上绑定click=show=!show实现点击歌曲图标显示playMusic组件

已经可以点击出来playMusic,现在定义一个返回按钮

实现思路:

定义一个自定义函数back:show=!show,然后在playMusic页面中触发这个自定义函数

在返回按钮上@click=”$emit(‘back’)”触发back自定义函数并执行

将父组件中的歌曲详情数据,暂停播放按钮,暂停播放函数等传输到子组件中,使用props接受

 

 

 

 

<div class="bg" :style="{backgroundImage:`url(${playDetail.al.picUrl})`}"></div>

加上背景图

加上底部的六个按钮,并给播放和暂停按钮调用play和paused函数

获取歌词详情:

歌词是组件之间共享的数据

在store/index.js中定义

在state中定义一个lyric:””空来接收当前播放歌曲的歌词

在mutations中定义一个新的函数setLyric来修改歌词的数据

 

在actions中定义一个reqLyric获取歌词的函数

 

由于用到了await异步处理,所以加上了async,这里的let就是获取到的歌词数据

获取歌词函数的调用应在playController中的mounted生命周期函数中调用.

 

由于是异步actions中的方法,所以这里使用ispatch触发

 

 

 

浅浅截个图来直接说明两者的不同 以及触发方式

这时我们的当前歌曲的歌词已经储存在了state.lyric中,直接在前端歌词页面引入即可

<p>{{$store.state.lyric}}</p>

 

动态绑定class

 

 

 

 播放时        

          

 

 

 

   暂停时

这时通过一个动态class的绑定,在css中修改transform样式达到动画效果

使用一个:class=”active=!paused”,在css中定义active的transform样式

Paused就是之前写好的播放与暂停的判断函数

实现点击按钮切换上一首和下一首

在按钮页面定义一个goplay(num)函数,在两个按钮上添加click事件并调用这个goplay,上一首是goplay(-1),下一首是goplay(+1)

然后从store中获取当前播放歌曲列表playlist与播放歌曲下标playCurrentIndex

 

 

记得import mapState from vuex

然后在methods函数中

Let index=this.playCurrentIndex+num,index就会获取当前播放歌曲下标playCurrentIndex上一首(-1)或下一首(+1)的下标,使用commit将index的值传到setPlayIndex函数中来修改当前播放音乐下标.

单是这样还不够

,我们还需要一个if判断,当歌曲下标为第一首时点击上一首会切换到当前列表的最后一首,反之同理:

 

这样歌曲就能在当前列表中上下点击切换了

搜索歌曲

在view中新建一个Search.vue并引入

1、封装搜索歌曲的api    /search?keywords=

 

2、给input添加键盘按下事件   @keydown.enter="searchSong"

 

3、编写searchSong函数，发送ajax请求，传递参数searchKeyword

 

4、接收ajax返回的歌曲列表，将它v-for循环渲染到页面上

 

 

 

用户登录验证与登录状态维持

用户登录页面和个人中心页面

在store/index.js中添加一个判断是否登陆的条件

 

在router/index.js中引入store,然后在router中对store中的数据进行判断

 

个人中心模块以及退出登录

获取登录用户信息

1、      封装获取用户详情的api接口

 

2、      调用获取用户详情接口，接收到用户详情，将用户详情保存到store.state.user.userDetail中

把数据存到本地存储中

 

3、      在个人中心页面访问用户详情的用户名

 

4,退出账号操作

单击退出按钮,清空是否登陆判断条件,清空本地存储登录用户信息,回到首页

修改store中的数据,需要在store中mutations中新建一个方法

 

在退出按钮上添加一个cilck事件=’logout’,在methods中定义这个logout函数

 

需要给img的盒子上一个v-if判断:

v-if="$store.state.user.userDetail.profile"

至此项目完成。

 

 

搜索

复制

标签：index,网易,vue,函数,笔记,歌曲,store,页面
来源： https://www.cnblogs.com/ylj2021/p/16262026.html