├── .babelrc ├── .gitignore ├── README.md ├── debug.log ├── index.html ├── package.json ├── screenshot ├── list.png ├── play.png ├── rank.png ├── recommend.png ├── search.png └── song.png ├── src ├── App.vue ├── components │ ├── ChildContainer │ │ ├── AllSinger.vue │ │ ├── Playerbig.vue │ │ ├── Search.vue │ │ └── SongClassify.vue │ ├── Me.vue │ ├── Music.vue │ ├── NotFound.vue │ ├── Play.vue │ ├── Rank.vue │ ├── Recommend.vue │ ├── Sheet.vue │ └── home.vue ├── config │ └── api.js ├── image │ ├── 1482312358874_.jpg │ ├── 1486478610443_.jpg │ ├── 1486821984806_.jpg │ ├── 1486987185879_.jpg │ ├── T003R720x288M000002mryCr3VtdR3.jpg │ ├── T003R720x288M000003utrAc4A7FwF.jpg │ ├── T003R720x288M000004Zu0uz1PYd2t.jpg │ ├── small.png │ └── timg.png ├── main.js ├── router.js └── store │ └── index.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-0"], 3 | "plugins": ["transform-object-rest-spread"] 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | .idea 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ###项目文档 2 | 3 | ##### 项目在线地址 4 | 5 | 已过期 6 | 7 | ##### webApp项目建立 8 | 9 | * 四个页面分类(推荐,排行,路由,我的) 10 | * 基本样式结构搭建 颜色暂定 rgb(105, 25, 51) 11 | * 首页页 : 1.轮播图 2.搜索 3.歌手分类 4.歌曲分类 5.新歌速递 6.每日推荐 12 | * 排行页 : 1.搜索 2.巅峰榜列表展示(各种类歌单的前三首展示) 13 | * 歌单页 : 1.轮播图 2.全部歌单(其中一个歌单的全部整个列表图片+歌名) 14 | * 我的页面 : 个人设置部分 (细节待定 暂为空) 15 | 16 | 17 | ##### 使用数据(数据为QQ音乐官方接口,仅供学习) 18 | 19 | * 功能 : 20 | * 跑通页面跳转路由 vue-router 21 | * 没有使用原生ajax , 而是使用了vue-resource插件代替原生ajax进行接口调用 22 | + this.$http.get(url, ).then(function(response) { console.log(response) }) 23 | * 需要的数据 : 歌名 歌手名 图片 歌曲播放地址 24 | * 列表渲染将数据渲染到页面 v-for 25 | * 事件处理器 对被渲染在页面上的歌曲做操作 v-on 26 | 27 | --- 28 | 29 | * 问题 : 30 | * 引入插件报错问题 31 | 32 | 33 | 34 | ##### 样式修正 35 | 36 | * 修复 : 37 | * 由于之前引入的是自己写的一个功能类插件 代码中写入了大量的事件 不符合vue的事件处理机制 所以报错 38 | * 修改页面结构样式 39 | * 某些指定事件添加方法 给元素ref属性 在 生命周期methods 中写入执行代码 40 | 41 | --- 42 | 43 | * 问题 : 44 | * 一首歌曲播放结束后就会报错卡死 45 | * 页面间的数据传递问题 需要将歌词的id传递到播放页面 46 | 47 | 48 | ##### 增加功能 49 | * 新增 50 | * 搜索部分功能 51 | * 搜索列表展示下拉加载功能(每条10首歌) 52 | * 通过获取id ,用此id请求歌曲的歌词 通过正则表达式处理lrc格式的歌词 53 | * 歌词同步渲染到页面 通过歌词中的时间与当前播放时长的对应关系 54 | * 增加loading样式 增强体验效果 55 | 56 | * 修复 57 | * 通过配置路由和点击事件的参数传递,另一个页面的数据接收问题解决 58 | * 修改搜索模式 选中搜索框直接进入搜索页面 提高效率 59 | 60 | ##### 整体修改 61 | * 修改 62 | * 整体页面背景颜色修改 63 | * 增加禁止缩放限制 64 | * 增加移动端浏览器访问体验 移动端主流浏览器体验优化 65 | * 增加各种机型适配样式 修复移动端部分样式错乱问题 66 | 67 | --- 68 | 69 | * 问题与想法 70 | * 整体背景修改后的部分样式不明显问题 71 | * 懒加载问题 72 | * 关于播放页面 73 | + 3个按钮在移动端显示的时候总感觉是歪的 74 | + 无播放列表 没有做切换歌曲的功能 75 | 76 | 77 | ##### 重构 78 | 79 | * 安装 vue-awesome-swiper 插件 让4个主要导航滑动展示 增强体验 80 | * 新增一个home页面 将4个页面配合vue-awesome-swiper 插件渲染到home页面 在通过路由渲染到入口页 81 | 82 | ##### 播放列表重建 83 | * 思路 84 | * 将进入方式从路由跳转转为展开隐藏在home页面中的元素 (好处是可以获取到更多的信息 不仅仅是歌曲id) 85 | * 选择一首歌之后并不会直接进入大的播放页面 而是将歌曲添加到页面底部的播放栏中 当点击这个播放栏时 在展开整页的播放器 86 | 87 | ##### VueX的加入 88 | * 使用vuex作为数据存储空间与多个组件间的通信功能 89 | * 减少了路由跳转页面 变为组件与组件间的跳转 90 | * 由于用到vuex中的辅助函数 需要用到es7的语法 下载相关babel解析包并重新配置.babelrc文件 91 | * 页面结构变更 新增底部的播放器 92 | 93 | ##### 播放列表重建2 94 | * 新增播放列表并配置列表功能 选中的歌曲添加至列表中可任意选择播放 95 | * 底部播放器与整页单曲播放器的跳转 96 | * 2个播放页面数据统一 97 | * 光碟样式回归 并将光碟改为当前播放歌曲的封面 98 | * 播放页背景为虚化的歌曲图片 99 | * 上一首 下一首 100 | 101 | ##### 优化 102 | 103 | * 修改播放组件代码结构 将数据方面的代码移至vuex中 104 | 105 | ##### 预知后事如何 请听下回分解 106 | * 歌词改为只展示一句 显示在光碟的下面(暂定) 107 | * 播放模式 108 | 109 | 110 | ##### 已知bug 111 | * 播放页面css3滤镜属性UC浏览器不支持 112 | * 无歌曲时底部播放栏应该隐藏 113 | * 播放组件代码量过多 应该做拆分 114 | 115 | 116 | ## Start 117 | + npm install 118 | 119 | ## Develop 120 | + npm run dev 121 | 122 | ## Build 123 | + npm run build 124 | 125 | ##### 项目截图 126 | 127 | ![首页] (https://github.com/houbx/webApp/blob/master/screenshot/recommend.png) 128 | ![排行] (https://github.com/houbx/webApp/blob/master/screenshot/rank.png) 129 | ![播放] (https://github.com/houbx/webApp/blob/master/screenshot/play.png) 130 | ![搜索] (https://github.com/houbx/webApp/blob/master/screenshot/search.png) 131 | -------------------------------------------------------------------------------- /debug.log: -------------------------------------------------------------------------------- 1 | [0227/013443:ERROR:tcp_listen_socket.cc(76)] Could not bind socket to 127.0.0.1:6004 2 | [0227/013443:ERROR:node_debugger.cc(86)] Cannot start debugger server 3 | [0227/033706:ERROR:tcp_listen_socket.cc(76)] Could not bind socket to 127.0.0.1:6004 4 | [0227/033706:ERROR:node_debugger.cc(86)] Cannot start debugger server 5 | [0301/222829:ERROR:tcp_listen_socket.cc(76)] Could not bind socket to 127.0.0.1:6004 6 | [0301/222829:ERROR:node_debugger.cc(86)] Cannot start debugger server 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | mymusic 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mymusic", 3 | "description": "A Vue.js project", 4 | "author": "boox", 5 | "private": true, 6 | "scripts": { 7 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot", 8 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.15.3", 12 | "jquery": "^3.1.1", 13 | "mint-ui": "^2.0.4", 14 | "stackblur-canvas": "^1.4.0", 15 | "vue": "^2.0.1", 16 | "vue-awesome-swiper": "^2.3.2", 17 | "vue-resource": "^1.2.0", 18 | "vue-router": "^2.2.0", 19 | "vuex": "^2.1.3" 20 | }, 21 | "devDependencies": { 22 | "babel-core": "^6.0.0", 23 | "babel-loader": "^6.0.0", 24 | "babel-plugin-transform-object-rest-spread": "^6.23.0", 25 | "babel-preset-es2015": "^6.0.0", 26 | "babel-preset-stage-0": "^6.0.15", 27 | "babel-preset-stage-2": "^6.22.0", 28 | "cross-env": "^3.0.0", 29 | "css-loader": "^0.25.0", 30 | "file-loader": "^0.9.0", 31 | "style-loader": "^0.13.1", 32 | "vue-loader": "^9.7.0", 33 | "webpack": "^2.1.0-beta.25", 34 | "webpack-dev-server": "^2.1.0-beta.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /screenshot/list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnnoWook/webApp/2ac4e1d3203a0e35677cdfb4726992f5ccb99b28/screenshot/list.png -------------------------------------------------------------------------------- /screenshot/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnnoWook/webApp/2ac4e1d3203a0e35677cdfb4726992f5ccb99b28/screenshot/play.png -------------------------------------------------------------------------------- /screenshot/rank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnnoWook/webApp/2ac4e1d3203a0e35677cdfb4726992f5ccb99b28/screenshot/rank.png -------------------------------------------------------------------------------- /screenshot/recommend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnnoWook/webApp/2ac4e1d3203a0e35677cdfb4726992f5ccb99b28/screenshot/recommend.png -------------------------------------------------------------------------------- /screenshot/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnnoWook/webApp/2ac4e1d3203a0e35677cdfb4726992f5ccb99b28/screenshot/search.png -------------------------------------------------------------------------------- /screenshot/song.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnnoWook/webApp/2ac4e1d3203a0e35677cdfb4726992f5ccb99b28/screenshot/song.png -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 25 | 26 | 301 | 302 | 305 | -------------------------------------------------------------------------------- /src/components/ChildContainer/AllSinger.vue: -------------------------------------------------------------------------------- 1 | 10 | 25 | 32 | -------------------------------------------------------------------------------- /src/components/ChildContainer/Playerbig.vue: -------------------------------------------------------------------------------- 1 | 76 | 211 | 212 | 213 | 518 | -------------------------------------------------------------------------------- /src/components/ChildContainer/Search.vue: -------------------------------------------------------------------------------- 1 | 36 | 72 | 123 | -------------------------------------------------------------------------------- /src/components/ChildContainer/SongClassify.vue: -------------------------------------------------------------------------------- 1 | 10 | 13 | 20 | -------------------------------------------------------------------------------- /src/components/Me.vue: -------------------------------------------------------------------------------- 1 | 50 | 191 | -------------------------------------------------------------------------------- /src/components/Music.vue: -------------------------------------------------------------------------------- 1 | 10 | 13 | 20 | -------------------------------------------------------------------------------- /src/components/NotFound.vue: -------------------------------------------------------------------------------- 1 | 6 | 8 | 15 | -------------------------------------------------------------------------------- /src/components/Play.vue: -------------------------------------------------------------------------------- 1 | 126 | 127 | 236 | 237 | 751 | -------------------------------------------------------------------------------- /src/components/Rank.vue: -------------------------------------------------------------------------------- 1 | 153 | 208 | 275 | -------------------------------------------------------------------------------- /src/components/Recommend.vue: -------------------------------------------------------------------------------- 1 | 78 | 79 | 137 | 138 | 139 | 338 | -------------------------------------------------------------------------------- /src/components/Sheet.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 55 | 56 | 118 | -------------------------------------------------------------------------------- /src/components/home.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 64 | 65 | 102 | -------------------------------------------------------------------------------- /src/config/api.js: -------------------------------------------------------------------------------- 1 | export default { 2 | america: { 3 | url: 'https://route.showapi.com/213-4?showapi_appid=31967', 4 | params: (id) => { 5 | return { 6 | showapi_timestamp: null, 7 | topid: 3, 8 | showapi_sign: '7c45d428c1024a5e88c3cbc78a506646', 9 | } 10 | }, 11 | }, 12 | hinterland: { 13 | url: 'https://route.showapi.com/213-4?showapi_appid=31967', 14 | params: (id) => { 15 | return { 16 | showapi_timestamp: null, 17 | topid: 5, 18 | showapi_sign: '7c45d428c1024a5e88c3cbc78a506646', 19 | } 20 | }, 21 | }, 22 | hongkong: { 23 | url: 'https://route.showapi.com/213-4?showapi_appid=31967', 24 | params: (id) => { 25 | return { 26 | showapi_timestamp: null, 27 | topid: 6, 28 | showapi_sign: '7c45d428c1024a5e88c3cbc78a506646', 29 | } 30 | }, 31 | }, 32 | korea: { 33 | url: 'https://route.showapi.com/213-4?showapi_appid=31967', 34 | params: (id) => { 35 | return { 36 | showapi_timestamp: null, 37 | topid: 16, 38 | showapi_sign: '7c45d428c1024a5e88c3cbc78a506646', 39 | } 40 | }, 41 | }, 42 | jp: { 43 | url: 'https://route.showapi.com/213-4?showapi_appid=31967', 44 | params: (id) => { 45 | return { 46 | showapi_timestamp: null, 47 | topid: 17, 48 | showapi_sign: '7c45d428c1024a5e88c3cbc78a506646', 49 | } 50 | }, 51 | }, 52 | ballad: { 53 | url: 'https://route.showapi.com/213-4?showapi_appid=31967', 54 | params: (id) => { 55 | return { 56 | showapi_timestamp: null, 57 | topid: 18, 58 | showapi_sign: '7c45d428c1024a5e88c3cbc78a506646', 59 | } 60 | }, 61 | }, 62 | rock: { 63 | url: 'https://route.showapi.com/213-4?showapi_appid=31967', 64 | params: (id) => { 65 | return { 66 | showapi_timestamp: null, 67 | topid: 19, 68 | showapi_sign: '7c45d428c1024a5e88c3cbc78a506646', 69 | } 70 | }, 71 | }, 72 | sales: { 73 | url: 'https://route.showapi.com/213-4?showapi_appid=31967', 74 | params: (id) => { 75 | return { 76 | showapi_timestamp: null, 77 | topid: 23, 78 | showapi_sign: '7c45d428c1024a5e88c3cbc78a506646', 79 | } 80 | }, 81 | }, 82 | hot: { 83 | url: 'https://route.showapi.com/213-4?showapi_appid=31967', 84 | params: (id) => { 85 | return { 86 | showapi_timestamp: null, 87 | topid: 26, 88 | showapi_sign: '7c45d428c1024a5e88c3cbc78a506646', 89 | } 90 | }, 91 | }, 92 | 93 | } -------------------------------------------------------------------------------- /src/image/1482312358874_.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnnoWook/webApp/2ac4e1d3203a0e35677cdfb4726992f5ccb99b28/src/image/1482312358874_.jpg -------------------------------------------------------------------------------- /src/image/1486478610443_.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnnoWook/webApp/2ac4e1d3203a0e35677cdfb4726992f5ccb99b28/src/image/1486478610443_.jpg -------------------------------------------------------------------------------- /src/image/1486821984806_.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnnoWook/webApp/2ac4e1d3203a0e35677cdfb4726992f5ccb99b28/src/image/1486821984806_.jpg -------------------------------------------------------------------------------- /src/image/1486987185879_.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnnoWook/webApp/2ac4e1d3203a0e35677cdfb4726992f5ccb99b28/src/image/1486987185879_.jpg -------------------------------------------------------------------------------- /src/image/T003R720x288M000002mryCr3VtdR3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnnoWook/webApp/2ac4e1d3203a0e35677cdfb4726992f5ccb99b28/src/image/T003R720x288M000002mryCr3VtdR3.jpg -------------------------------------------------------------------------------- /src/image/T003R720x288M000003utrAc4A7FwF.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnnoWook/webApp/2ac4e1d3203a0e35677cdfb4726992f5ccb99b28/src/image/T003R720x288M000003utrAc4A7FwF.jpg -------------------------------------------------------------------------------- /src/image/T003R720x288M000004Zu0uz1PYd2t.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnnoWook/webApp/2ac4e1d3203a0e35677cdfb4726992f5ccb99b28/src/image/T003R720x288M000004Zu0uz1PYd2t.jpg -------------------------------------------------------------------------------- /src/image/small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnnoWook/webApp/2ac4e1d3203a0e35677cdfb4726992f5ccb99b28/src/image/small.png -------------------------------------------------------------------------------- /src/image/timg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AnnoWook/webApp/2ac4e1d3203a0e35677cdfb4726992f5ccb99b28/src/image/timg.png -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | /*引入组件*/ 2 | //如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能 3 | import Vue from 'vue' 4 | import VueRouter from 'vue-router' 5 | import Mint from 'mint-ui' 6 | import 'mint-ui/lib/style.css' 7 | import store from './store' 8 | 9 | Vue.use(VueRouter) 10 | Vue.use(Mint) 11 | // 引入文件 12 | import App from './App.vue' //主页 13 | import routes from './router.js' //路由 14 | 15 | const router = new VueRouter({ 16 | mode: 'history', 17 | routes, 18 | }) 19 | 20 | router.beforeEach((to, from, next) => { 21 | next() 22 | }) 23 | 24 | // 创建实例 25 | const app = new Vue({ 26 | data: { 27 | bus: new Vue(), 28 | }, 29 | router, 30 | store, 31 | render: h => h(App), 32 | }).$mount('#app') 33 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | 2 | import NotFound from './components/NotFound.vue' 3 | /*childContainer*/ 4 | import Home from './components/home.vue' 5 | import AllSinger from './components/ChildContainer/AllSinger.vue' 6 | import SongClassify from './components/ChildContainer/SongClassify.vue' 7 | 8 | export default [ 9 | { path: '/home', component: Home }, 10 | { path: '/allsinger', component: AllSinger }, 11 | { path: '/songclassify', component: SongClassify }, 12 | { path: '/', redirect: '/home' }, 13 | { path: '*', component: NotFound }, 14 | ] 15 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | // import * as actions from './actions' 4 | import API from '../config/api.js' 5 | 6 | Vue.use(Vuex) 7 | 8 | function dispose(api) { 9 | return (id) => Vue.http.get( 10 | api.url, { 11 | params: api.params(id), 12 | } 13 | ) 14 | } 15 | 16 | export default new Vuex.Store ({ 17 | state : { 18 | data : null, //单首歌曲数据 19 | nam : null, 20 | shift : false, 21 | conceal : false, //底部播放器的默认隐藏 22 | currentTime : 0, 23 | duration : 0, 24 | songlist : [], //歌曲列表 25 | // style : 'rgba(102,102,102,.5)', //当前歌曲颜色值 26 | dataContainer : { //存储一首歌曲的详细数据 27 | songid : null,//歌曲id (默认为null刚进去会报一个错误,待修改) 28 | albumpic_small : null, 29 | albumpic_big : null, 30 | albummid : null , //图片id 31 | songname : '', 32 | singername : '', 33 | }, 34 | index : 0, 35 | clickTime : 0, 36 | }, 37 | mutations : { 38 | updateCurrentTime(state ,time){ //交换当前时间 39 | state.currentTime = time 40 | }, 41 | durationTime(state,time){ //交换总时间 42 | state.duration = time 43 | }, 44 | endedTime(state){ 45 | //歌曲跳转规则判断 46 | if(state.index === 0 && state.clickTime === 0) { 47 | state.index = (state.index - 2 + state.songlist.length) % state.songlist.length 48 | }else{ 49 | state.index = (state.index - 1 + state.songlist.length) % state.songlist.length 50 | } 51 | state.dataContainer.songid = state.songlist[state.index].songid //列表选歌 52 | state.dataContainer.albumpic_small = state.songlist[state.index].albumpic_small 53 | state.dataContainer.songname = state.songlist[state.index].songname 54 | state.dataContainer.singername = state.songlist[state.index].singername 55 | state.dataContainer.albumpic_big = state.songlist[state.index].albumpic_big 56 | state.clickTime++ 57 | }, 58 | previous(state){ 59 | //歌曲跳转规则判断 60 | if(state.index === 0 && state.clickTime === 0) { 61 | state.index = (state.index - 2 + state.songlist.length) % state.songlist.length 62 | }else{ 63 | state.index = (state.index - 1 + state.songlist.length) % state.songlist.length 64 | } 65 | state.dataContainer.songid = state.songlist[state.index].songid //列表选歌 66 | state.dataContainer.albumpic_small = state.songlist[state.index].albumpic_small 67 | state.dataContainer.songname = state.songlist[state.index].songname 68 | state.dataContainer.singername = state.songlist[state.index].singername 69 | state.dataContainer.albumpic_big = state.songlist[state.index].albumpic_big 70 | state.clickTime++ 71 | }, 72 | next(state){ 73 | //歌曲跳转规则判断 74 | if( state.clickTime === 0 ){ 75 | state.index = state.index % state.songlist.length 76 | }else{ 77 | state.index = (state.index + 1) % state.songlist.length 78 | } 79 | state.dataContainer.songid = state.songlist[state.index].songid //列表选歌 80 | state.dataContainer.albumpic_small = state.songlist[state.index].albumpic_small 81 | state.dataContainer.songname = state.songlist[state.index].songname 82 | state.dataContainer.singername = state.songlist[state.index].singername 83 | state.dataContainer.albumpic_big = state.songlist[state.index].albumpic_big 84 | state.clickTime++ 85 | }, 86 | play(state,index){ 87 | state.index = index 88 | state.dataContainer.songid = state.songlist[state.index].songid //列表选歌 89 | state.dataContainer.albumpic_small = state.songlist[state.index].albumpic_small 90 | state.dataContainer.albumpic_big = state.songlist[state.index].albumpic_big 91 | state.dataContainer.songname = state.songlist[state.index].songname 92 | state.dataContainer.singername = state.songlist[state.index].singername 93 | }, 94 | getData(state, payload) { 95 | state.data = payload.songdata 96 | state.dataContainer.songid = payload.songdata.songid //歌曲id 97 | state.dataContainer.albumpic_small = payload.songdata.albumpic_small //封面(小) 98 | state.dataContainer.albumpic_big = payload.songdata.albumpic_big //封面(大) 99 | state.dataContainer.songname = payload.songdata.songname 100 | state.dataContainer.singername = payload.songdata.singername 101 | // state.dataContainer.style = payload.songdata 102 | for( var i = 0; i < state.songlist.length ; i++){ 103 | if( state.songlist[i].songname == payload.songdata.songname ) return 104 | } 105 | state.songlist.push(payload.songdata) 106 | if(state.songlist.length > 0){ 107 | state.conceal = true 108 | } 109 | }, 110 | getName(state, payload){ 111 | state.nam = payload.name 112 | }, 113 | getShift(state ,payload){ 114 | state.shift = payload.shift 115 | } 116 | }, 117 | getters : { 118 | currentTime : state => parseInt(state.currentTime / 60) + ':' + (Array(2).join(0) + (state.currentTime % 60)).slice(-2), 119 | duration : state => parseInt(state.duration / 60) + ':' + (Array(2).join(0) + (state.duration) % 60 ).slice(-2), 120 | dataUrl : state =>{ 121 | if( state.dataContainer.songid === null ){ 122 | return false 123 | }else{ 124 | return 'http://ws.stream.qqmusic.qq.com/' + state.dataContainer.songid + '.m4a?fromtag=46' 125 | } 126 | }, 127 | coverSmall : state => { 128 | if( state.dataContainer.albumpic_small === null ){ 129 | return false 130 | }else{ 131 | return state.dataContainer.albumpic_small 132 | } 133 | }, 134 | coverBig : state => { 135 | if( state.dataContainer.albumpic_big === null ){ 136 | return false 137 | }else{ 138 | return state.dataContainer.albumpic_big 139 | } 140 | }, 141 | songname : state =>{ 142 | return state.dataContainer.songname 143 | }, 144 | singername : state=>{ 145 | return state.dataContainer.singername 146 | }, 147 | backgroundCover : state=>{ 148 | return state.dataContainer.albumpic_big 149 | } 150 | }, 151 | actions : { 152 | getAmerica({},id){ 153 | return dispose(API.america)(id) 154 | }, 155 | getHinterland({},id){ 156 | return dispose(API.hinterland)(id) 157 | }, 158 | getHongkong({},id){ 159 | return dispose(API.hongkong)(id) 160 | }, 161 | getKorea({},id){ 162 | return dispose(API.korea)(id) 163 | }, 164 | getJp({},id){ 165 | return dispose(API.jp)(id) 166 | }, 167 | getBallad({},id){ 168 | return dispose(API.ballad)(id) 169 | }, 170 | getRock({},id){ 171 | return dispose(API.rock)(id) 172 | }, 173 | getSales({},id){ 174 | return dispose(API.sales)(id) 175 | }, 176 | getHot({},id){ 177 | return dispose(API.hot)(id) 178 | }, 179 | play({ commit }){ 180 | return commit('play') 181 | }, 182 | } 183 | }) 184 | 185 | // export default new Vuex.Store({ 186 | // state, 187 | // getters, 188 | // actions, 189 | // mutations, 190 | // }) 191 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | // vue-loader options go here 18 | } 19 | }, 20 | { 21 | test: /\.js$/, 22 | loader: 'babel-loader', 23 | exclude: /node_modules/ 24 | }, 25 | { 26 | test: /\.css$/, 27 | loader: 'style-loader!css-loader' 28 | }, 29 | { 30 | test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, 31 | loader: 'file-loader' 32 | }, 33 | { 34 | test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/, 35 | loader: 'file-loader', 36 | query: { 37 | name: '[name].[ext]?[hash]' 38 | } 39 | } 40 | ] 41 | }, 42 | resolve: { 43 | alias: { 44 | 'vue$': 'vue/dist/vue', 45 | 'jquery': 'jquery' 46 | } 47 | }, 48 | plugins: [ 49 | new webpack.ProvidePlugin({ 50 | $: "jquery", 51 | jQuery: "jquery" 52 | }) 53 | ], 54 | devServer: { 55 | historyApiFallback: true, 56 | noInfo: true 57 | }, 58 | devtool: '#eval-source-map' 59 | } 60 | 61 | if (process.env.NODE_ENV === 'production') { 62 | module.exports.devtool = '#source-map' 63 | // http://vue-loader.vuejs.org/en/workflow/production.html 64 | module.exports.plugins = (module.exports.plugins || []).concat([ 65 | new webpack.DefinePlugin({ 66 | 'process.env': { 67 | NODE_ENV: '"production"' 68 | } 69 | }), 70 | new webpack.optimize.UglifyJsPlugin({ 71 | compress: { 72 | warnings: false 73 | } 74 | }), 75 | new webpack.LoaderOptionsPlugin({ 76 | minimize: true 77 | }) 78 | ]) 79 | } 80 | --------------------------------------------------------------------------------