Vue实战-网易云音乐移动端

一、项目后端搭建

1.下载所需后端文件：

（后端api源代码）

 2.将项目源码解压至项目中并进行--node app.js运行

 

二、项目创建

（1）通过vue-cli创建项目：vue create music001

（2）选择并下载项目依赖包

 

（3）项目创建成功后运行项目 npm run serve

 

三、发现页面的效果实现

（1）创建页面，在页面中引入头部导航、轮播图、icon图标、发现歌单组件

（2）引入rem.js文件，用来控制文本大小

（3）头部导航：

   1.在components创建组件topNav.vue为头部导航页面

         2. 添加到发现页

         3. 引入icon图标

（2）轮播图：

   1.下载并使用依赖包swiper vue-awesome-swiper 与 swiper@5 创建文件

 

   2. 引入swiper.css 与 swiper 文件

   

   3.通过swiper.css 与 less 文件创建组件css样式

   4.通过Swiper对象函数 绑定操纵对象并对对象下元素进行轮播

   5.分页器的设置：用pagination关联标签、绑定对象，以及设置能否进行点击

   

 

 

（3）icon图标：

             1. icon阿里巴巴图标库选择并获取图标

    2.图标入库后复制svg链接

    3.添加到项目所需图标位置进行使用icon图标

（4）数据的发现与使用：

            1.引入getLimit及生命周期函数

    2.调用请求到的数据并获取数据

    3.设置Setup函数并保存获取的歌单列表数据

   

 

    4.设置一定条件下触发生命周期函数，并进行轮播模块部分的设置 包括内容显示及内容间距的设置

   

 

 

 

 

四、歌单详情页面

（1）引入相关文件、组件及生命周期函数的使用

1.Setup函数定义当前路由信息对象及保存当前歌单详情

 

2.定义一个对象用来保存歌单详情及歌单播放列表用以调用替换数据

 

3.生命周期函数的应用以获取数据，进入歌单详情页面，将歌单中的播放列表传递到store的playList中去，commit触发store对象中mutations函数

  

  

（2）组件的设置

1. 歌单详情组件的设置：

《1》props接收父组件传递的数据

 

《2》设置点击事件，点击返回按钮返回到发现页面

   

《3》获取真实数据、引入矢量图标以及替换计量单位

 

2. 歌单列表组件的设置：

   《1》引入并应用接收store中的mustations的setPlayIndex方法

 

 

   《2》props接收父组件传递的数据

 

   《3》循环显示出歌单列表并获取真实数据

 

   《4》替换计量单位

 

 

五、歌曲播放

（1）创建歌曲详情组件

（2）在全局播放组件中引入歌曲详情组件

（3）设置点击事件跳转页面显示及点击取反触发返回页面消失

（4）传递歌曲详情、歌曲暂停播放按钮显示的条件以及play函数（控制歌曲播放暂停）并在子组件中接收

（5）展示数据

    1.引入矢量图标

    2.获取真实数据展示

    3.设置动态class绑定，当添加class名称，active：true为音乐正在播放，active：false为音乐暂停，唱片的唱臂跟随歌曲的播放暂停同步进行改变

    4.准备一个变量控制唱片与歌词的切换并使用v-if和v-else进行绑定设置 

（6）歌词详情

1.获取歌词的api进行封装，并将其抛出

2.在mutations中定义一个函数，用来修改歌词数据

3.获取歌词详情的函数，payload传递参数，payload.id当前歌曲的id，content修改歌词内容为当前获取的歌词详情

4.全局播放组件获取歌曲歌词详情，使用mounted进行获取默认当前歌曲的歌词，默认播放歌曲发生改变时使用updated获取切换歌曲的歌词

（7）歌曲切换

1.给歌曲切换图标设置点击事件绑定goplay方法

2.设置goplay方法获取切换之后的歌曲下标，同时进行判断下标小于零即歌曲在第一首时在进行切换则切换到最后一首，而当下标等于歌曲数量长度时即歌曲在最后一首时在进行切换则切换到第一首

六、搜索模块

（1）创建搜索模块父组件与搜索页面子组件

（2）配置路由以及在父组件中引入子组件

  

（3）在topNav组件中设置点击引入搜索页面

  

（4）设置子组件搜索页面

1.设置矢量图标以及点击返回上一页

 

2.设置搜索以及歌曲列表

    《1》获取搜索歌曲的api并对外抛出

  

 《2》在子组件中引入并使用

  

 《3》定义一个对象为用户输入框要搜索的数据以及搜索数据的存储

   

 《4》与搜索框进行v-model绑定并设置键盘事件用以回车搜索

  

 《5》键盘事件触发异步函数，回车之后搜索的关键字赋值给res，res里边的歌曲数据赋值给searchSongs并渲染到页面上

  

 《6》获取歌曲数据并使用v-for循环歌曲列表展示

  

3.搜索列表的播放功能

     《1》定义一个函数，搜索歌曲点击切换时，将点击的这首歌曲添加到到state的播放列表末尾

  

  《2》为播放按钮设置点击事件用来切换歌曲

  

  《3》设置setPlay函数，转换搜索的歌曲数据格式让其与之前数据列表中格式相同，commit触发store中mutations的pushPlayList方法，将当前点击歌曲追加到播放列表末尾

      第一种实现方式：

     

      第二种实现方式：

使用直接调用方式：

    

七、个人中心

1.创建登录页面和个人中心页面并配置路由

2.在进入个人中心路由之前，要执行的生命周期函数，判断用户是否登录（判断条件是store中的user中的isLogin）

3.配置登录页面样式及获取数据

4.设置对象存储用户账号及用户密码

5.获取用户登录验证的api封装并抛出

6.v-model绑定phone输入手机号及password输入密码

7.设置点击事件绑定登录按钮，获取输入账号密码。触发store中登录验证phoneCheckLogin的函数

8.异步函数验证用户是否登录成功，判断用户登录，用户登录成功，修改用户的登录状态为true

9.登陆成功进入个人中心页面

10.获取用户详情的api进行封装并抛出

11.获取当前登录用户的详情，将用户详情保存到state的user数据中

12.去掉a标签的默认行为，点击事件绑定返回首页

13.设置个人中心样式并获取数据进行展示

14.退出登录点击事件绑定函数logout返回首页

15.定义一个函数，用户退出时，删除user中用户登陆数据

16.用户退出登录，删除store中user用户登录数据，清空本地存储数据，返回到项目首页