vue从入门到放弃---axios 和 rap模拟数据

axios

//main.js
import axios from 'axios'
Vue.prototype.$axios = axios;

//a.vue
created() {
this.$axios.get(`http://rapapi.org/mockjs/21575/index`).then((response) => {
console.log(response)
}, (error) => {
// error
console.log(error)
});
},

淘宝rapapi

文档

http://rapapi.org/workspace/myWorkspace.do?projectId=2348#13802

示例

{
"data|10": [
{
"id|+1": 103,
"title": "@TITLE"
}
]
}

网易云api:

1.搜索

抓取到的信息如下

Full request URI：http://music.163.com/api/search/pc

Key: hlpretag

Value:

Key: hlposttag

Value:

Key: s

Value: \345\226\234\346\254\242\344\275\240

Key: offset

Value: 0

Key: total

Value: true

Key: limit

Value: 100

Key: type

Value: 1

URL：POST http://music.163.com/api/search/pc

必要参数：

s：搜索的内容

offset：偏移量（分页用）

limit：获取的数量

type：搜索的类型

歌曲 1

专辑 10

歌手 100

歌单 1000

用户 1002

mv 1004

歌词 1006

主播电台 1009

2.歌曲信息

Full request URI: http://music.163.com/api/song/detail/?id=28377211&ids=%5B28377211%5D

GET http://music.163.com/api/song/detail/

必要参数：

id：歌曲ID

ids：不知道干什么用的，用[]括起来的歌曲ID

3.歌手专辑

Full request URI: http://music.163.com/api/artist/albums/166009?id=166009&offset=0&total=true&limit=5

URL：GET http://music.163.com/api/artist/albums/歌手ID

必要参数：

limit：获取的数量(不知道为什么这个必须加上）

4.专辑信息

Full request URI: http://music.163.com/api/album/2457012?ext=true&id=2457012&offset=0&total=true&limit=10

URL：GET http://music.163.com/api/album/专辑ID

5.歌单

Full request URI: http://music.163.com/api/playlist/detail?id=37880978&updateTime=-1

URL：GET http://music.163.com/api/playlist/detail

必要参数：

id：歌单ID

6.歌词

Full request URI: http://music.163.com/api/song/lyric?os=pc&id=93920&lv=-1&kv=-1&tv=-1

URL：GET http://music.163.com/api/song/lyric

必要参数：

id：歌曲ID

lv：值为-1，我猜测应该是判断是否搜索lyric格式

kv：值为-1，这个值貌似并不影响结果，意义不明

tv：值为-1，是否搜索tlyric格式

7.MV

Full request URI: http://music.163.com/api/mv/detail?id=319104&type=mp4

URL：GET http://music.163.com/api/mv/detail

必要参数：

id：mvid

type：值为mp4，视频格式，不清楚还有没有别的格式

歌手信息及列表：

https://api.imjad.cn/cloudmusic/?type=artist&id=6452

单曲信息：

https://api.imjad.cn/cloudmusic/?type=song&id=186001&br=128000

搜索歌手：

https://api.imjad.cn/cloudmusic/?type=search&s=林俊杰

//list.vue
<template>
<div>
<header>
<input type="text" v-model="keyword" placeholder="请输入歌手/歌曲名">
<button @click="search()">搜素</button>
</header>
<div class="page-tab-container">

<mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>
<mt-tab-container-item id="tab-container1" class="tab-container">

<ul class="listul">
<li v-for="(todo,index) in myData" :key="index" :dataid="todo.id" @click="play(todo.id)">
{{ todo.name }} - {{ todo.ar[0].name }}
</li>
</ul>

</mt-tab-container-item>
<mt-tab-container-item id="tab-container2" class="tab-container">
<ul class="lyricul">
<li v-for="ly in lyric">
{{ ly }}
</li>
</ul>
</mt-tab-container-item>
<mt-tab-container-item id="tab-container3" class="tab-container">
<div class="songMes">
<br><br><br>专辑：<br>{{ songMes.name }}<br><br><img :src="songMes.picUrl">
</div>
</mt-tab-container-item>
</mt-tab-container>
</div>
<!--  <p><audio :src="currentUrl" controls autoplay></audio></p>-->
<footer>
<audio :src="currentUrl" controls autoplay></audio>
<div id="playerProgress">
<div class="time currentTime">00:00</div>
<div class="progressbar" id="progressbar"><span class="bar"></span></div>
<div class="time totalTime">00:00</div>
</div>
<div id="playerCtrl">
<div>
<a class="button loop"></a>
</div>
<div>
<a class="button prev"></a>
</div>
<div>
<a class="button play"></a>
</div>
<div>
<a class="button next"></a>
</div>
<div>
<a class="button collect"></a>
</div>
</div>
</footer>

</div>
</template>

<script>
export default {

data() {
return {
myData: [],
currentUrl: '',
keyword: '',
active: 'tab-container1',
lyric: [],
songMes: ''

}
},
methods: {
/*
* 播放
*/
play(id) {
this.$axios.get(`https://api.imjad.cn/cloudmusic/?type=song&id=${id}&br=128000`).then((response) => {
this.currentUrl = response.data.data[0].url;
this.$axios.get(`https://api.imjad.cn/cloudmusic/?type=lyric&id=${id}`).then((response) => {
var lrc = response.data.lrc.lyric
//渲染歌词
this.lyric = parseLyric(lrc);

//拆分歌词为数组
function parseLyric(lrc) {
var lyrics = lrc.split("\n");
var lrcObj = {};
for (var i = 0; i < lyrics.length; i++) {
var lyric = decodeURIComponent(lyrics[i]);
var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
var timeRegExpArr = lyric.match(timeReg);
if (!timeRegExpArr) continue;
var clause = lyric.replace(timeReg, '');
for (var k = 0, h = timeRegExpArr.length; k < h; k++) {
var t = timeRegExpArr[k];
var min = Number(String(t.match(/\[\d*/i)).slice(1)),
sec = Number(String(t.match(/\:\d*/i)).slice(1));
var time = min * 60 + sec;
lrcObj[time] = clause;
}
}
return lrcObj;
}

//歌词滚动

}, (error) => {
console.log(error)
});

//歌曲信息
this.$axios.get(`https://api.imjad.cn/cloudmusic/?type=detail&id=${id}`).then((response) => {
this.songMes = response.data.songs[0].al;
console.log(this.songMes)
}, (error) => {
console.log(error)
});
}, (error) => {
console.log(error)
});
},

/*
* 搜索
*/
search() {
this.$axios.get(`https://api.imjad.cn/cloudmusic/?type=search&s=${this.keyword}&limit=40`).then((response) => {
console.log(response.data.result.songs);
this.myData = response.data.result.songs;
}, (error) => {
console.log(error)
});
}
},

created() {
//默认歌单
this.$axios.get("https://api.imjad.cn/cloudmusic/?type=artist&id=6452&limit=20&offset=0").then((response) => {
// success
response.data.tags = response.data.tags
this.myData = response.data.hotSongs
this.singer = response.data.artist.name
//console.log(response.data.artist.name);

}, (error) => {
// error
console.log(error)
});
}

}
</script>

<style>

.listul {
width: 80%;
margin: 50px auto 0;
}

.listul li {
padding: 5px 0
}

.lyricul {
width: 80%;
margin: 50px auto 0
}

.lyricul li {
padding: 5px 0
}

.songMes {
width: 80%;
margin: 0 auto
}

.songMes img {
width: 100%;
border-radius: 50%;
-webkit-animation: circle 20s linear infinite;
}

.tab-container {
height: 1200px
}

@-webkit-keyframes circle {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>