开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 24 天，点击查看活动详情
前言
前段时间在进行应用开发实训，实训结果就是制作一个网易云app，这个app后端接口部分暂时我们使用老师给的，后期找机会再说后端问题。使用本文是纯前端内容。
介绍项目。
首页
详情页面
播放界面：
搜索界面
静态界面部分。
其实关于页面布局，我一般是把页面进行方块划分，然后再定义盒子。
比如首页，他可以分三个部分，轮播图，搜索框和榜单。
轮播图实现，最简单的是给需要轮播的图片进行重命名，保证他们只有最后一个数字不一样，然后调用函数进行照片切换。
那么下面搜索框，其实就是一个div盒子给了一个border(边框)。
至于后面榜单，范畴左右两部分，左边里面有两个盒子，一个代表文字xx榜，一个代表文字刚刚更新。关于xx榜单还有里面有什么音乐，并不是写定的，而是根据接口数据变化的。不过这里我们只写静态，就不需要考虑那么多。
关于播放页面，分上中下三部分。上标识歌曲名字，中是主体部分，一个是图片，一个是歌词，可以通过轮播图来书写。下面是一个进度条，时间和上一首下一首暂停播放的图片。
因为使用的uniapp书写，所以歌词图片切换代码如下
如何拿到动态数据
接口：
首页获取榜单
http://47.108.157.232:8889/getRankList
搜索页面的热搜歌曲的歌名
http://47.108.157.232:8889/getRecommend
由热搜歌名得到歌曲列表
url: 'http://47.108.157.232:8889/getMusicList?title=海的女儿'
视频数据
http://47.108.157.232:8889/getVideoList
某一类榜单的所有歌曲
http://47.108.157.232:8889/getRankInfo?id=1
//mp3播放页面 为进度条获取duration currentTime
https://music.163.com/song/media/outer/url?id=1410647903
//获取歌词信息
http://47.108.157.232:8889/getMusicInfo?id=1410647903
首先，怎么在前端拿到数据？可以通过发送Ajax请求，请求模板如下：
url里面就可以书写上面接口地址。console下面可以把数据接收。通过this.xxx=res.data;然后在html里面通过{{xxx}}拿到数据进行渲染。
怎么渲染？我们以首页为例子。
先在浏览器地址栏输入地址，拿到如下数据。
在榜单栏那里，进行循环。
然后就能通过item.属性进行相关渲染。
那么在第二个页面里面，如果不想重新申请数据也可以通过定义缓存拿到数据。
设置缓存
取出缓存
关于播放界面，怎么拿到每一首歌曲的具体时间？
补充：关于vue十个指令
10个指令：
v-test 作用：替换标签里的文本内容
v-html 作用：将标签内容替换成标签
v-show 满足条件就显示
v-if、v-else-if、v-else和if else用法类似
v-for 遍历数组对象字符串
v-model 双向榜单数据（即和xx榜单后，前台修改xx，数据项里面的xx也会改变）
v-on 绑定事件监听，可简写为@
v-bind 单项绑定解析表达式，可简写为 :xxx
