本节总览
代码更新
主要
更新代码列表如下:
/src/components/singer-detail/singer-detail.vue
/src/store //文件夹下包含多个文件
/src/api/singer.js
/src/components/music-list/music-list.vue
/src/base/song-list/song-list.vue
本节代码开发知识点及代码思路:
一、transition
| 进入/离开 & 列表过渡
二、Vuex
三、通过jsonp--以singer.id为参数,获取歌手详情数据
在
api/singer.js
中添加getSingerDetail(singerId)
方法。
api中的诸多方法都是通过jsonp方式获取数据,不再赘述。
四、歌手详情数据处理和song类的封装
五、music-list组件开发
新建文件/src/components/music-list/music-list.vue
musicl-list布局,在之前也对歌手的song数据进行了封装存储后,我们继续分析需求,我们发现多个页面与歌手详情页面是类似的(头部的大图片与歌曲list区块),于是开发song-list组件(下半部分的歌曲列表),方便各个地方进行使用。
新建文件/src/base/song-list/song-list.vue
……
更新至2019.1.20,待续。。