最近我在開發一個音樂網站的時候,選擇了用Vue來搭建前端,但是遇到了一個問題,就是怎么將QQ音樂的數據倒入到Vue中。經過一番研究,我終于找到了解決方案。
首先,在Vue中引入jQuery,因為要用到jQuery的ajax函數來獲取QQ音樂的數據。在index.html中添加如下代碼:
<!-- 引入jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
接著,我們需要編寫一個獲取QQ音樂數據的函數:
function getQQMusicData() { return new Promise((resolve, reject) =>{ $.ajax({ url: 'https://c.y.qq.com/soso/fcgi-bin/client_search_cp', dataType: 'jsonp', data: { ct: 24, qqmusic_ver: 1298, new_json: 1, remoteplace: 'txt.yqq.song', t: 0, aggr: 1, cr: 1, catZhida: 1, lossless: 0, flag_qc: 0, p: 1, n: 20, w: '周杰倫', g_tk: 5381, jsonpCallback: 'MusicJsonCallback', loginUin: 0, hostUin: 0, format: 'jsonp', inCharset: 'utf8', outCharset: 'utf-8', notice: 0, platform: 'yqq.json' }, success: function(data) { resolve(data); }, error: function(error) { reject(error); } }); }); }
這里的getQQMusicData函數使用了Promise,因為ajax是異步函數,在獲取數據的時候需要用到Promise來獲取返回值。接下來,我們需要在Vue中使用這個函數:
created() { getQQMusicData().then(data =>{ this.musicList = data.data.song.list; }).catch(error =>{ console.log(error); }); }
這里我將獲取到的數據存儲在了musicList中,可以在Vue的模板中使用這個變量來顯示數據。
至此,我們成功地將QQ音樂的數據倒入Vue中了,可以愉快地繼續開發了。
上一篇美的css系統使用指南
下一篇css修改文本字體顏色