VueMusic-2.今日推荐-数据获取

1.redirect:'/Home'(重定向)；

2.安装npm install --save axios

3.配置axios的

import Axios from 'axios'
Vue.prototype.$axios=Axios

4.跨域处理：

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

Vue.prototype.HOST="/baidu_music_api"

5.实例：

<template>
<div>今日推荐</div>
</template>

<script>
export default{
name:"todayRecommend",
data(){
return{

}
},
mounted(){
var url=this.HOST+"/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=6&offset=0"
this.$axios.get(url)
.then(res => {
console.log(res)
}).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://www.cnblogs.com/xiao-peng-ji/p/11409528.html