-
21 |
- 我的消息 22 |
- 会员中心 23 |
- 商城 24 |
- 在线听歌免流量 25 |
-
27 |
- 我的好友 28 |
- 附近的人 29 |
-
31 |
- 个性换肤 32 |
- 关于 33 |
35 |
36 |
37 |
3 |
21 |
22 |
23 |
51 |
52 |
135 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | // The Vue build version to load with the `import` command
2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3 | import Vue from 'vue'
4 | import App from './App'
5 | import router from './router'
6 | import axios from 'axios';
7 | import VueAxios from 'vue-axios';
8 | import Vuex from 'vuex'
9 |
10 |
11 | Vue.config.productionTip = false
12 |
13 | // 用 axios 进行 Ajax 请求
14 | Vue.use(VueAxios, axios);
15 |
16 | // Vuex 进行状态管理
17 | Vue.use(Vuex);
18 |
19 | const store = new Vuex.Store({
20 | state: {
21 | musicData: [],
22 | skinColor: localStorage.skinColor || '#B72712',
23 | isShowIndex: true,
24 | isPlaying: false,
25 | isAnimation: false,
26 | isShowAsideMenu: false,
27 | isShowMiniMusic: false,
28 | isShowAbout: false,
29 | linkBorderIndex: '',
30 | DOM: {},
31 | audio: {
32 | name: '',
33 | src: '',
34 | musicImgSrc: '',
35 | index: 0
36 | }
37 | },
38 | mutations: {
39 | del(state, index) {
40 | if (state.musicData.length === 0) {
41 | return;
42 | }
43 | state.musicData.splice(index, 1);
44 | },
45 | play(state, flag) {
46 | state.isPlaying = flag;
47 | },
48 | addMusic(state, payload) {
49 | for (let music of state.musicData) {
50 | if (JSON.stringify(music) === JSON.stringify(payload)) {
51 | return;
52 | }
53 | }
54 | state.musicData.unshift(payload);
55 | },
56 | toggleMusic(state, index) {
57 | state.audio.name = state.musicData[index].name;
58 | state.audio.src = state.musicData[index].src;
59 | state.audio.musicImgSrc = state.musicData[index].musicImgSrc;
60 | state.audio.index = index;
61 | },
62 | playMusic(state, payload) {
63 | state.audio.name = payload.name;
64 | state.audio.src = payload.src;
65 | state.audio.musicImgSrc = payload.imgSrc;
66 | state.isPlaying = true;
67 | },
68 | findDOM(state, payload) {
69 | state.DOM[payload.name] = payload.dom;
70 | },
71 | showIndex(state, flag) {
72 | state.isShowIndex = flag;
73 | },
74 | showAsideMenu(state, flag) {
75 | state.isShowAsideMenu = flag;
76 | },
77 | showMiniMusic(state, flag) {
78 | state.isShowMiniMusic = flag;
79 | },
80 | showAbout(state, flag) {
81 | state.isShowAbout = flag;
82 | },
83 | changeLinkBorderIndex(state, index) {
84 | state.linkBorderIndex = index;
85 | },
86 | changeSkinColor(state, color) {
87 | state.skinColor = color;
88 | }
89 | },
90 | actions: {
91 | getData({ commit,state }) {
92 | if (localStorage.musics !== '[]' && localStorage.musics) {
93 | state.musicData = JSON.parse(localStorage.musics);
94 | return;
95 | }
96 | return new Promise((resolve, reject) => {
97 | Vue.axios.get('/api/music-data')
98 | .then (res => {
99 | if (res.data.errno === 0) {
100 | state.musicData = res.data.musicData;
101 | localStorage.musics = JSON.stringify(state.musicData);
102 | }
103 | })
104 | .then(() => {
105 | commit('toggleMusic',0)
106 | });
107 | resolve();
108 | });
109 | }
110 | }
111 | });
112 |
113 | /* eslint-disable no-new */
114 | new Vue({
115 | el: '#app',
116 | router,
117 | store,
118 | template: '
4 |
5 |
8 | 云音乐
6 | 7 |
9 |
19 |
20 |
10 | 我的
11 |
12 |
13 | 发现
14 |
15 |
16 | 一个
17 |
18 |
5 |
6 |
15 |
7 | ![]()
8 | {{ (index+1) + '. ' + item.name}}
9 |
10 |
11 |
12 | 没有更多歌曲了～
13 |
14 |
4 |
5 |
19 |
6 |
17 |
18 | 关于
7 |技术栈：
8 |Vue2
Vuex
vue-router
axios
SASS(SCSS)
Express(上线版本是Koa2)
Webpack
ES6
localStorage(HTML5)
CSS3
9 | Vuex
vue-router
axios
SASS(SCSS)
Express(上线版本是Koa2)
Webpack
ES6
localStorage(HTML5)
CSS3
源码地址：GitHub
10 |个人网站：microzz
11 |
待业码农，求工作～～如果你觉得该项目不错，还可以请我吃辣条😄↓↓↓
13 | 
14 |
15 |
14 | 【声明】：本项目仅供学习使用，请不要用作任何商业用途。有任何疑问请联系作者↓
📩：zhaohui@microzz.com
3 |
4 |
5 |
6 |
21 |
22 |
23 |
24 |
26 |
27 |
28 |
29 |
30 |
31 |
34 |
35 |
36 |
100 |
101 |
194 |
--------------------------------------------------------------------------------
/src/components/AsideMenu/AsideMenu.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
9 |
20 |
4 |
5 |
46 |
6 |
41 |
42 |
43 |
44 |
45 |
7 | 
8 |
16 |
17 |
18 |
8 |
16 |
19 |
40 |
20 |
38 |
39 |
5 |
24 |
25 |
6 |
23 |
7 | ![microzz.com]()
8 |
9 |
10 |
19 | {{audio.name || (musicData[0]&&musicData[0].name) || 'Powered by microzz.com'}}
11 |
12 | {{transformTime(now)}}
13 |
16 |
17 |
18 |
20 |
21 |
22 |
4 |
48 |
5 |
6 |
14 |
15 |
16 |
7 |
8 |
9 |
10 |
12 |
13 | 取消
11 |
17 | 热门搜索
18 |
22 |
23 |
19 |
20 |
21 |
24 |
25 |
26 |
47 |
27 |
31 |
32 |
28 |
{{item}}
29 |
30 |
清除搜索记录
33 |
34 | 搜索中...
35 |
36 |
45 |
37 | ![microzz.com]()
38 |
39 |
40 |
44 | {{strDecode(item.fsong)}}
41 | {{item.f.split('|')[3]&&strDecode(item.f.split('|')[3].replace(/amp\;/g, '')).replace(/\;/g, '/') || '佚名'}}
42 |
43 | 没有更多结果了～
46 |
3 |
4 |
67 |
68 |
69 |
182 |
183 |
516 |
--------------------------------------------------------------------------------
5 |
6 |
19 |
20 |
7 |
9 |
10 |
8 |
11 |
13 |
14 | {{audio.name || (musicData[0]&&musicData[0].name) || 'Powered by microzz.com'}}
12 |
15 |
17 |
18 |
16 |
21 |
22 |
23 |
29 |
30 | ![microzz.com]()
31 |
54 |
55 |
66 |
24 |
28 | -
25 |
- {{ (index + 1) +'. '+ item.name}} 26 |
32 | ![microzz.com]()
33 |
34 |
35 |
41 | {{transformTime(now)}}
36 |
39 |
40 |
42 |
43 |
50 |
51 |
52 |
53 |
44 |
45 |
46 |
47 |
48 |
49 |