前文

前面已经实现了音乐导航菜单的切换，现在要实现主页面的今日推荐功能。

效果

实现

实现首页重定向

当应用初始化时，默认进入主页面home页，所以在router下的index.js下配置：

export default new Router({routes: [{path: '/',name: 'Index',redirect:"/home",component: Index,children:[

实现在主页面引入今日推荐组件

首先在components下新建组件Today_recommend.vue组件

<template lang="html"><div class="">今日推荐</div>
</template><script>export default {}
</script><style lang="css">
</style>

然后想在home.vue这个页面中引入组件Today_recommend.vue，打开home.vue

<template lang="html"><div class=""><TodayRecommend/></div>
</template><script>
import TodayRecommend from "../components/Today_Recommend"
export default {name:"home",components:{TodayRecommend}
}
</script><style lang="css">
</style>

效果

接下来就是完善今日推荐页面

完善今日推荐页面

完善样式

加入scoped范围限制

<style scoped>.mod-albums {background-color: #fff;padding: 10px 17px;
}.hd {display: flex;margin: 14px 0 18px 0;
}.hd h2 {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;margin: 0;padding: 0;font-size: 20px;
}.hd div {width: 64px;font-size: 12px;text-align: right;
}.mod-albums .gallery {overflow: hidden;margin: 0 -5px;
}.mod-albums .gallery .card {width: 33.3%;float: left;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 5px 10px;
}.mod-albums .gallery .card .album {position: relative;
}.mod-albums .gallery .card img {width: 100%;height: auto;border: 1px solid #eee;
}.mod-albums .gallery .card .name {font-size: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 4px;line-height: 14px;max-height: 28px;margin-bottom: 2px;
}</style>

引入百度音乐接口

具体参照：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/84979978

API接口：

http://tingapi.ting.baidu.com/v1/restserver/ting

配置axios跨域访问

本地代理配置

打开config下的index.js

  proxyTable: {"/baidu_music_api": {target: "http://tingapi.ting.baidu.com",changeOrigin: true,pathRewrite: {'^/baidu_music_api': ''}}},

注：

target：要请求的第三方平接口，这里是百度音乐API :http://tingapi.ting.baidu.com/v1/restserver/ting

changeOrigin: true

在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题。

pathRewrite:路径重写

替换target中的请求地址,即别名。

安装axios

到项目跟目录下，打开命令行窗口，输入：

npm install --save axios

然后重启项目

入口文件main.js中引入axios

在项目中找到src下的main.js(入口文件)打开

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Axios from "axios"Vue.prototype.$axios  = Axios;
Vue.prototype.HOST = "/baidu_music_api"
Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

注：

import Axios from "axios" 引入axios

Vue.prototype.$axios = Axios; 在vue中使用axios，即挂载axios

跨域访问请求数据

在要实现访问的页面，假如加载完就要获取数据，在,mounted中：

 mounted(){var url = this.HOST +"/v1/restserver/ting?method=baidu.ting.billboard.billList&type= "+ this.type+"&size=6&offset=0";this.$axios.get(url).then(res => {this.todayRecommend = res.data.song_list}).catch(error => {console.log(error);})}

将获取的数据获取存放，然后遍历获取并显示数据

完整vue代码：

<template lang="html"><div class= "mod-albums"><div class="hd log url"><h2>{{title}}</h2><router-link :to="{ name:'MoreList',params:{musictype:this.type,title:title}}" tag= "div">更多</router-link></div><div class="container"><div class="gallery"><div class="scroller"><div class="card url" v-for="(item,index) in todayRecommend" :key= "index"><div class= "album"><img :src="item.pic_big" :alt="item.title"><div class="name">{{ item.title }}</div></div></div></div></div></div></div>
</template><P><script>
export default{name:"todayRecommend",data(){return{todayRecommend:[]}},props:{title:{type:String,default:"今日榜单"},type:{type:String,default:"1"}},mounted(){var url = this.HOST +"/v1/restserver/ting?method=baidu.ting.billboard.billList&type= "+ this.type+"&size=6&offset=0";this.$axios.get(url).then(res => {this.todayRecommend = res.data.song_list}).catch(error => {console.log(error);})}
}
</script><style scoped>.mod-albums {background-color: #fff;padding: 10px 17px;
}.hd {display: flex;margin: 14px 0 18px 0;
}.hd h2 {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;margin: 0;padding: 0;font-size: 20px;
}.hd div {width: 64px;font-size: 12px;text-align: right;
}.mod-albums .gallery {overflow: hidden;margin: 0 -5px;
}.mod-albums .gallery .card {width: 33.3%;float: left;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 5px 10px;
}.mod-albums .gallery .card .album {position: relative;
}.mod-albums .gallery .card img {width: 100%;height: auto;border: 1px solid #eee;
}.mod-albums .gallery .card .name {font-size: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 4px;line-height: 14px;max-height: 28px;margin-bottom: 2px;
}</style>

请求数据效果

此部分代码对应分阶段代码中阶段二

分阶段代码下载位置：

https://download.csdn.net/download/badao_liumang_qizhi/10846557

Vue实现仿音乐播放器5-实现今日推荐访问百度音乐API获取数据相关推荐

电脑端音乐播放器html5,分享|5 个很酷的音乐播放器
你喜欢音乐吗?那么 Fedora 中可能有你正在寻找的东西.本文介绍在 Fedora 上运行的各种音乐播放器.无论你有庞大的音乐库,还是小一些的,抑或根本没有,你都可以用到音乐播放器.这里有四个图形程 ...
java音乐播放器的应用价值,基于JAVA的音乐播放器开发.docx
摘要:从工业革命以来,科技日新月异,计算机网络现在已经慢慢融入我们的平常生活和工作,计算机网络作为信息传播的一大重要组成工具,可以这样说我们以往单一的生活方式在悄悄的被网络改变,正是因如此,网络变成了 ...
php文件添加音乐播放器,window_win10系统自带Groove音乐播放器在哪？自带Groove音乐播放器添加音乐等功能的使用教程，　　播放器在哪？1 - phpStudy...
win10系统自带Groove音乐播放器在哪?自带Groove音乐播放器添加音乐等功能的使用教程播放器在哪? 1.点击桌面的左下端"开始菜单"符号,然后在右上角,找到" ...
HTML5期末大作业：在线音乐播放器网站设计——html5全屏的音乐列表播放器页面源码 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设
HTML5期末大作业:在线音乐播放器网站设计--html5全屏的音乐列表播放器页面源码 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设 ...
html5中音乐播放器怎么写,打造属于自己的音乐播放器 HTML5之audio标签
我的音乐播放器 HTML5中增加了Audio和Video标签,这两个标签的用法非常相似.功能却是相当强大,我们先来看一下Audio标签各个浏览器的支持情况.这里用的依然是Can I Use这个在线网站 ...
基于IOS音乐播放器在线歌词同步小程序系统（音乐小程序）
目录目录 1 摘要 3 Abstract 4 1 导论 6 1.1 背景问题 6 1.2 选题意义 6 1.3 本文内容 7 2 核心功能 9 2.1 功能调研 9 2.2 可行性分析 12 ...
计算机音乐播放器设置,Win7系统下设置默认音乐播放器的两种方法
可能很多新手用户不知道Win7系统下怎么设置默认音乐播放器?我们习惯将某一程序设置为默认打开方式,音乐播放器也可以这样子的.一些用户想把酷狗播放器.或者qq音乐设置为默认音乐播放器,只要打开音乐文件, ...
android音乐播放器横评,14款Android平台音乐播放器横评
最终结果与总体评价综合实力奖推荐:天天动听经过对14款Android音乐播放器一个项目的主观评价和其他七个项目的数据测试的结果加总,国产优秀播放软件天天动听凭借在每轮测试中均表现出的不俗成绩最终 ...
PHP制作音乐播放器制作教案,js制作简单的音乐播放器的示例代码
一.设计目的: 1.随着现在人民生活质量的提高同样伴随着生活压力的增大,越来越多的人追求越来越多的娱乐,其中一种娱乐方式就是音乐,于是突发奇想,制作一个音乐播放器. 2.主要功能: 1 支持循环自动播 ...

Vue实现仿音乐播放器5-实现今日推荐访问百度音乐API获取数据

前文

效果

实现