Vue音乐播放器
关注
分享
扫一扫
友人C君~
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
015_Vue音乐播放器（将项目打包，传到服务器，线上预览，完结撒花）
终于做完了，前前后后历时一个半月，终于撸出一个能用的音乐播放器了，感谢酷狗播放源API 酷狗API参考我已经把代码放到了我的GitHub仓库上，欢迎讨论，喜欢的给个start *******GitHub 地址：https://github.com/CWH0908/VueMusicPlayer线上预览地址：http://49.235.92.173:70/做好的项目...原创 2019-12-04 17:10:23 · 775 阅读 · 0 评论 -
014_Vue音乐播放器（myLove.vue 喜欢歌曲列表）
首先是vuex中的数据给头部添加一个进入喜欢歌曲列表的导航点击时跳到myLove.vue组件myLove.vue 组件，格式可参照kugoouSongList组件<template> <div class="myLove"> <header class="backgroundDiv"> &...原创 2019-11-30 17:44:26 · 641 阅读 · 0 评论 -
013_Vue音乐播放器（playlist.vue 播放列表组件）
点击播放列表，出来显示当前的播放列表，可以进行点击跳转播放歌曲，切换播放状态在state状态库中使用isShowPlayList来控制playlist组件的显隐，在mutations和getters定义相关的操作在playlist的一些操作，如切换播放状态，可以抛出给player.vue组件处理。playlist.vue 组件<template> <...原创 2019-11-27 16:51:36 · 2050 阅读 · 0 评论 -
012_Vue音乐播放器（search.vue 搜索 组件）
首先是 酷狗搜索的API 请求，在proxyTable中 代理 该地址在请求API的js文件中，有搜索热门词请求，搜索词条请求import axios from 'axios';let commonParams = { inCharset: 'utf-8', outCharset: 'utf-8'}export function getKugouHotKeyword...原创 2019-11-22 10:02:50 · 496 阅读 · 0 评论 -
011_Vue音乐播放器（rank.vue 排行榜 组件）
首先是，访问酷狗排行榜以及排行榜里歌曲的 APIimport axios from 'axios';let commonParams = { inCharset: 'utf-8', outCharset: 'utf-8'}export function getKugouRank() {//排行榜单 const url = 'KugouMusicAPI/rank/list...原创 2019-11-22 09:19:50 · 1038 阅读 · 0 评论 -
010_Vue音乐播放器（player.vue 播放器组件）
不满意之前的页面结构，所以我重构了一下，以home.vue作为父级组件，recommend组件、singer组件、rank组件和search组件作为子路由自建都归类到tab组件中。player.vue 组件，放置在home.vue组件下，这个组件一直存在，不过由于v-show="isShow"的关系，vuex中的playList没有数据，所以隐藏掉了，然后根据fullScree...原创 2019-11-06 20:21:27 · 3806 阅读 · 3 评论 -
009_Vue音乐播放器（歌单详情页面的开发）
由于 QQ音乐的歌曲文件时不时更新一下，我在尝试了获取vkey后仍然是不能播放歌曲，所以我把歌单的数据换成了酷狗的API，酷狗API请求歌曲简单多了，在推荐组件下请求歌单，返回歌单的id，然后根据某一歌单的id可以请求回这个歌单下的所有歌曲的一些基本信息，根据基本信息下包含的hash值，可以请求回来这首歌曲的完整信息，包括可以直接播放的play_url 地址页面结构还是和之前差不多，不过数据属...原创 2019-11-06 19:52:29 · 1211 阅读 · 0 评论 -
008_Vue音乐播放器（歌手详情页面的开发）
从上一篇，获取得到歌手信息之后，通过vuex 来获取数据，拿到数据后，创建歌曲列表组件 music-list.vue页面dom结构，分为头部（返回按钮，歌手姓名）， 歌手图片 ，歌曲列表。header头部有做一个遮罩层的处理，通过css3的颜色渐变，使头部标题不会与头部背景图颜色重叠其中 歌手 图片由歌手列表传入，由于图片尺寸太小，在这我使用正则表达式对图片请求的url进行...原创 2019-10-28 19:10:17 · 372 阅读 · 0 评论 -
007_Vue音乐播放器（歌手详情页，使用vuex进行项目的数据状态管理）
现在介绍vuex的使用 Vuex官方文档Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。首先 使用 cnpm install vuex --save ， 安装vuex。然后在 src 目录下 创建 store 文件夹其中，action.js 文件表示有异步的状态...原创 2019-10-25 13:55:59 · 604 阅读 · 0 评论 -
005_Vue音乐播放器（推荐页滚动优化、图片懒加载、以及对第三方ui库的样式穿透修改样式）
这篇讲的内容比较简单，是使用 better-scroll 组件 和 vant的图片懒加载better-scroll 的使用首先，在不使用better-scroll 的时候，滑动页面，头部的顶部栏和导航栏会跟着滑动，这不是我们所想要的，我们只需要下面的轮播图和推荐歌曲列表滑动即可，这是使用前后的效果图。 首先使用 cnpm install bett...原创 2019-10-22 12:25:48 · 424 阅读 · 0 评论 -
004_Vue音乐播放器（请求歌单列表伪造referer和host）
上一篇我们讲到，请求QQ音乐的推荐列表的轮播图数据，这些轮播图数据属于相对公开的数据，最多存在跨域问题，使用上篇说到的jsonp或者axios（在config的index.js函数中添加proxyTable进行请求代理）即可解决跨域问题。这篇我们需要请求的时歌单列表，先看看请求回来的数据的格式这个歌单列表数据的请求比较敏感，所以，QQ音乐对其API的请求做了限制，限制字段是refere...原创 2019-10-21 17:16:14 · 1062 阅读 · 0 评论 -
003_Vue音乐播放器（音乐推荐列表API接口及调用）
先来分享几个 音乐的API接口酷狗、QQ音乐、网易云API接口酷狗API详细那么Vue使用axios访问这些API接口的时候 会得到后台返回的数据，根据这个数据，先了解其数据格式，比如你需要的播放链接，歌曲名称等，一般来说都是json格式，数组格式，或者字符串格式。有时候，Vue访问的API接口跨域了，可以通过以下方式解决跨域问题。在项目目录中congfig文件夹下的in...原创 2019-10-16 09:57:47 · 2273 阅读 · 0 评论 -
002_Vue音乐播放器（头部路由导航制作）
这部分是普通的页面布局，直接上代码：头部顶部栏头部导航栏配置路由规则设置路由激活状态的样式将激活样式放入index.less 的全局样式中在App.vue中使用 头部顶部栏组件和 头部导航组件 ， 其中先创建对应的路由组件，使用命名路由来放置路由组件最终的效果图...原创 2019-10-15 20:47:44 · 410 阅读 · 0 评论 -
001_Vue音乐播放器（搭建项目目录）
在此默认你已掌握中级的html+css+JavaScript 知识，并且对 vue 有实际使用经验（看完大部分官方文档，了解基础语法，写过小demo），有使用过webpack和npm，能够通过vue-cli搭建初始化目录。这个项目是 源自 慕课网 的教学视频 ，在其基础上使用我自己的理解来实现的音乐播放器，使用的 技术栈有vue全家桶（vue+vue-router+vuex+axios）以及一...原创 2019-10-15 16:39:04 · 767 阅读 · 0 评论