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

{
    "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

必要引數：

s：搜尋的內容

offset：偏移量（分頁用）

limit：獲取的數量

type：搜尋的型別

歌曲 1

專輯 10

歌手 100

歌單 1000

使用者 1002

mv 1004

歌詞 1006

主播電臺 1009

必要引數：
id：歌曲ID
ids：不知道幹什麼用的，用[]括起來的歌曲ID

3.歌手專輯

必要引數：
limit：獲取的數量(不知道為什麼這個必須加上）

必要引數：
id：歌單ID

必要引數：

id：歌曲ID
lv：值為-1，我猜測應該是判斷是否搜尋lyric格式
kv：值為-1，這個值貌似並不影響結果，意義不明
tv：值為-1，是否搜尋tlyric格式

7.MV

必要引數：
id：mvid
type：值為mp4，視訊格式，不清楚還有沒有別的格式

//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>