写在前面的话：
最近本人沉迷慈善事业，顺带夹带一点微乎其微的暴富梦想（买彩票）。看着密密麻麻的走势图脑子疼，还要自己一步一步分析。麻烦的很呢！
所以发挥我程序猿的特长，把这些数据爬下来用程序来分析好了。那么作为一个实干派，撸起袖子开整。
正文：
目标：爬取福建*网（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中文网