1、简介

根据B站视频黑马程序员vue前端基础教程-4个小时带你快速入门vue 学习制作。

再次感谢免费无私的教学视频。

感谢 @李予安丶提供的精美的css。

2、展示

3、技术点

vue2
axios

4、功能说明

4.1、基本功能

搜索歌曲
播放歌曲
显示歌曲热评
播放MV

4.2、修复问题

点击MV后音乐无法暂停
关闭MV后mv仍在后台播放

5、源代码

作为入门vue的代码，采用的是单文件的形式去编写。

因为html，css，js各自代码有一点多，因此为了提升逻辑性，分开为三个文件。

注意引用css和js的引用路径

5.1 html代码

Show Code


<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>悦听~</title>

    <link rel="icon" href="http://s1.music.126.net/style/favicon.ico?v20180823">

    <!-- 引入自定义css -->

    <link rel="stylesheet" href="./19.css">

</head>

<body>

    <div id="app">

        <header>

            <span class="app-title">

                <img src="./19.title.png">

            </span>

            <!-- 搜索歌曲 -->

            <span class="app-search">

                <input type="text" placeholder="搜索歌曲..." v-model="keywords" @keyup.enter="getMusicInfo" />

                <a href="javascript:void(0);" @click="getMusicInfo">

                    <img src="./19.search.png">

                </a>

            </span>

        </header>
    <main>

        <!-- 歌曲列表 -->

        <div class="music-list">

            <ul>

                <li v-for="(item,index) in musicList">

                    <a href="#">

                        <img src="./19.run.png" class="music-run-image" @click="playMusic(item.id)">

                        <span class="music-name" @click="playMusic(item.id)">

                            {{ item.name }} - {{item.artists[0].name}}

                        </span>

                        <img v-if="item.mvid!=0" @click="playMv(item.mvid)" src="./19.mv.png"

                            class="music-mv-image">

                    </a>

                </li>

            </ul>

        </div>

        <!-- 歌曲专辑封面 -->

        <div class="music-main">

            <img :src="picUrl" v-show="picUrl!=''" class="music-cover" :class="isPlay?'running':'paused'">

        </div>

        <!-- 热评列表 -->

        <div class="comment-list">

            <span class="comment-title">热门评论</span>

            <ul>

                <li v-for="item in hotCommentList">

                    <img class="user-header" :src="item.user.avatarUrl">

                    <span class="username">{{ item.user.nickname }}</span>

                    <p>{{ item.content }}</p>

                </li>

            </ul>

        </div>

    </main>

    <!-- 音乐 -->

    <footer>

        <audio :src="musicUrl" class="music-player" @play="play" @pause="pause" controls autoplay loop></audio>

    </footer>

    <!-- mv视频 -->

    <div class="music-mv" v-show="isMvShow" @click="closeMusicMv">

        <video :src="mvUrl" controls autoplay loop></video>

    </div>

</div>

<!-- 导入vue.js -->

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 导入axios -->

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!-- 引入自己编写的js -->

<script src="./19.js"></script>


</body>

5.2 css代码 (html中为19.css)

Show Code

