2022_07_21 施工进度

点击 http://vue_music.bandao.ltd 再点击歌单再点击音乐可以播放歌曲，下面的播放暂停按钮可正常使用

主要难点：本地要代理访问网易云的 api，线上则不需要自己代理（这里花了两个小时来更正

修复 bug：刷新导致 404

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// vue.config.js
devServer: {
    proxy: {
        '/api': {
            target: 'https://music.163.com',//这里填入你要请求的接口的前缀
            ws: true,//代理websocked
            changeOrigin: true,//虚拟的站点需要更管origin
            secure: true,                   //是否https接口
            pathRewrite: {
                '^/api': ''//重写路径
            }
        }
    }
}
1
2
3
4
5
6
7
8
// footerMusic.vue
<!-- 本地使用这个，这里用了代理 -->
<!-- <audio ref="myAudio" :src="`/api/song/media/outer/url?id=${playlist[playlistIndex].id}.mp3`"></audio> -->
<!-- 线上使用这个 -->
<audio
  ref="myAudio"
  :src="`https://music.163.com/song/media/outer/url?id=${playlist[playlistIndex].id}.mp3`"
></audio>

技术点 vuex

1
2
3
4
5
6
7
8
9
10
11
12
// store/index.js
mutations: {
    updateIsBtnShow(state, value) {
      state.isBtnShow = value
    },
    updatePlaylist(state, value) {
      state.playlist = value
    },
    updatePlaylistIndex(state, value) {
      state.playlistIndex = value
    },
  },
1
2
3
4
5
6
7
8
// footerMusic.vue
import { mapMutations, mapState } from 'vuex'
computed: {
        ...mapState(['playlist', 'playlistIndex', 'isBtnShow']),
    },
methods: {
        ..mapMutations(['updateIsBtnShow'])
},
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章