网易云音乐项目（下）

主要任务完成各网页的静态页面，就要将各静态页面添加后台数据并连接到一起

 

 

将各个单组件引入到主页面中

获取后台数据

在api/index.js文件中创建访问api的函数并抛出

 

 

在listView组件中使用getPlaylistDetail方法通过id获取歌单详情数据，调用store中的setPlaylist函数实现将歌单中的歌单列表数据传递到store中的playlist数据

  setup() {
    const route = useRoute(); //当前组件的路由信息对象
    let musics = reactive({ //保存的是当前歌单的详情
      playlist: {
        creator: { }, //歌单详情
        tracks: { }, //播放列表
      },
    });
    onMounted(async () => {
      let id = route.query.id;
      console.log(id)
      let res = await getPlaylistDetail(id);
      musics.playlist = res.data.playlist
      console.log(res.data)
        //进入歌单详情页面，将歌单中的歌单列表数据传递到store的playlist中
      //commit触发store对象中的mutations中的函数
      store.commit("setPlaylist", musics.playlist.tracks);
        //将歌单下标重置为0，实现进入歌单详情选择第一首歌曲
      store.commit("setPlayCurrentIndex", 0);
    });
    return { musics };
  },

然后使用props方法将数据传给子组件listViewTop.vue和playList.vue组件使用

 <div class="listView">
      <!-- 歌单详情 -->
      <listViewTop :playlist="musics.playlist"/>
      <!-- 歌曲列表 -->
      <playList :playlist="musics.playlist"/>
  </div>

控制歌曲播放与暂停功能

playMusic这个函数与播放(暂停)图标绑定，@click点击事件触发

 methods: {
    //音乐点击播放与暂停按钮时触发的函数
    playMusic() {
      // this.@refs.audio 指的是当前的audio标签
      if (this.$refs.audio.paused) {
        //处于暂停状态
        store.commit("setPlayAudio", false); //改变图标
        this.$refs.audio.play(); //音乐播放
      } else {
        store.commit("setPlayAudio", true); //改变图标
        this.$refs.audio.pause(); //音乐暂停
      }
    },
  }

歌曲详情页面

在components创建playMusic.vue组件在playController.vue中引入

先引入store里的数据和playController.vue里的playMusic函数

import { mapState } from "vuex";
export default {
  name: "playMusic",
  data() {
    return {
      isPlaycontent: true, //控制唱片与歌词的切换
    };
  },
    // playMusic 是控制歌曲播放与暂停的函数
  props: ["playMusic"],
  computed: {   //歌单详情    //当前歌曲的下标 //播放的状态（播放与暂停） //歌词  
    ...mapState(["playlist", "playCurrentIndex", "paused","lyric"]),
  },
};