基于 Vue2.x + Node.js + electron 的爬虫实战-一一网

这是我参与更文挑战的第8天，活动详情查看：更文挑战

前言

我基于Vue2.x + Node.js + electron开发咪咕音乐桌面版应用时，需要获取到咪咕音乐首页的轮播图、歌单推荐、歌曲排行数据，首先，通过抓包发现接口返回的数据很残缺，便想到使用爬虫来获取首页数据。

原网页效果

桌面端实现效果

明确需求

需要爬取咪咕音乐首页轮播图，推荐歌单、歌曲排行榜。
将爬取到的数据进行整理储存。
在应用第一次启动时执行爬取和数据处理。
加上一点点css使布局看起来合理

需求实现

安装和引入依赖的库：request、cheerio

1）第一个库request是node.js自带的库，用来获取网页数据

2）第二个库cheerio是方便用来对爬取到的网页数据进行二次处理的库，语法与jquery类似，非常方便

获取网页数据

1）写一个Promise获取网页的方法，在状态码为200时，返回网页数据，否则返回错误信息

const requestPromise = (url) => {
  return new Promise((resolve, reject) => {
    request(url, (error, response, body) => {
      if (response.statusCode === 200) {
        resolve(body)
      } else {
        reject(error)
      }
    })
  })
}

复制代码

2）由于我们需要对数据进行储存，所以在vueX里使用该方法进行请求数据

    requestMiguV3 (state) {
      requestMigu.requestPromise('https://music.migu.cn/v3').then(res => {
          console.log(res)
      })
    },
复制代码

3）这样就应该可以顺利获取到 https: //music.migu.cn/v3 这个网站HTML数据，再使用 cheerio 对 res 进行处理。

const $ = cheerio.load(res)

4）cheerio基本语法介绍

$('.class').attr('attr')
在使用cheerio的帮助下只需要知道类名就可以轻松找到HTML位置

在DevTool中选择复制selector可以快速准确的拿到唯一的类名

5）通过观察根据需求，我们需要img标签的src属性和a标签的herf属性

通过each((index, item)) => {}可以批量处理数据

用下面的代码就可以获取到每一张轮播图的src

$('#carousel > li > a').each((i, item) => {
          state.swiperList.push({
            picurl: 'http:' + $('#carousel > li:nth-child(' + (i + 1) + ') > a > img').attr('src'),
            url: $(item).attr('href')
          })
        })
复制代码

6）同样的方法获取到推荐歌单，和排行榜

 完整代码
复制代码

    requestMiguV3 (state) {
      requestMigu.requestPromise('https://music.migu.cn/v3').then(res => {
        const $ = cheerio.load(res)
        const listId = []
        const hotbgPic = [
          require('../assets/newsong.png'),
          require('../assets/hotsong.png'),
          require('../assets/original.png')
        ]
        $('#playlist > div:nth-child(2) > div > div.wrapper-items > div > div > div.item-box > span').each((i, item) => {
          listId.push($(item).attr('data-id'))
        })
        $('#playlist > div:nth-child(2) > div > div.wrapper-items > div > div > div.item-box > a > img').each((i, item) => {
          state.playList.push({
            id: listId[i],
            name: $(item).attr('alt'),
            url: 'http:' + $(item).attr('data-src')
          })
        })
        $('#carousel > li > a').each((i, item) => {
          state.swiperList.push({
            picurl: 'http:' + $('#carousel > li:nth-child(' + (i + 1) + ') > a > img').attr('src'),
            url: $(item).attr('href')
          })
        })
        $('#billboard > div.back-wrapper > div > div.wrapper-left > div.swiper-container > ul > li > a > img').each((i, item) => {
          state.topPic.push({
            pic: 'http:' + $(item).attr('data-src'),
            bgpic: hotbgPic[i]
          })
        })
        state.isGet = true
      })
    },
复制代码