body {

    background-image: linear-gradient(to left, rgba(248, 121, 248, 0.623), rgba(216, 160, 6, 0.795));

}
app {
position: relative;

width: 1300px;

height: 800px;

background-color: aliceblue;

margin: 50px auto;


}
header {


width: 100%;


height: 60px;


background-color: #ec4141;


}
.app-title {


float: left;


}
.app-title img {


height: 60px;


}
.app-search {


display: block;


float: right;


width: 600px;


height: 60px;


}
.app-search input {


outline: none;


background-color: #ec4141a6;


border: 1px solid #cebdbd7a;


width: 380px;


line-height: 30px;


margin: 15px 140px;


font-size: 13px;


border-radius: 5px;


text-indent: 10px;


color: #cebdbdfd;


}
.app-search input:focus {


border: 1px solid #cebdbdfd;


}
.app-search img {


width: 28px;


position: relative;


top: -46px;


left: 490px;


}
footer {


float: left;


width: 100%;


height: 60px;


background-color: #f1f3f4;


}
.music-list {


float: left;


height: 680px;


width: 280px;


position: relative;


left: -191px;


border-right: 1px solid #e0e0e0;


overflow-x: hidden;


overflow-y: auto;


}
.music-list ul {


list-style: none;


margin-top: 0px;


}
.music-list ul li a {


text-decoration: none;


color: black;


display: block;


line-height: 46px;


width: 278px;


margin-left: -40px;


text-indent: 20px;


font-size: 12px;


}
.music-list ul li a:hover {


background-color: #a8a4a433;


}
.music-run-image {


width: 20px;


position: relative;


left: -10px;


top: -1px;


}
.music-name {


display: inline-block;


width: 120px;


height: 35px;


overflow: hidden;


margin-left: -20px;


}
.music-mv-image {


width: 20px;


position: relative;


left: 100px;


top: 0px;


}
.comment-list {


float: right;


height: 680px;


width: 300px;


border-left: 1px solid #e0e0e0;


overflow: hidden;


overflow-y: auto;


}
.comment-list ul li {


width: 280px;


padding-left: 10px;


list-style: none;


font-size: 13px;


position: relative;


left: -40px;


}
.comment-title {


display: block;


line-height: 40px;


text-indent: 10px;


margin-top: 5px;


font-weight: 800;


}
.user-header {


width: 35px;


height: 35px;


border-radius: 50%;


}
.username {


position: relative;


top: -15px;


left: 10px;


font-size: 12px;


}
.music-main {


height: 680px;


width: 700px;


position: absolute;


left: 300px;


}
.music-cover {


width: 250px;


position: relative;


left: 180px;


top: 80px;


border-radius: 50%;


border: 50px solid #2a2b2dd2;


animation: fadenum 30s infinite linear;


}
.music-detail {


display: block;


color: #2a2b2dab;


position: relative;


text-align: center;


top: 120px;


}
.paused {


animation-play-state:paused;


}
.running {


animation-play-state:running;


}
@keyframes fadenum {


100% {


transform: rotate(360deg);


}


}
::-webkit-scrollbar {


width: 1px;


height: 16px;


background-color: #F5F5F5;


}
::-webkit-scrollbar-track {


-webkit-box-shadow: inset 0 0 6px rgba(126, 123, 123, 0.103);


border-radius: 10px;


background-color: #F5F5F5;


}
::-webkit-scrollbar-thumb {


border-radius: 10px;


-webkit-box-shadow: inset 0 0 6px rgba(139, 136, 136, 0.3);


background-color: rgba(199, 196, 196, 0.507);


}
.music-player {


width: 1300px;


}
.music-mv {


position: absolute;


z-index: 9999;


width: 1920px;


height: 937px;


background-color: #2a2b2da6;


top: -50px;


left: -310px;


}
.music-mv video {


position: relative;


width: 900px;


height: 500px;


left: 500px;


top: 150px;


}

5.3 js代码（html中为19.js）

Show Code

var vue = new Vue({

    el:"#app",

    data: {

        // 查询关键词

        keywords: "",

        // 歌曲列表

        musicList: [],

        // 热评列表

        hotCommentList: [],

        // 封面地址

        picUrl: "",

        // 歌曲地址

        musicUrl: "",

        // 动画播放状态

        isPlay: false,

        // mv地址

        mvUrl: "",

        // mv显示隐藏

        isMvShow: ""

    },

    methods: {

        getMusicInfo: function() {

            var that = this;

            axios.get("https://autumnfish.cn/search?keywords=" + that.keywords)

            .then(function(response) {

                console.log(response.data.result.songs)

                that.musicList = response.data.result.songs;

            }, function(err) {})

        },

        playMusic: function(id) {

            var that = this;

            // 拼接歌曲地址

            this.musicUrl = "https://music.163.com/song/media/outer/url?id="+id+".mp3"

            console.log(this.musicUrl);
        //获取歌曲详情

        axios.get("https://autumnfish.cn/song/detail?ids=" + id)

        .then(function(response) {

            console.log(response)

            that.picUrl = response.data.songs[0].al.picUrl;

        }, function(err) {})

        //获取热评

        axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + id)

        .then(function(response) {

            console.log(response)

            that.hotCommentList = response.data.hotComments;

        }, function(err) {})

        that.isPlay = true;

    },

    play: function() {

        console.log("play");

        this.isPlay = true;

    },

    pause: function() {

        console.log("pause");

        this.isPlay = false;

    },

    playMv: function(mvid) {

        var that = this;

        // 暂停播放音乐

        document.querySelector("audio").pause();

        // 暂停封面动画

        that.isPlay = false;

        //获取mv地址

        axios.get("https://autumnfish.cn/mv/url?id=" + mvid)

        .then(function(response) {

            console.log(response)

            // 播放mv

            that.isMvShow = true;

            that.mvUrl = response.data.data.url;

        }, function(err) {})

    },

    closeMusicMv: function() {

        // 隐藏mv

        this.isMvShow = false;

        // 暂停播放mv

        document.querySelector("video").pause();

    }

}


})

PS：

网易云开始全面扩张VIP歌曲范围了，其中包括了我最爱的薛之谦。

vue基础入门综合项目练习-悦听播放器的更多相关文章

