vue 移动端音乐
qq_22317389
这个作者很懒,什么都没留下…
展开
-
vue 移动端音乐(1) 页面骨架开发
项目的目录结构:api存放于后端请求相关的代码,包括ajax,jsonp请求;common中存放通用性的资源,包括通用的字体文件和图片;js stylusrouter是与路由相关的文件store是存放vuex相关的文件main.js为入口文件,渲染App的一个vue文件app.vue中是一个简单的界面,我们在这里import所有的样式文件,index.styl是引入所...原创 2018-07-09 21:03:55 · 427 阅读 · 0 评论 -
vue 移动端音乐(2) 获取推荐数据并在相应的组件中接收
推荐界面(轮播图+歌单列表)+歌单详情页,重点是数据的获取,在线抓取获取数据Jsonp2,解决跨域问题,在任何站点都可以通过Jsonp去请求这个接口来获取数据原理:不是ajax请求,是动态创建script标签进行跨域的,将script的src指向我们请求的服务端地址,npm安装jsonp,axios,编写jsonp.js引入jsonp,并对原来的jsonp做一个简单的封装1. src-...原创 2018-05-31 17:02:15 · 892 阅读 · 0 评论 -
vue 移动端音乐(3) >热门歌单推荐部分(webpack-dev-conf.js做后端接口代理+scroll插件)
1. 首先,获取歌单推荐部分的数据,与获取推荐数据不同,热门歌单数据的接口有host和referer的显示,我们的api请求被拒绝(500错误),必须要修改header,但是前端不能直接修改request header,我们采取后端接口代理的方法去解决。使用express,不是直接请求服务器的url,而是请求我们自己的server端,让local server再去请求QQ服务端使用expres...原创 2018-07-27 15:28:58 · 692 阅读 · 0 评论 -
vue 移动端音乐(4) 歌手界面的开发
1.获取歌手数据api->singer.jsimport jsonp from 'common/js/jsonp'import {commonParams, options} from './config.js'export function getSingerList() { const url = 'https://c.y.qq.com/v8/fcg-bin...原创 2018-07-29 20:22:55 · 1041 阅读 · 0 评论 -
vue移动端音乐----播放器组件的开发
多个组件都可以打开播放器,所以我们要控制这个播放器的数据,一定是全局的,所以我们把数据通过vuex来管理 1. Vuex数据设计,很多歌单都可以打开播放器,打开歌单缩小时,会出页面最下方出现小型的播放器,所以播放器的数据一定是全局的,所以把这个数据通过vuex来管理在state.js中添加播放器的状态,并在common->config.js中添加播放器的播放模式(顺序,随机,循环)...原创 2018-07-29 20:23:40 · 2238 阅读 · 1 评论 -
vue移动端音乐----播放器组件的开发2
播放模式对应到vuex中state是一个mode字段export const playMode = { sequence: 0, loop: 1, random: 2}import {playMode} from 'common/js/config' mode: playMode.sequence, // 默认为顺序播放getter中有一个state的映射...原创 2018-07-29 20:24:00 · 912 阅读 · 1 评论 -
vue 移动端音乐(5) 歌手详情页的开发---vuex的使用(url地址),
歌手详情界面的开发:singer-detail组建的开发:创建并编写简单的页面在index.js中重新配置路由,点击歌手就可以转到详情列表了{ path: '/singer', component: Singer, children: [ { path: ':id', component: S...原创 2018-07-27 15:26:26 · 1531 阅读 · 0 评论