基于 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
      })
    },

7）在App.vue里的mounted()生命周期函数执行requestMiguV3()方法 this.$store.commit('requestMiguV3')

8）此时就可以在其他组件中，使用this.$store.state.swiperList来获取到轮播图的数据，再根据需求将数据渲染到页面上就完成了

end

大家至此应该对在electron里使用爬虫有了基础了解，学艺不精，在这边抛砖引玉了。谢谢大家点开这篇文章，如果方便的话，可以点个小小的赞。

上面提到的那个咪咕音乐的项目已经在github上开源

github地址

    求个star，谢谢了

win版下载地址密码：0000

一个记录自己学习的专栏：从0开始的Oasis Engine学习笔记

respect by myself