移动应用开发——实验五

一、 实验目标：
1.掌握使用Vue-CLI脚手架工具在自己的电脑上建立项目，并会运行调试工具。
2.了解vue-aplayer插件的使用方法。
3.理解如何使用 axios 发起 http 请求的方法。
4.使用QQ音乐、网易云音乐等API接口开发简单音乐播放手机应用，学习通过网络接口的调用，培养复杂问题简单化思维。

二、 实验内容：
1.要求使用Vue-CLI脚手架工具搭建一个Web项目vue-music（本次实验必须用Vue-CLI脚手架搭建项目）。实验报告要求将项目文件结构截图，并简单介绍。
2.安装依赖，使用Node.js运行mock-serve中server服务，运行Music-play-front中源码，参照运行效果，实现一个简单手机音乐播放应用网页。
3.使用Vue组件编程方法完成主要功能，具体使用的编程技术不限。
4.实现最基本的音乐播放功能即可完成实验基础内容（基础部分满分96分）。
5.自选扩展实验：模仿手机上的QQ音乐播放器，实现一个手机音乐播放器Web应用。本条扩展内容请根据自己的学习情况选做（4分）。

截图展示：

主要代码及实现方法简介（请尽量配合截图，描述清楚编程和开发过程和方法）：
Recommend.vue

<template>
  <div class="recommendBox" v-if="hotData.length>0">
    <h3>热门歌曲推荐</h3>
    <ul class="list">
      <li class="item" v-for="item in hotData" :key="item.id">
        <router-link :to="{path:`/playsong/${item.id}`}">
          <div class="pic">
            <img :src="item.pic" alt />
          </div>
          <p v-text="item.title+'  ( '+item.author+' ) '"></p>
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hotData: []
    };
  },
  created() {
    this.init();
  },
  watch: {
    $route() {
      this.init();
    }
  },
  methods: {
    async init() {
      let hotData = localStorage.getItem("hotData");
      if (hotData) {
        hotData = JSON.parse(hotData);
        if (new Date().getTime() - hotData.time < 30 * 60 * 1000) {
          this.hotData = hotData.data;
          return;
        }
      }
      let result = await this.$api.hotList();
      if (parseInt(result.code) === 0) {
        this.hotData = result.data;
        localStorage.setItem(
          "hotData",
          JSON.stringify({
            time: new Date().getTime(),
            data: result.data
          })
        );
      }
    }
  }
};
</script>
<style lang="less">
.recommendBox {
  margin-top: 0.4rem;
  padding: 0 0.3rem;

  h3 {
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    font-size: 0.32rem;
    font-weight: normal;
  }

  .list {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item {
      width: 32%;
      overflow: hidden;

      a {
        display: block;
        .pic {
          height: 2.24rem;
          background: #ddd;

          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        p {
          height: 0.8rem;
          line-height: 0.4rem;
          font-size: 0.2rem;
          color: grey;
          overflow: hidden;
        }
      }
    }
  }
}
</style>

App.vue

<template>
  <div id="app">
    <transition :name="tranName">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
/* IMPORT CSS */
import "./assets/reset.min.css";
import "./assets/basic.less";
import "swiper/css/swiper.css";
export default {
  data() {
    return {
      tranName: ""
    };
  },
  methods: {
    queryTranName() {
      const path = this.$route.path;
      if (path.includes("song")) {
        this.tranName = "song";
        return;
      }
      this.tranName = "video";
    }
  },
  created() {
    this.queryTranName();
  },
  watch: {
    $route() {
      this.queryTranName();
    }
  }
};
</script>

<style lang="less" scoped>
.video-enter-active {
  transition: 0.5s;
}
.video-enter {
  transform: translate(-100%);
}
.video-enter-to {
  transform: translateX(0);
}
.video-leave-active {
  transition: 0.5s;
}
.video-leave {
  opacity: 1;
}
.video-leave-to {
  opacity: 0;
}
.song-enter-active {
  transition: 0.5s;
}
.song-enter {
  opacity: 0;
}
.song-enter-to {
  opacity: 1;
}
.song-leave-active {
  transition: 0.5s;
}
.song-leave {
  transform: translateX(0);
}
.song-leave-to {
  transform: translateX(-100%);
}
</style>

三、 心得体会：
1、掌握使用Vue-CLI脚手架工具在自己的电脑上建立项目，并运行调试工具。
2、学习Vue组件编程方法，了解vue-aplayer插件的使用方法。
3、理解如何使用 axios 发起 http 请求的方法
4、会开发运行简单音乐播放器，实现最基本的音乐播放功能。
5、提高了代码编写能力。