今天把我去年开发等可视化爬虫SPY整理了下，虽然它还在demo阶段，但我已经在经常使用来爬取一些数据了，用的过程还是比较方便的，区别于其他纯代码的爬虫工具。

SPY用的数据库是mongod，我用的数据库管理工具是

mongobooster。

本篇把SPY的基本使用流程介绍一下。

1、打开程序，界面是下图这样的：

右上图，我把目前的主要功能罗列了下，可以对照下；

一个爬取数据的过程，我分解为：

step1：

浏览目标网站，提取目标网站的网页结构

step2:  

编写代码，这边用的是纯javascript，我封装了些简单的接口

step3:  

输出爬取结果

2、接下来，我以百度的首页为例子，介绍整个使用流程，地址栏输入百度网址，然后点击刷新（下图红圈）（或回车）

3、打开后，界面如下图，会看到熟悉的chrome浏览器界面，默认应该是开启了chrome的调试工具（见下图）

如果没有自动开启chrome的调试栏，可以，点击菜单栏－－view－－toggle developer tools，开启（下图）。

4、用chrome的inspect功能。如果你学习过爬虫或者写过前端，那你应该很熟悉inspect功能，如果不熟悉可以查找chrome开发者工具的相关资料进行学习。

5、这边我要爬取首页的所有文章标题，发现都存在于一个

class="s-text-content"的div的h2里面。

6、切换到console栏，编写简单的js代码。

var doms=document.querySelectorAll('.s-text-content');

doms.forEach(function(dom,index){

var title=dom.innerText;

console.log(title);

});

回车，结果如下：

由于百度首页是异步加载的，这边我们把页面滑动到最下面，然后再运行下代码。

对于异步加载的页面，可以用spy的定时器功能。这个等回头我再补一篇教程。

7、把代码复制到step2里的输入框，然后运行。

var res=[];

var doms=document.querySelectorAll('.s-text-content');

doms.forEach(function(dom,index){

var title=dom.innerText;

res.push(title)

});

spy.getResult(res)

这边调用了我封装的接口，spy.getResult()，把爬取的结果保存为json文件。

默认调用接口后会自动保存至Downloads路径的Spyfari＋‘数字’路径。

如下图

可以点击下保存按钮，另存为其他路径。

－－－－－－－－－－－－－－－－－－－－－－－

一个完整的爬取流程就是这样。

SPY的下载链接: 

https://pan.baidu.com/s/1kUXk1BT

密码: bxaq

暂时只有MAC版本

使用过程有任何问题请跟本号联系。

后续我会把

定时任务；

自动下载图片／文件；

接入mongod数据库；

等内容介绍完整。

欢迎长按二维码

关注本号

本号发布内容主要为设计&科技方面