【用Vue来实现音乐播放器（二十一）：歌手详情数据抓取】的更多相关文章

Vue慕课网音乐项目随手记--node代理及数据抓取

1.抓取数据 链接   https://y.qq.com/portal/playlist.html Parameters 通过上图能看到,qq音乐通过设置了refer和host来保护接口. 那么怎么才能获取到数据呢? 2.进入build==>webpack.dev.conf.js 使用axios 做请求, 定义一个api的router 3.定义一个getDiskList的接口,回调传入两个参数,前端请求这个接口,通过nodejs请求QQ音乐接口,发送HTTP请求的时候,修改referer 和ho…

用Vue来实现音乐播放器（二十一）：歌手详情数据抓取

第一步:在api文件夹下的singer.js中抛出getSingerDetail方法 第二步:在singer-detail.vue组件中引入api文件夹下的singer.js和config.js 第三步:在singer-detail.vue的方法中调用getSingerDetail方法  这个方法返回一个promise实例  所以要用then 得到获取成功的情况…

vue小练习--音乐播放器

1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>音乐播放器</title> <meta name="viewport" content="width=device-width ,initial-scale…

用Vue来实现音乐播放器（三十八）：歌词滚动列表的问题

1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是因为它内部有个计时器 //每次currentSong改变的时候都会重新new一个新的lyric-parser出来, //但是我们之前的对象并没有做清理操作 也就是说我们之前对象还是有计时器在里面 //所以歌词会来回闪动 解决办法: 在切换歌曲之前 即getLyric()之前 重新去getLyric(…

Vue实战：音乐播放器（一） 页面效果

先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心…

用Vue来实现音乐播放器（十七）：歌手页右侧快速入口实现

快速入口的列表是其实是之前处理的歌手的数据中的关于title的列表 shorcutList属性是计算属性   通过ret数组中的title计算到的 所以我们要在singer.vue组件中将数据传入到list-view组件 list-vue 组件在props中接受 shortcut快速入口列表  所用到的属性 是计算属性  通过将singer.vue组件中传入到list-view组件中的数据计算得到 将得到的shortcutList数据通过v-for展示在页面 效果图如下 下面来实现功能 1.点击…

汽车之家店铺商品详情数据抓取 DotnetSpider实战[二]

一.迟到的下期预告 自从上一篇文章发布到现在,大约差不多有3个月的样子,其实一直想把这个实战入门系列的教程写完,一个是为了支持DotnetSpider,二个是为了.Net 社区发展献出一份绵薄之力,这个开源项目作者一直都在更新,相对来说还是很不错的,上次教程的版本还是2.4.4,今天浏览了一下这个项目,最近一次更新是在3天前,已经更新到了2.5.0,而且项目star也已经超过1000了,还是挺受大家所喜爱的,也在这感谢作者们不断的努力. 之所以中间这么长一段时间没有好好写文章,是因为笔者为参加3…

用Vue来实现音乐播放器（二十三）：音乐列表

当我们将音乐列表往上滑的时候   我们上面的歌手图片部分也会变小 当我们将音乐列表向下拉的时候   我们的图片会放大 当我们将音乐列表向上滑的时候   我们的图片有一个高斯模糊的效果 并且随着我们的列表向上滑动的越多  图片越模糊 封装prefix  避免写太多的兼容性    由于歌曲列表  排行榜列表 歌单列表样式差不多  所以我们做一个list-view的组件  方便复用 第一步:将从父组件页面中接受需要用到的数据 将接受到的这些数据应用在页面中 背景图:    音乐列表的位置 设置scro…

用Vue来实现音乐播放器（二十）：Vuex初始化及歌手数据的配置

state:所有组件的所有状态和数据  放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件的数据发生变化的时候 它可以通过Dispatch一个Actions 然后Actions可以做一些异步操作 比如与后端的一些交互  然后它可以取commit一个mutations 注意:我们也可以在组件中直接commit一个mutations Mutations:是唯一可以修改State的途径  其他…

用Vue来实现音乐播放器（十八）：右侧快速入口点击高亮

问题一:当我们点击右侧快速入口的时候  被点击的地方高亮 首先我们要知道右侧快速入口是为什么高亮??因为当watch()监控到scrollY的变化了的时候  将scrollY的值和listHeight相比较  判断scrollY在哪个group区间  从而判断高亮的currentIndex  所以要想高亮  就要让scrollY变化  但点击右侧快速入口的时候 我们没有有scroll方法  直接走的scrollTo方法  所以无法派发scroll事件  触发scrollY的变化   所以我们要手…

用Vue来实现音乐播放器（九）：歌单数据接口分析