vue基础入门（2.1）
2.vue基础用法 2.1.事件处理 2.1.1.监听事件使用v-on:事件名称 = '事件处理函数'的形式来监听事件,事件处理函数要写在methods后面的对象中 <!DOCTYPE htm ...
【音乐App】—— Vue-music 项目学习笔记：播放器内置组件开发（二）
前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 播放模式切换歌词滚动显示 ...
02 Vue介绍与安装，指令系统 v-*、音乐播放器
VUE文档 https://cn.vuejs.org/v2/guide/ 1.vue的介绍尤雨溪 1.vue的优点 2.vue的介绍 3.vue的安装 4.声明式渲染 <body> &l ...
vue基础入门
Hello World <body>  <!-- {{mseeage?message:11}}支持三元表达式 ...
vue基础入门（4）
4.综合实例 4.1.基于数据驱动的选项卡 4.1.1.需求需求说明: 1. 被选中的选项按钮颜色成橙色 2. 完成被选中选项下的数据列表渲染 3. 完成选项切换 4.1.2.代码实现 <!D ...
Vue学习笔记-Vue基础入门
此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...
Vue基础入门笔记
不是面向DOM进行编程,而是面向数据去编程.当数据发生改变,页面就会随着改变. 属性绑定(v-bind)和双向数据绑定(v-model) 模板指令(v-bind:)后面跟的内容不再是字符串而是: js ...
vue基础入门（3）
3.组件基础 3.1.什么是组件? 3.1.1.理解组件前端组件化开发是目前非常流行的方式,什么是前端组件化开发呢?就是将页面的某一部分独立出来,将这一部分的数据.视图.以及一些控制逻辑封装到一个组 ...
vue基础入门（2.3）
2.3.样式绑定 2.3.1.绑定class样式 1.绑定单个class <!DOCTYPE html> <html lang="en"> <head ...
vue基础入门（2.2）
2.2.基础指令 2.2.1.什么是指令指令 (Directives) 是带有 v- 前缀的特殊特性,指令特性的值预期是单个 JavaScript 表达式,指令的职责是,当表达式的值改变时,将其产生 ...

随机推荐

Mybatis数据库驱动
Mybatis数据库驱动最近在学习mybatis的源码,有一个databaseIdProvider根据不同数据库执行不同sql的功能,我正好有一个mysql还有一个瀚高数据库,就去试了一下,使用如下 ...
Kafka 之 HW 与 LEO
更多内容,前往 IT-BLOG HW(High Watermark):俗称高水位,它标识了一个特定的消息偏移量(offset),消费者只能拉取到这个 offset 之前的消息.分区 ISR 集合中的每 ...
gulp基本操作
1.安装淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org cnpm -v 2.生成项目描述文件 package.j ...
最新版本 Stable Diffusion 开源 AI 绘画工具之汉化篇
目录汉化预览下载汉化插件一下载汉化插件二下载汉化插件三开启汉化汉化预览在上一篇文章中,我们安装好了 Stable Diffusion 开源 AI 绘画工具但是整个页面都是英文版的,对于 ...
别逛了，送你一份2023年Java核心篇JVM（虚拟机）面试题整理
Java内存区域说一下 JVM 的主要组成部分及其作用? JVM包含两个子系统和两个组件,两个子系统为Class loader(类装载).Execution engine(执行引擎):两个组件为Ru ...
ASP.NET Core - 缓存之内存缓存(上)
1. 缓存缓存指的是在软件应用运行过程中,将一些数据生成副本直接进行存取,而不是从原始源(数据库,业务逻辑计算等)读取数据,减少生成内容所需的工作,从而显著提高应用的性能和可伸缩性,使用好缓存技术, ...
生产计划问题（动态规划）—R实现
动态规划动态规划(英语:Dynamic programming,简称 DP),是一种在数学.管理科学.计算机科学.经济学和生物信息学中使用的,通过把原问题分解为相对简单的子问题的方式求解复杂问题的方 ...
镜像搬运工 skopeo
镜像搬运工 skopeo 介绍 skopeo 是一个命令行工具,可对容器镜像和容器存储进行操作. 在没有dockerd的环境下,使用 skopeo 操作镜像是非常方便的. 安装 # 安装 skopeo ...
使用二进制方式安装Docker
长期使用安装工具进行安装docker,今天用二进制方式手动安装一下docker环境. 二进制包下载地址:https://download.docker.com/linux/static/stable/ ...
网络抓包 tcpdump 使用指南
在网络问题的调试中,tcpdump应该说是一个必不可少的工具,和大部分linux下优秀工具一样,它的特点就是简单而强大.它是基于Unix系统的命令行式的数据包嗅探工具,可以抓取流动在网卡上的数据包. ...

vue基础入门综合项目练习-悦听播放器

1、简介

2、展示

3、技术点

4、功能说明

4.1、基本功能

4.2、修复问题

5、源代码

5.1 html代码

5.2 css代码 (html中为19.css)

app {

5.3 js代码（html中为19.js）

PS：

vue基础入门综合项目练习-悦听播放器的更多相关文章

随机推荐

热门专题