vue+axios+cheerio實現簡易爬蟲

寫在前面的話：

　　最近本人沉迷慈善事業，順帶夾帶一點微乎其微的暴富夢想（買彩票）。看着密密麻麻的走勢圖腦子疼，還要自己一步一步分析。麻煩的很呢！

所以發揮我程序猿的特長，把這些數據爬下來用程序來分析好了。那么作為一個實干派，擼起袖子開整。

正文：

目標：爬取福建福彩網（http://www.fjcp.cn/index.php）雙色球信息進行邏輯分析。

具體地址為:http://www.fjcp.cn/index.php/index/charts/ssq.html?limt=30:頁面如圖:

工具：前端框架使用vue，ui框架使用elment,發送請求使用axios，邏輯分析使用cheerio進行過濾。

　　首先新建一個vue工程，頁面結構如下：

<template>
  <div class="crawler">
    <el-input v-model="input" placeholder="輸入爬取的地址"></el-input>
    <el-button type="success" @click="getData()">爬取</el-button>
  </div>
</template>

頁面效果：

1、請求數據：

首先安裝數據請求插件 axios ，在npm 中 輸入 npm install axios 命令 然后在主頁中引用 ,接着對請求的網站進行參數的配置，

var axios = require("axios");
axios({
          method: "post",
          url:"http://www.fjcp.cn/index.php/index/charts/ssq.html?limt=30",//請求的鏈接地址
          headers: {
            "Access-Control-Allow-Origin": "*",
            "Content-Type": "text/plain",
          },
          params: {},
        })
          .then((resp) => {
            //如果成功將在這里進行后續的邏輯操作
          })
          .catch((err) => {
          //如果請求失敗將在這里進行后續的邏輯操作
         
          });                

 　　點擊爬取按鈕試試成功與否。可是卻發現數據爬取不了，打開開發者工具定睛一瞧 好家伙報錯了，錯誤如下圖：

 　　洋文看不懂怎么辦，那好辦打開翻譯工具，翻譯結果如下:

 　　一番百度之后得出結果是跨域的原因，可以使用設置代理的方式來解決跨域問題。幸虧axios 中對設置代理進行了封裝，我們只需要設置幾個參數就可以輕松實現代理。在vue項目中找到vue.config.js 文件進行設置，具體代碼如下:

    devServer: {
        open: true, //是否自動彈出瀏覽器頁面
        host: "localhost",
        port: '8081',
        https: false,
        hotOnly: false,
        proxy: {
            '/fjcp': {
                target: 'http://www.fjcp.cn', // 接口域名http://www.fjcp.cn/
                changeOrigin: true, // 是否跨域
                secure: false, // 如果是https接口，需要配置這個參數為true`
                pathRewrite: {
                    '^/fjcp': '' // 需要rewrite重寫的
                }
            }
        },
    }

 那么在原先的鏈接地址就可以從 http://www.fjcp.cn/index.php/index/charts/ssq.html?limt=30 改成 http://localhost:8081/fjcp/index/charts/ssq.html?limt=30 完整代碼如下：

var axios = require("axios");
axios({
          method: "post",
          url:"http://localhost:8081/fjcp/index/charts/ssq.html?limt=30",//請求的鏈接地址
          headers: {
            "Access-Control-Allow-Origin": "*",
            "Content-Type": "text/plain",
          },
          params: {},
        })
          .then((resp) => {
            //如果成功將在這里進行后續的邏輯操作
          })
          .catch((err) => {
          //如果請求失敗將在這里進行后續的邏輯操作
         
          });     

 　　到目前為止已經完成了拷取數據的功能，接下來就是對數據進行過濾。

2、過濾數據：

　　過濾數據就是對指定的數據進行篩選，那么cheerio是一個對元素節點操作不錯的插件。cheerio 是cheerio實現了jQuery的一個子集，去掉了jQuery中所有與DOM不一致或者是用來填瀏覽器的坑的東西，重現了jQuery最美妙的API。具體步驟如下：

1）首先進行  cheerio 的引用，安裝 npm install cheerio ，

2）安裝成功之后對數據進行引用：var cheerio-require("cheerio")。

安裝完之后我們要明白我們需要對那些節點進行提取分析，大膽的打開開發者工具，找到保存信息的元素，發現所有的元素保存在了ID名稱為“table1”的table元素下面，那么我們就可以根據該id 獲取其內容，通過cheerio 的內置方法獲取其數據。

 

 　　該怎么分析的步驟就不詳寫了，接下來附上一個小栗子截圖，該例子爬取了最新的600期雙色彩數據 並對紅球和藍球的個數進行了匯總，通過echarts 柱狀圖的形式進行匯總呈現。

 

 

 

 

知識鏈接：

1.axios中文網

2.cheerio官方文檔

碼字不易，如果覺得不錯給個贊咯！