z这里如果我们和之前获取轮播图的数据一样来获取表单的数据  发现根本获取不到 原因是qq音乐在请求头里面加了authority和refer等 但是如果我们通过jsonp实现跨域来请求数据的话  是根本不能够修改请求头的  所以我们就考虑用axios  但是axios又不能进行跨域  那么我们要怎么拿到qq音乐的服务器的数据呢??其实是有办法解决的:我们可以进行后端接口代理  那么什么是后端代理呢?? 如果要使用axios直接进行跨域访问是不可以的,这是就需要配置代理了,为什么要配置代理呢? 原因…

用Vue来实现音乐播放器（八）：自动轮播图啊

slider.vue组件的模板部分 <template> <div class="slider" ref="slider"> <div class="slider-group" ref="sliderGroup"> //要注意slot插槽里面的数据要先渲染出来 <slot> </slot> </div> <div class="dots&q…

用Vue来实现音乐播放器（十六）：滚动列表的实现

滚动列表是一个基础组件  他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件     <template> <!-- 当父组件传递给子组件的数据发生变化的时候 scroll可以监听到此时高度会发生变化 --> <!-- 子组件这里的:data和props里面的data相对于 --> <!-- 父传子的时候 data是对应的props里面的值 --> <scroll class=&q…

用Vue来实现音乐播放器（十四）：歌手数据接口抓取

