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