Vue框架学习-Vue综合运用_极客不撩妹-优快云博客

本文链接：https://blog.youkuaiyun.com/u011708337/article/details/112665509

这篇博客详细介绍了如何使用Vue框架实现一个音乐播放器的综合应用，包括歌曲搜索、播放、封面显示、评论展示及播放动画等功能。通过axios接口获取数据，利用v-on、v-model、v-for等指令进行数据绑定和事件处理，强调了数据在data中定义以实现响应式，并提醒开发者注意接口文档的阅读和审查元素在复杂页面结构中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本文是Vue框架学习的第四部分-Vue的综合应用。

案例练习-音乐播放器

音乐播放器
功能：

歌曲搜索

按下回车（v-on .enter）
查询数据（axios 接口 v-model）
渲染数据（v-for 数组 that）
服务器返回的数据比较复杂，获取时要注意层级结构
通过审查元素快速定位到需要操纵的元素

歌曲播放

点击播放（v-on 自定义参数）
歌曲地址获取（接口歌曲id）
歌曲地址设置（v-bind）
歌曲id依赖歌曲搜索的结果，对于不用的数据也需要关注

歌曲封面

点击播放（增加逻辑）
歌曲封面获取（接口歌曲id）
歌曲封面设置（v-bind）
在Vue中通过v-bind操纵属性
本地无法获取的数据，基本都会有对应的接口

歌曲评论

点击播放（增加逻辑）
歌曲评论获取（接口歌曲id）
歌曲评论渲染（v-for）
在Vue中通过v-for生成列表

播放动画

监听音乐播放（v-on play）
监听预约暂停（v-on pause）
操纵类名（v-bind 对象）

mv播放

mv图标显示（v-if）
mv地址获取（接口 mvid）
遮罩层（v-show v-on）
mv地址设置（v-bind）
不同接口需要的数据是不同的，文档的阅读需要仔细
页面结构复杂后，通过审查元素的方式去快速定位相关元素
响应式的数据都要在data中定义

代码

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>音乐播放器</title>
    <link rel="stylesheet" type="text/css" href=""/>
</head>

<body>
    <div class="wrap" id="app">
        <!-- 播放器主体区域 -->
        <div class="play_wrap" id="player">
            <div class="search_bar">
                <!-- 搜索歌曲 -->
                <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="" class="switch_btn" alt="">
                </div>
                <!-- 歌曲信息容器 -->
                <div class="player_con" :class="{playing:isPlaying}">
                    <img src="" class="play_bar">
                    <!-- 黑胶唱片 -->
                    <img src="" class="disc autoRotate"/>
                    <img :src="musicCover" class="cover autoRotate"/>
                </div>
            </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.user.nickname }}
                        </dd>
                        <dd class="detail">
                            {{ item.content }}
                        </dd>
                    </dl>
                </div>
            </div>
            <div class="audio_con">
                <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
            </div>
            <div class="videuo_con" v-show="isShow" style="display: none;">
                <video :src="mvUrl" controls="controls"></video>
                <div class="mask" @click="hide"></div>
            </div>
        </div>
    </div>

    <!-- 官方提供的axios在线地址 -->
    <script src="http://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 导入自己的js -->
    <script src="./js/musicplayer.js"></script>
</body>

</html>

javascript:


/*
    1. 歌曲搜索接口
        请求地址: http://autumnfish.cn/search
        请求方法: get
        请求参数: keywords（查询关键字）
        响应内容: 歌曲搜索结果

    2. 歌曲url获取接口
        请求地址: http://autumnfish.cn/song/url
        请求方法: get
        请求参数: id（查询关键字）
        响应内容: 歌曲url地址

    3. 歌曲详情获取接口
        请求地址: http://autumnfish.cn/song/detail
        请求方法: get
        请求参数: ids（歌曲id）
        响应内容: 歌曲详情（包含封面信息）

    4. 热门评论获取
        请求地址: http://autumnfish.cn/comment/hot?type=0
        请求方法: get
        请求参数: ids（歌曲id，地址中的type固定为0）
        响应内容: 歌曲的热门评论

    5. mv地址获取
        请求地址: http://autumnfish.cn/mv/url
        请求方法: get
        请求参数: id（mvid，为0表示没有mv）
        响应内容: mv的地址

*/

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("http://autumnfish.cn/search?keywords=?"+this.query)
            .then(function(response){
                console.log(response);
                that.musicList = response.data.result.songs;
            }
            .catch(function(err){}))
        },
        // 歌曲播放
        playMusic:function(musicId){
            var that = this;
            // 获取歌曲地址
            axios.get("http://autumnfish.cn/song/url?id=?"+musicId)
            .then(function(response){
                console.log(response);
                that.musicUrl = response.data.data[0].url;
            }
            .catch(function(err){}))

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

            // 歌曲评论获取
            axios.get("http://autumnfish.cn/comment/hot?type=0&id="+musicId)
            .then(function(response){
                console.log(response);
                that.hotcomments = response.data.hotComments;
            }
            .catch(function(err){}))
        },

        // 歌曲播放
        play:function(){
            this.isPlaying = true;
        },

        // 歌曲暂停
        pause:function(){
            this.isPlaying = false;
        },

        // 播放mv
        playMV:function(mvid){
            var that = this;
            axios.get("http://autumnfish.cn/mv/url?id="+mvid)
            .then(function(response){
                console.log(response);
                that.isShow = true;
                that.mvUrl = response.data.data.url;
            }
            .catch(function(err){}))
        },

        // 隐藏
        hide:function(){
            this.isShow = false;
        }
    },
})