关注
分享
文章平均质量分 91
从零开始实现访问百度音乐API实现今日推荐、新歌速递、音乐榜单、下拉刷新、播放音乐、搜索歌曲等功能，代码分阶段，讲解分阶段，适合新手入门。
霸道流氓气质
每一个优秀的人，都有一段沉默的时光，是那段时光，不抱怨不诉苦，最后渡过了这段感动自己的日子。
展开
-
百度音乐接口使用示例
百度音乐全接口http://tingapi.ting.baidu.com/v1/restserver/ting请求方式：GET参数处理：format=json&calback=&from=webapp_music&method=以下不同的参数获得不同的数据一、获取列表例：method=baidu.ting.billboard.billList&t...原创 2018-12-12 21:45:38 · 1900 阅读 · 0 评论 -
Vue实现仿音乐播放器14-实现搜索页面以及功能
效果实现百度音乐搜索API说明例：method=baidu.ting.search.catalogSug&query=海阔天空参数：query = ” //搜索关键字搜索页面search.vue<template lang="html"> <div class="search"> <div class="search-...原创 2018-12-13 22:04:49 · 1642 阅读 · 0 评论 -
Vue实现仿音乐播放器13-实现音乐榜单跳转显以及播放效果
效果实现百度音乐获取列表API说明例：method=baidu.ting.billboard.billList&type=1&size=10&offset=0参数： type = 1-新歌榜,2-热歌榜,11-摇滚榜,12-爵士,16-流行,21-欧美金曲榜,22-经典老歌榜,23-情歌对唱榜,24-影视金曲榜,25-网络歌曲榜size = 10 /...原创 2018-12-13 22:02:31 · 1241 阅读 · 0 评论 -
Vue实现仿音乐播放器12-实现歌手页面效果
效果实现百度音乐API歌手说明例：method=baidu.ting.artist.getInfo&tinguid=877578参数： tinguid = 877578 //歌手ting id歌手页面artists.vue静态与页面布局 <template lang="html"> <div class="artists">...原创 2018-12-13 21:51:54 · 858 阅读 · 0 评论 -
Vue实现仿音乐播放器11-实现访问百度音乐API实现播放音乐功能
场景从今日推荐页面点击某首歌曲会将这首歌曲的songid通过路由传递到播放界面，播放界面调用百度音乐接口实现数据的获取以及音乐的播放。效果实现配置路由首先在pages目录下新建musicplay.vue作为音乐播放的页面，然后在router下的index.js中中配置路由。 routes: [ { path:"/musicplay", ...原创 2018-12-13 21:44:44 · 882 阅读 · 0 评论 -
Vue实现仿音乐播放器10-更多按钮实现下拉刷新
效果vue-pull-refresh插件github地址：https://github.com/lakb248/vue-pull-refresh在线Demo演示：https://lakb248.github.io/vue-pull-refresh/实现安装插件在项目目录下打开cmd，输入：npm install --save vue-pull-refr...原创 2018-12-13 21:38:49 · 332 阅读 · 0 评论 -
Vue实现仿音乐播放器9-更多按钮实现数据匹配
前言前面已经实现热门榜单等，现在要实现更多按钮，点击更多按钮，将跳转到morelist.vue页面，在此页面会加载10条数据。效果实现在pages下新建morelist.vue更多页面组件代码：<template lang="html"> <div class="more-list"> <div class="wrappe...原创 2018-12-13 16:48:24 · 406 阅读 · 0 评论 -
Vue实现仿音乐播放器8-实现热门榜单效果
效果实现热门榜单和今日推荐实现公用组件1.今日推荐组件Today_Recommend.vue<h2>{{title}}</h2>写成动态标题2.接受参数url等 props:{ title:{ type:String, default:"今日榜单" }, url:{ type:Strin...原创 2018-12-12 22:26:52 · 773 阅读 · 0 评论 -
Vue实现仿音乐播放器7-实现音乐榜单效果
效果实现实现导航组件首先在pages目录下新建musiclist目录，然后在其下新建导航组件music_listnav.vue<template lang="html"> <div class="music-nav"> <div class="log url hd"> <h2>音乐榜单&a原创 2018-12-12 22:23:57 · 871 阅读 · 0 评论 -
Vue实现仿音乐播放器6-实现新歌速递与swiper轮播图切换
前言前面在首页已经完成今日推荐以及访问百度API获取数据，现在继续来完善home主页。效果新歌速递swiper实现轮播图 实现实现新歌速递在components下新建新歌速递组件News_Music.vue此页面与今日推荐基本相同，注意修改1.要显示的内容新增歌手/作者 <div class="author">{{ item.ar...原创 2018-12-12 21:59:22 · 550 阅读 · 0 评论 -
Vue实现仿音乐播放器5-实现今日推荐访问百度音乐API获取数据
前文前面已经实现了音乐导航菜单的切换，现在要实现主页面的今日推荐功能。效果实现实现首页重定向当应用初始化时，默认进入主页面home页，所以在router下的index.js下配置：export default new Router({ routes: [ { path: '/', name: 'Index', re...原创 2018-12-12 21:53:24 · 706 阅读 · 1 评论 -
Vue实现仿音乐播放器4-Vue-router实现音乐导航菜单切换
效果 实现Vue Router 官方文档https://router.vuejs.org/zh/guide/用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue...原创 2018-12-12 21:43:22 · 591 阅读 · 0 评论 -
Vue实现仿音乐播放器3-将项目托管到git以及github
Github新建项目1.登录github，点击右上角新建仓库2.输入仓库名以及描述等，点击Create resposity3.新建仓库完成后，右边有个clone or download,复制SSH地址，关于SSH的配置参考：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/84038383项目拉到本地...原创 2018-12-12 21:35:52 · 594 阅读 · 0 评论 -
Vue实现仿音乐播放器2-新建Vue项目vuemusicplayer
新建项目进入到想新建项目的目录，在此处打开命令行窗口，然后输入：vue init webpack vuemusicplayer其中 webpack 是模板，vuemusicplayer是项目名，然后回车此时会提示你输入项目名，如果直接回车则使用上面默认的项目名。然后依次输入描述、作者，然后直接回车。然后询问你是否安装Vue Router，输入y，安装，其他的不需要...原创 2018-12-12 21:23:25 · 767 阅读 · 0 评论 -
Vue实现仿音乐播放器项目总述以及阶段目录
Github地址https://github.com/badaoliumang/vuemusicplayerVue实现仿音乐播放器各阶段代码https://download.csdn.net/download/badao_liumang_qizhi/10846557百度音乐接口使用示例https://blog.csdn.net/BADAO_LIUMANG_QIZHI/artic...原创 2018-12-13 22:24:51 · 825 阅读 · 0 评论