vue+axios+cheerio实现简易爬虫

写在前面的话:

  最近本人沉迷慈善事业,顺带夹带一点微乎其微的暴富梦想(买彩票)。看着密密麻麻的走势图脑子疼,还要自己一步一步分析。麻烦的很呢!

vue+axios+cheerio实现简易爬虫

所以发挥我程序猿的特长,把这些数据爬下来用程序来分析好了。那么作为一个实干派,撸起袖子开整。

正文:

目标:爬取福建*网(http://www.fjcp.cn/index.php)双色球信息进行逻辑分析。

具体地址为:http://www.fjcp.cn/index.php/index/charts/ssq.html?limt=30:页面如图:

vue+axios+cheerio实现简易爬虫

工具:前端框架使用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>

页面效果:

vue+axios+cheerio实现简易爬虫

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) => {
          //如果请求失败将在这里进行后续的逻辑操作
         
          });                

   点击爬取按钮试试成功与否。可是却发现数据爬取不了,打开开发者工具定睛一瞧 好家伙报错了,错误如下图:

vue+axios+cheerio实现简易爬虫

   洋文看不懂怎么办,那好办打开翻译工具,翻译结果如下:vue+axios+cheerio实现简易爬虫

   一番百度之后得出结果是跨域的原因,可以使用设置代理的方式来解决跨域问题。幸亏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 的内置方法获取其数据。

vue+axios+cheerio实现简易爬虫

 

   该怎么分析的步骤就不详写了,接下来附上一个小栗子截图,该例子爬取了最新的600期双色彩数据 并对红球和蓝球的个数进行了汇总,通过echarts 柱状图的形式进行汇总呈现。

 

 vue+axios+cheerio实现简易爬虫

 

 

知识链接:

1.axios中文网

2.cheerio官方文档

码字不易,如果觉得不错给个赞咯!

上一篇:nodeJs 写个爬虫小玩意


下一篇:axios发送formdata请求