仿移动端网易云项目坑及技巧总结

网易云依赖患者，上班途中半小时的路程基本每天都是网易云陪我度过的。为了向网易云致敬，也为了深入学习vue，想做移动端的仿网易云。

[项目地址](https://github.com/chentianyuan/yun-music)

vue全家桶(vue，vue-cli，vue-router，vuex，axios，ES6，flex布局)，swiper插件，rem，自适应布局。

项目结构就不放了，项目中道崩殂，勉强实现了音乐播放功能，没有使用成熟的UI框架，做出来不太好看，一边学一边用，项目结构处理不当，数据管理处理不当，在此记录一些做出的错误以免日后再犯。

1，音乐类音频处理必定放在全局app.vue下，否则路由跳转后音乐即停，audio自身隐藏，通过其api及src属性控制音乐的播放暂停跳转等功能。

2，基本各个组件皆能改变音乐数据，musicData存放在vuex中，在需要的组件中通过Computed或watch属性监听。

computed:{

music：function(){

      return  this.$store.state.musicData

}

}

3，控制图片高度等于图片宽度

var pic = document.getElementsByClassName("pic"),

var width = pic[0].offsetWidth

for(var i = 0 ; i < pic.length ; i++){

pic[i].style.height = width+"px"

}

4，nodejs实现api转发，pipe()把一个文件流和另一个文件流串起来，这样源文件的所有数据就自动写入到目标对象res里了，当我们请求这个urls时，只要axios.$get('/lyric'，function（res）{})即可

app.get('/lyric', function(req, res) {

var urlOption = url.parse(req.url);

var urls='https://api.imjad.cn/cloudmusic/'+urlOption.search;

req.pipe(request(urls,function(error,response,body) {})).pipe(res);

});

大不了是重头再来。