Vue学习day05笔记

Vue综合案例

注：这是学习黑马4小时带你快速入门vue的最后一个案例

音乐播放器

功能：歌曲搜索；歌曲播放；歌曲封面；歌曲评论；播放动画；mv播放
歌曲搜索：按下回车（v-on .enter）,查询数据(axios 接口 v-model)，渲染数据(v-for 数组 that)
歌曲播放：点击播放（v-on 自定义参数），歌曲地址获取（接口 歌曲ID），歌曲地址设置（v-bind）
歌曲封面：点击播放（增加逻辑），歌曲封面获取（接口 歌曲ID），歌曲封面设置（v-bind）
歌曲评论：点击播放（增加逻辑），歌曲评论获取（接口，歌曲id），歌曲评论渲染（v-for）
播放动画：监听音乐播放（v-on play），监听音乐暂停（v-on pause），操纵类名（v-bind 对象）
mv播放：mv图标显示（v-if），mv地址获取（接口 mvid），遮罩层（v-show v-on），mv地址设置（v-bind）

<div class="wrap">
        <!-- 播放器主体区域 -->
        <div class="play_wrap" id="player">
          <div class="search_bar">
            <img src="img/player_title.png" alt="" />
            <!-- 搜索歌曲 -->
            <input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
          </div>
          <div class="center_con">
            <!-- 搜索歌曲列表 -->
            <div class='song_wrapper'>
              <ul class="song_list">
                <li v-for="item in musicList">
                  <a href="javascript:;" @click="playMusic(item.id)"></a> 
                  <b>{{ item.name }}</b> 
                  <span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i></i></span>
                </li>
              </ul>
              <img src="img/line.png" class="switch_btn" alt="">
            </div>
            <!-- 歌曲信息容器 -->
            <div class="player_con" :class="{playing:isPlaying}">
              <img src="img/player_bar.png" class="play_bar" />
              <!-- 黑胶碟片 -->
              <img src="img/disc.png" class="disc autoRotate" />
              <img :src="musicCover" class="cover autoRotate" />
            </div>
            <!-- 评论容器 -->
            <div class="comment_wrapper">
              <h5 class='title'>热门留言</h5>
              <div class='comment_list'>
                <dl v-for="item in hotComments">
                  <dt><img :src="item.user.avatarUrl" alt=""></dt>
                  <dd class="name">{{ item.nickname}}</dd>
                  <dd class="detail">
                    {{ item.content }}
                  </dd>
                </dl>
              </div>
              <img src="img/line.png" class="right_line">
            </div>
          </div>
          <div class="audio_con">
            <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
          </div>
          <div class="video_con" v-show="isShow" style="display: none;">
            <video :src="mvUrl" controls="controls"></video>
            <div class="mask" @click="hide"></div>
          </div>
        </div>
      </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/悦听player.js"></script>

悦听player.js:

var app = new Vue({
  el: "#player",
  data: {
    // 查询关键字
    query: "",
    // 歌曲数组
    musicList: [],
    // 歌曲地址
    musicUrl: "",
    // 歌曲封面
    musicCover: "",
    // 歌曲评论
    hotComments: [],
    // 动画播放状态
    isPlaying: false,
    // 遮罩层的显示状态
    isShow: false,
    // mv地址
    mvUrl: ""
  },
  methods: {
    // 歌曲搜索
    searchMusic: function() {
      var that = this;
      axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(
        function(response) {
          // console.log(response);
          that.musicList = response.data.result.songs;
          console.log(response.data.result.songs);
        },
        function(err) {}
      );
    },
    // 歌曲播放
    playMusic: function(musicId) {
      //   console.log(musicId);
      var that = this;
      // 获取歌曲地址
      axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(
        function(response) {
          // console.log(response);
          // console.log(response.data.data[0].url);
          that.musicUrl = response.data.data[0].url;
        },
        function(err) {}
      );

      // 歌曲详情获取
      axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(
        function(response) {
          // console.log(response);
          // console.log(response.data.songs[0].al.picUrl);
          that.musicCover = response.data.songs[0].al.picUrl;
        },
        function(err) {}
      );

      // 歌曲评论获取
      axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(
        function(response) {
          // console.log(response);
          // console.log(response.data.hotComments);
          that.hotComments = response.data.hotComments;
        },
        function(err) {}
      );
    },
    // 歌曲播放
    play: function() {
      // console.log("play");
      this.isPlaying = true;
    },
    // 歌曲暂停
    pause: function() {
      // console.log("pause");
      this.isPlaying = false;
    },
    // 播放mv
    playMV: function(mvid) {
      var that = this;
      axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(
        function(response) {
          // console.log(response);
          console.log(response.data.data.url);
          that.isShow = true;
          that.mvUrl = response.data.data.url;
        },
        function(err) {}
      );
    },
    // 隐藏
    hide: function() {
      this.isShow = false;
    }
  }
});