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 表达式,指令的职责是,当表达式的值改变时,将其产生 ...

随机推荐

DVWA-Brute Force(暴力破解)
暴力破解漏洞,没有对登录框做登录限制,攻击者可以不断的尝试暴力枚举用户名和密码 LOW 审计源码 <?php // 通过GET请求获取Login传参, // isset判断一个变量是否已设置,判 ...
文件上传 upload-labs Pass 12-16
Pass12 GET00%截断审计源码 $is_upload = false; $msg = null; if(isset($_POST['submit'])){ $ext_arr = array( ...
sdut——4541：小志志和小峰峰的日常（取石子博弈模板题 4合1）
小志志和小峰峰的日常 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 小志志和小峰峰特别喜欢一起讨论一些很好玩的问题. ...
Python查找存储区0KB文件并记录下地址
查找存储区域中0KB大小文件,可以根据需要变更指定大小. #-*- coding: utf-8 -*- #!/usr/bin/python from os.path import isdir,absp ...
java常用的数据类型有哪些
前言在上一篇文章中,壹哥给大家讲解了Java中变量的定义.使用及基本原理等内容,这个内容并不是很难,但却是我们走向Java大神的第一步!壹哥希望你从第一天就要认真对待哦. 在前面讲解变量时,壹哥给大 ...
QtDesigner第一个程序
用QTDesigner设计界面简单多了,而且更加直观.先看下效果图,是不是比我们用代码写的布局要美观多了制作.ui界面 (1).打开Pycharm的界面设计工具QTDsigner Pycharm-& ...
QtDesigner安装
QtDesigner简单介绍 Qtdesigner是Python设计里面一个非常实用的工具,使得人们编写qt界面可以不仅仅是使用纯代码,而可以在可视化的基础上设置,非常方便. QtDesigner安装 ...
Java设计模式 —— 建造者模式
8 建造者模式 8.1 建造者模式概述 Builder Pattern:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 建造者模式可以将部件本身和它们的组装过程分开,关注如 ...
AI时代下普通小程序员的想法
在我接触了一系列AI技术后,不禁产生了许多思考.我先后尝试了AI编程.AI写论文.AI写小说.AI绘画等,最近看到了一些关于AI构建虚拟世界以及Auto-GPT的AI类新闻.在这个过程中,我心头涌现出 ...
Karmada v1.5发布：多调度组助力成本优化
摘要:在最新发布的1.5版本中,Karmada 提供了多调度组的能力,利用该能力,用户可以实现将业务优先调度到成本更低的集群,或者在主集群故障时,优先迁移业务到指定的备份集群. 本文分享自华为云社区& ...

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基础入门综合项目练习-悦听播放器的更多相关文章

随机推荐

热门专题