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 歌手列表滚动及右侧快速入口实现

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

<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.js

import 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 :src="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" :src="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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coding迪斯尼

寿司快卖,创建一个运行在电脑,手机及Pad上的多屏游戏

本节开始,我们将设计一个养成类游戏。游戏主题是创建一家寿司店,你是主厨,当客户点餐后,你根据菜单配置寿司。我们会先把游戏设计成页面游戏,然后通过不断的调试,将游...

11120
来自专栏FreeBuf

Chrome XSS审计之SVG标签绕过

在一年前,在我的私人Twitter账户 brutal secret ,我分享了一个有趣的方法来通过审计绕过chrome 的xss过滤器。我们将从黑盒测试的角度...

36050
来自专栏Material Design组件

Human Interface Guidelines —— 状态栏(Status Bars)

30360
来自专栏无原型不设计

UI设计规范:单选按钮 vs 复选框,没那么简单

无论是网页设计,还是移动app设计,都经常用到单选按钮和复选框这两个组件。这两个组件看似意义明确,很好区分,但在实际设计中却很容易用错,带来不好的用户体验。 ...

31930
来自专栏MixLab科技+设计实验室

App之底部导航栏的设计

hi,这是系列文章:App之xxx的第2篇,第1篇我总结了App之“文字”的设计技巧。今天来总结下app的底部导航栏的设计。 我为什么写这个系列的文章。因为我正...

442110
来自专栏IMWeb前端团队

全响应式web前端开发

本文作者:IMWeb Terrance 原文出处:IMWeb社区 未经同意,禁止转载 ? Responsive web design (RWD) i...

35170
来自专栏HTML5学堂

聊一聊“@font-face”

在@font-face处理兼容中出现了一个#iefix这个东东?到底是神马东西呢? 案例: ? 首先先了解关于@font-face的基本知识 1、@font-...

31450
来自专栏皮振伟的专栏

[qemu][vnc]虚拟化平台上远程连接遇到的几个问题分析

前言: 虚拟化平台上,不管是调试,还是实际使用,都离不开远程连接。在使用vnc、spice的时候,遇到过一些问题。 分析: 1,frame buffer 先说...

1.2K80
来自专栏Zchannel

Yu Writer:macos系统不可多得的Markdown写作工具

14420
来自专栏ytkah

html5开发制作,漂亮html5模板欣赏,H5网站建设

html5是什么? HTML5 是下一代的 HTML(超文本标记语言,网页的组成部分),HTML5是web开发世界的一次重大的改变,能适配pc、手机等各终端,跨...

1.6K60

扫码关注云+社区

领取腾讯云代金券