第一步:在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法  使他能够在singer.vue中调用 import jsonp from '../common/js/jsonp.js' import {commonParams,options} from './config.js' export function getSingerList() { const url = 'https://c.y.qq.com/v8/fcg-bin/v8.fcg' cons…

用Vue来实现音乐播放器（10）：Scroll组件的抽象和应用

了解better-scroll什么时候是需要refresh计算的??通常我们遇到的better-scroll不能滚动的问题的根源是什么??better-scroll的渲染原理是:根据初始化的时机  或者调用refresh()的时机的那个时候的scroll的父元素的高度和子元素的高度之差去做一个计算  计算出他可以滚动的位置  所以我们去实例化或者refresh这个scroll的时候  一定要保证  这个dom是已经渲染好的 我们能正确计算到高度的 如果我们有数据变化以及dom变化的场景的时候 …

用Vue来实现音乐播放器（五）：路由配置+顶部导航栏组件开发

路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件import Recommend from '../components/recommend/recommend.vue' import Singer from '../components/singer/singer.vue' import Rank from '../components/rank/ra…

用Vue来实现音乐播放器（四十）：歌单详情页布局以及Vuex实现路由数据通讯

1.歌单详情页是推荐页面的二级路由页面 将推荐页面歌单的数据传到歌曲详情页面  利用vuex 1.首先在state下定义一个歌单对象 disc{} 2.在mutaions-types中  定义一个别名 3.在mutations里面创建更改函数 4.在getters里面将该状态与组件映射 4.在recommed推荐主页引入mapMutations 5.在methods中去拓展mapMutations ...mapMutations({自定义函数名:' mutations-types中的别名 ' …

用Vue来实现音乐播放器（十五）：处理得到的歌手数据

之前得到的歌手数据是用forEach遍历添加的  没有顺序性  我们希望得到的数据是title:"热门"的数据在最上面  title为字母的数据按字母从低到高顺序排列 var hot=[] var ret=[] for(let key in map){ let val=map[key] //在对象map中 键为key 对应的键值 if(val.title.match(\[a-zA-Z]\)){ ret.push(val) }else if(val.title==="热门&qu…

用Vue来实现音乐播放器（六）：JSONP的封装

在npm上下载jsonp的包 这个包的用法 传入的参数是地址加上地址参数的混合  但是想封装一个将地址和地址参数分别传入的jsonp方法 所以来封装一个 import originJSONP from 'jsonp' export default function jsonp(url,data,options){ url+=(url.indexOf('?')<0?'?':'&')+param(data) return new Promise((resolve,reject)=>{ or…

如何用vue打造一个移动端音乐播放器

写在前面 没错,这就是慕课网上的那个vue音乐播放器,后台是某音乐播放器的线上接口扒取,虽然这类项目写的人很多,但不得不说这还是个少有的适合vue提升的好项目,做这个项目除了想写一个比较大并且功能复杂的项目,主要原因是要拿它来应对面试,也确实对我vue的业务能力有很全面的提升,也使我找工作更加得心应手 代码内容有区别于作者源码,因为作者编码习惯跟我有很大差别,或者说比我更高级,生搬硬套并没有太大的意义,如果有时间最好从头到尾都自己写,包括所有的样式,代码量比较大,我在业余时间去写大概一个月完成了…

Android 实现简单音乐播放器（二）

在Android 实现简单音乐播放器(一)中,我介绍了MusicPlayer的页面设计. 现在,我简单总结一些功能实现过程中的要点和有趣的细节,结合MainActivity.java代码进行说明(写出来可能有点碎……一向不太会总结^·^). 一.功能菜单 在MusicPlayer中,我添加了三个菜单: search(搜索手机中的音乐文件,更新播放列表). clear(清除播放列表……这个功能是最初加进去的,后来改进之后,已经没什么实际意义). exit(退出). menu_main.xml <m…

一个基于H5audio标签的vue音乐播放器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con…

Android VLC播放器二次开发3——音乐播放(歌曲列表+歌词同步滚动)

今天讲一下对VLC播放器音频播放功能进行二次开发,讲解如何改造音乐播放相关功能.最近一直在忙着优化视频解码部分代码,因为我的视频播放器需要在一台主频比较低的机器上跑(800M主频),所以视频解码能力受到极大考验,VLC的解码库挺复杂,花了两三周时间,也只看了点皮毛. 这里说几句题外话,中间也尝试过使用其他的解码器,其中选了目前比较有名的Vitamio来试验,不过它让我大失所望,对于720*420的视频解码能力竟然还不如Beta版的VLC的解码,我测试一个立方体旋转视频,播放的时候,整个视频画面变…

02 Vue介绍与安装，指令系统 v-*、音乐播放器

VUE文档 https://cn.vuejs.org/v2/guide/ 1.vue的介绍 尤雨溪 1.vue的优点 2.vue的介绍 3.vue的安装 4.声明式渲染 <body> <div id="app1"> <!-- 插值语法 react {} angular {{}} {%%} <% = %> 你可以任意插 --> <h3>{{title}}</h3>       <h3>{{ 1>2?…

vue音乐播放器

利用vue写一个简单的音乐播放器,包括功能有歌曲搜索.歌曲播放.歌曲封面.歌曲评论.播放动画.mv播放六个功能. <template> <div class="wrap"> <!-- 播放器主体区域 --> <div class="play_wrap" id="palyer"> <div class="search_bar"> <img src="./…

vue——一个页面实现音乐播放器

请忽略下面这段文字年关将至,时间好歹又多出了些许.却不敢过度消遣.岁月未曾饶过我,我亦不想饶过岁月.且将它塞得膨胀,让这一年看似加更充实.不曾料想我一个爱些风花雪月.研墨行歌之人,却做起了碼农这一行当.虽做了碼农,却断不了嗜好,日日必听歌.奈何近日,公司限制高流量网络访问.虾米.网易云.QQ甚至酷狗,无一幸免.没有了歌,变得像挨了锤的牛一样,疲软成一滩烂泥.所幸还能用用listen 1,可这listen 1却让人味同嚼蜡.歌且无过,想是这界面不合胃口.做一名前端,也沾了对外观挑三检四的毛病.于是…

小菜学习Winform（二）WMPLib实现音乐播放器

前言 现在网上有很多的音乐播放器,但好像都不是.net平台做的,在.net中实现音乐文件的播放功能很简单,下面就简单实现下. SoundPlayer类 在.net提供了音乐文件的类:SoundPlayer,但是只支持.wav格式,我们用的时候一般是播放系统文件,比如一些提示声音等.代码很简单: SoundPlayer player = new SoundPlayer(); player.SoundLocation = filePath;//filePath文件的物理路径 player.Play(…

仿酷狗音乐播放器开发日志二十四 选项设置窗体的实现（附328行xml布局源码）

转载请说明原出处,谢谢~~ 花了两天时间把仿酷狗的选项设置窗体做出来了,当然了只是做了外观.现在开学了,写代码的时间减少,所以整个仿酷狗的工程开发速度减慢了.今天把仿酷狗的选项设置窗体的布局代码分享出来,给学习duilib布局的朋友做个demo.现在编写的仿酷狗选项设置窗体和原酷狗的窗体不细看几乎看不出差别,控件的布局位置和原酷狗最多只有几个像素的位置差别. 先来看一下原酷狗的选项设置窗体的其中一个页面: 如果还不太会布局的朋友可以先看我前些日子写的关于duilib布局的博客<duilib各种布…

仿酷狗音乐播放器开发日志十九——CTreeNodeUI的bug修复二（附源码）

转载请说明原出处,谢谢 今天本来打算把仿酷狗播放列表的子控件拖动插入功能做一下,但是仔细使用播放列表控件时发现了几个逻辑错误,由于我的播放 列表控件是基于CTreeViewUI和CTreeNodeUI做得,所以产生这几个bug的原因还在于他们两个,在<仿酷狗音乐播放器开发日志十一 ——CTreeNodeUI的bug修复>中已经修复过一个动态添加控件的相关bug,这属于第二次修复了.关于第一次bug的修复,后来 Duilib扩展群的 joe 又进行过比我更全面的修复,我现在使用的CTreeVie…

QT5:C++实现基于multimedia的音乐播放器（二）

今天接着上一篇来实现播放器的槽函数. 先来实现播放模式,槽函数如下: //播放模式 void Music::musicPlayPattern() { //z=++z%3; ) { //顺序播放 playPattern->setStyleSheet("QPushButton:!hover{border-image: url(:/image/Seq.png);}" "QPushButton:hover{border-image: url(:/image/Seq.png);}…