vue webapp之music（十）歌手数据接口抓取

翟敏1201

于 2018-09-03 21:46:54 发布

阅读量639

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/chaitong2204/article/details/82355287

VUE 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一个基于QQ音乐API的歌手数据获取接口的设计与实现过程，详细展示了如何使用jsonp进行跨域请求，以及如何在Vue组件中调用该接口来展示歌手列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.新建singer.js用来写接口数据的相关方法、

import jsonp from 'common/js/jsonp'
import {commmonParams, options} from './config'
export function getSingerList() {
  const url = 'https://c.y.qq.com/v8/fcg-bin/v8.fcg'
  const data = Object.assign({}, commonParams, {
    channel: 'singer',
    page: 'list',
    key: 'all_all_all',
    pagesize: 100,
    pagenum: 1,
    hostUin: 0,
    needNewCode: 0,
    platform: 'yqq',
    g_tk: 486191976
  })
  return jsonp(url, data, options)
}

2.在组件内引用调用接口

<template>
    <div class="singer">
      歌手
    </div>
</template>

<script>
import {getSingerList} from 'api/singer'
import {ERR_OK} from 'api/config'
export default {
  data () {
    return {
      singers: []
    }
  },
  created () {
    this._getSingerList()
  },
  methods: {
    _getSingerList() {
      getSingerList().then((res) => {
        if( res.code === ERR_OK) {
          console.log(res)
          this.singers = res.data.list
        }
      })
    }
  }
}
</script>