一、 實驗目標：
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、提高了代碼編寫能力。

總結

以上是生活随笔為你收集整理的移动应用开发——实验五的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。