Vue2.0 数据抓取及Swiper组件开发

Unsplash

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

授权许可

0 系列文章目录

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

1. 数据抓取

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

QQ音乐 轮播图

QQ音乐 热门歌单

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

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

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

// api/recommend.jsimport 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<script type="text/ecmascript-6">
  import { getHomeData } from 'api/recommend'
  import { ERR_OK } from 'api/config'

  export default {
    created() {      this._getHomeData()
    },    methods: {
      _getHomeData() {
        getHomeData().then((res) => {          if (res.code === ERR_OK) {            console.log(res.data.slider)            console.log(res.data.songList)
          }
        })
      }
    }
  }</script>

运行结果

2. Swiper 组件

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

// 安装npm i mint-ui --S

// main.jsimport MintUI from 'mint-ui'import 'mint-ui/lib/style.css'Vue.use(MintUI)

// recommend.vue<div v-if="slider.length" class="slider-wrapper">
    <mt-swipe :auto="4000">
    <mt-swipe-item v-for="(item, index) in slider" :key="index">
        <a :href="item.linkUrl">
        <img :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="item.picUrl" class="slider-img">
        </a>
    </mt-swipe-item>
    </mt-swipe></div><div class="recommend-list">
    <h1 class="list-title">热门歌单推荐</h1>
    <ul>
    <li v-for="(item, index) in discList" :key="index" class="item">
        <div class="icon">
        <img width="60" height="60" :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="item.picUrl">
        </div>
        <div class="text">
        <h2 class="desc" v-html="item.songListDesc"></h2>
        <p class="name" v-html="item.songListAuthor"></p>
        </div>
    </li>
    </ul></div>

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

运行结果

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

End of File

作者：Nian糕
链接：https://www.jianshu.com/p/de4a631f4a4a