Vue2.0 数据抓取及Swiper组件开发 | 音乐 WebApp （三）

Unsplash

本次的系列博文的知识点讲解和代码，主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程，由个人总结并编写，其代码及知识点部分，均有所更改和删减，关于更多 Vue 2.0 的知识和实际应用，还请大家购买课程进行学习实践，该系列博文的发布已得到黄轶老师的授权许可

授权许可

0 系列文章目录

01 Vue2.0 定制一款属于自己的音乐 WebApp
02 Vue2.0 路由配置及Tab组件开发
03 Vue2.0 数据抓取及Swiper组件开发
04 Vue2.0 scroll 组件的抽象和应用
05 Vue2.0 歌手数据获取及排序
06 Vue2.0 歌手列表滚动及右侧快速入口实现
07 Vue2.0 Vuex初始化及歌手数据的配置

1 数据抓取

我们在推荐页会展示轮播图，以及热门歌单列表，这两部分的数据都是来自 QQ 音乐的真实数据，我们先来获取对应的接口

QQ音乐 轮播图

QQ音乐 热门歌单

轮播图及热门歌单为同一接口返回的数据，具体的数据结构点击右侧链接可自行查看，QQ音乐 API，需要注意的是，接口并非一成不变，若是在项目过程中发现一些接口失效，可自行查看 Network 更新最新接口即可

自从 Vue 更新到 2.0 版本之后，官方就不再更新 vue-resource，而是推荐我们使用 axios 来完成 Ajax 请求，我们在本地进行请求，本着不同源需跨域原则，我们还要通过代理来转发我们的请求

// config/index.js

module.exports = {
  dev: {
    ...
    proxyTable: {
      '/api': {
        target: 'https://c.y.qq.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  },
}

// api/recommend.js
import axios from 'axios';

// 轮播图及热门歌单
export function getHomeData() {
    return axios.get('/api/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg')
        .then((res) => {
            return Promise.resolve(res.data)
        })
}

// recommend.vue

运行结果

2 Swiper 组件

Swiper 组件我们采用的是饿了么前端团队推出的 Mint UI 移动端组件库，除了 Swiper 组件外，我们在后续项目中还会引入 Mint UI 的其他组件，所以我们在这里就引入全部组件

// 安装
npm i mint-ui -S

// main.js

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)

// recommend.vue


    
    
        
        
        
    
    


    
热门歌单推荐
    

    

        

        
        
        

        

        

        
    
    

此处的轮播图样式我们通过全局 CSS 文件进行定义，需要做好 CSS 模块化管理，注意单页应用的样式污染问题

运行结果

该章节的内容到这里就全部结束了，源码我已经发到了 GitHub Vue_Music_03 上了，有需要的同学可自行下载

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为优秀作者献上一发助攻吧，谢谢！^ ^