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

随机推荐

Java学习小总结它又又又又来啦！
又到了输出总结的时候啦,话不多说,直接开始输出! 一.final final修饰符的主要作用就是强调它所修饰的板块的"最后"性: 若是修饰成员方法:那么成员方法不可以再被重写: 若 ...
markdown空格缩进以及HTML空格实体
参考链接:https://www.jianshu.com/p/31eade263e7a https://www.cnblogs.com/naixil/p/13193364.html
解读 Servlet 源码：GenericServlet，ServletConfig，ServletContext
解读 Servlet 源码:GenericServlet,ServletConfig,ServletContext 每博一文案人活着,就得随时准备经受磨难.他已经看过一些书,知道不论是普通人还是了不 ...
MySQL 中 explain关键字
更多内容,前往IT-BLOG explain关键字可以模拟优化器执行 SQL 查询语句,从而知道 MySQL 是如何处理 SQL 语句的.分析查询语句或表结构的性能瓶颈.执行语句:explain + ...
利用复杂数据类型（eg:对象）时，是直接调用属性快，还是先用变量填装使用快
为了验证,我用时间戳去尝试 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ch ...
万字血书React—走近React
配置开发环境脚手架工具create-react-app 储备知识:终端或命令行.代码编辑器 React官方中文文档 create-react-app 其是基于Node的快速搭建React项目的脚手架 ...
火山引擎 A/B 测试产品——DataTester 私有化架构分享
作为一款面向 ToB 市场的产品--火山引擎A/B测试(DataTester)为了满足客户对数据安全.合规问题等需求,探索私有化部署是产品无法绕开的一条路. 在面向 ToB 客户私有化的实际落地中,火 ...
python去掉重复值的方法--四种
my_list = [1,1,1,1,2,3,3,3,4,5,5,56,6,7,77,7,5,5,3]# 集合法:缺点是结果会打乱原始数据的顺序print(set(my_list)) # 列表法:缺点 ...
51nod 1153 选择子序列
51nod 选择子序列这道题是\(Bunny\)学长在给我们的模拟赛中的一道题. 食用单调栈,处理每个数\(a_i\)左右第一个比自己大的数的下标\(left_i\),\(right_i\),并且建 ...
Spring Boot 中使用 Redis
Redis 环境 redis 安装.配置,启动:(此处以云服务器上进行说明) 下载地址:https://redis.io/download/ 下载后上传到云服务器上,如 /usr/local 中 gc ...

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

随机推荐

热门专题