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

axios

//main.jsimport axios from 'axios'Vue.prototype.$axios = axios;//a.vuecreated() {    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>