[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[35],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34},"loginname","Lukang689","page",1,"limit",20,"total","id","33648","avatar_url","https://avatars2.githubusercontent.com/u/30074723?v=4","githubUsername","create_at","2018-06-04 13:08:27.941","score",15,"topic_count",0,"reply_count",3,"is_star",false,{"_20":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":34,"_48":34,"_31":49,"_50":51,"_25":52,"_53":54},"34362","author_id","30966","tab","share","content","[WebSplider](http://splider.docmobile.cn)\r\n===============\r\n\r\n基于NodeJS的在线爬虫系统。支持提供在线数据API。\r\n\r\n项目地址:https://github.com/LuckyHH/WebSplider\r\n\r\n1、当你想在自己的网站添加一个小的新闻模块时，你可以利用WebSplider爬虫爬取指定网站的数据，然后在后端或者前端请求数据接口，再将获得的数据构造到你的网页上。\r\n\r\n2、当你想知道自己追的剧，小说等更新没有，你可以抓取指定网站的数据(比如说视频级数)，然后在后台请求数据接口，将数据保存到你的数据库中，设置一个定时器，定时请求数据接口，将获得的数据与数据库数据对比即可。然后弄个邮件发送，监控到数据变化时，给你发送邮件。\r\n\r\n3、当你想做个聚合网站或者聚合app时，你可以利用WebSplider爬取各大站点的数据，然后调用API，构造数据到自己的APP中(今日头条就干的这种事情)。\r\n\r\n...\r\n\r\n基于此，WebSplider诞生了。\r\n\r\n## 特性\r\n\r\n> * 简单、方便。只要掌握简单的网页知识，即可利用WebSplider在线爬虫系统，进行简单的配置之后，可进行数据抓取预览。\r\n\r\n> * 功能强大。支持抓取预览，定制输出，生成API，API管理，查看分享，登录注册等功能。\r\n\r\n> * 响应速度快。抓取结果保存在数据库中，每天定时更新数据，数据接口响应数据库内容。\r\n\r\n\r\n## 本地测试\r\n1、安装Nodejs，安装MongoDB数据库，搭建环境\r\n\r\n2、运行代码\r\n```\r\ngit clone https://github.com/LuckyHH/WebSplider.git\r\nnpm install\r\nnpm start\r\n```\r\n\r\n3，打开浏览器\r\n```\r\nhttp://localhost:3000\r\n```\r\n\r\n## 核心代码\r\n```\r\nconst Koa = require(\"koa\");\r\nconst superagent = require(\"superagent\");\r\nconst cheerio = require(\"cheerio\");\r\nconst app = new Koa();\r\n\r\napp.get('/', function (req, res, next) {\r\n superagent.get('https://cnodejs.org/')\r\n .end(function (err, sres) {\r\n if (err) {\r\n return next(err);\r\n }\r\n var $ = cheerio.load(sres.text);\r\n\r\n $('.topic_title').each(function (idx, element) {\r\n var $element = $(element);\r\n items.push({\r\n title: $element.attr('title'),\r\n url : $element.attr('href')\r\n });\r\n })\r\n res.send(items);\r\n })\r\n})\r\n\r\napp.listen(3000);\r\n```\r\n\r\n\r\n## 使用\r\n\r\n### 1.爬取深度\r\n\r\n爬取深度指的是从初始网址经过几层到达数据所在网址。最大支持的爬取深度为3，推荐使用的最大爬取深度为2 \r\n\r\n### 2.网页编码\r\n\r\n目标网页的编码格式，默认为UTF-8\r\n\r\n### 3.抓取模式\r\n\r\n普通模式与分页模式\r\n\r\n\r\n### 4.页码范围\r\n\r\n在分页模式下，抓取的起止页码\r\n\r\n### 5.目标网址\r\n\r\n目标网址即要爬取的目标网站的网址。\r\n\r\n普通模式下只需填写要抓取的网址即可。\r\n\r\n分页模式下:\r\n\r\n网址填写时，将网址中的页码改为*即可\r\n\r\n例如:\r\n\r\nCNode的分页网址\r\n\r\n```https://cnodejs.org/?tab=good&page=10```\r\n\r\n改为\r\n\r\n```https://cnodejs.org/?tab=good&page=*```\r\n\r\n\r\n### 6.选择器\r\n\r\n选择器用来指出数据所在的位置，配合'输出结果定制'即可获得目标数据。填写需要用户具有基本的前端知识。\r\n\r\n这里为了描述方便，将标签选择器分为两种，一种是a标签选择器与数据标签选择器。(当然，如果你想要的数据在a标签中，那么a标签选择器就是数据标签选择器)\r\n\r\n原理图:\r\n![原理](https://www.docmobile.cn/upload/image/plain/1017939766378893312.png)\r\n\r\n> 当抓取深度为1，则一级选择器中填写数据选择器即可。\r\n\r\n> 当抓取深度为2，则一级选择器中填写到达第二层页面的a标签选择器，二级选择器填写数据标签选择器。\r\n\r\n> 当抓取深度为3，则一级选择器中填写到达第二层页面的a标签选择器，二级选择器中填写到达第三层页面的a标签选择器，三级选择器填写数据选择器即可。\r\n\r\n填写示例:\r\n\r\n深度为2\r\n\r\n一级选择器:`$(\".topic_title a\")`\r\n\r\n二级选择器:`$(\".topic .content\")`\r\n\r\n\r\n`$(\".topic_title a\")`是指目标页面中所有类名为topic_title的元素中的a元素\r\n\r\n`$(\".topic .content\")`指的是目标页面中类名为topic的元素下的类名为content的子孙元素\r\n\r\n填写了两级选择器，说明目标数据在当前页面(即配置页面'目标网址'填写的网址)的下一层，则一级选择器需要指出到达下一层页面的a标签选择器。二级选择器填写的是下一层页面中的数据标签选择器\r\n\r\n\r\n填写同样支持调用一些内置函数来辅助进行数据定位\r\n\r\n如:\r\n\r\n```\r\n$(\".topic\").find('.content')\r\n\r\n$(\".topic\").children('.content')\r\n\r\n$(\".topic\").next().children('.content')\r\n\r\n$(\".topic\").children('.content').next().find('.artical')\r\n```\r\n\r\n更多选择器填写规则，参考[cheerio](https://www.npmjs.com/package/cheerio)。\r\n\r\n### 7.输出结果定制。 \r\n\r\n输出结果定制指的是输出哪些结果。\r\n\r\n由标签选择器指出数据所在的位置后，还需要进一步使用标签选择器和属性选择器来获得数据。\r\n\r\n这里需要写成JSON格式，参考写法如下：\r\n\r\n```\r\n{\r\n \"name\":\"$element.find('.c-9 .ml-20 a').text()\",\r\n \"age\":\"$element.children('.c-9').next().text()\"\r\n}\r\n```\r\n\r\n键部分可以随意指定，值部分填写需要一定的规则。\r\n\r\n**$element**是指'选择器'中填写的数据标签选择器。(结合'选择器'给出的示例，$element指的是$(\".topic .content\")）\r\n\r\n键为name的值指 '选择器'筛选出的元素下的类名为c-9的元素下的类名ml-20下的a元素中的文本\r\n\r\n键为age的值指 '选择器'筛选出的元素下的类名为c-9的元素下一个元素的文本内容\r\n \r\n\r\n***\r\n\r\n值得注意的是，当你需要的数据种类只有1种，你完全可以在'选择器'中填写标签选择器时，直接将标签定位到目标元素，在'输出结果定制'中，填写属性选择器即可。\r\n\r\n但往往我们需要的数据种类不止一种，所以在填写'选择器'部分时，需要填写的数据标签选择器要将所有需要的数据包裹在内，所以甚至可以填写$(\"body\")这样的数据选择器。在填写\"输出结果定制\"的值部分，需要填写一些选择器指明数据详细位置，最后使用属性选择器即可获得数据。\r\n\r\n同样结合上文给出的示例，\r\n\r\n如果我要想获得'name'值这一类数据，\r\n\r\n那么'选择器'可以这样写\r\n\r\n一级选择器:`$(\".topic_title a\")`\r\n\r\n二级选择器:`$(\".topic .content .c-9 .ml-20 a\")`\r\n\r\n'输出结果定制'可以这样写\r\n```\r\n{\r\n \"name\":\"$element.text()\"\r\n}\r\n```\r\n\r\n或者\r\n\r\n'选择器':\r\n\r\n一级选择器:`$(\".topic_title a\")`\r\n\r\n二级选择器:`$(\".topic\").find('.content .c-9 .ml-20 a')`\r\n\r\n'输出结果定制':\r\n```\r\n{\r\n \"name\":\"$element.text()\"\r\n}\r\n```\r\n\r\n或者\r\n\r\n'选择器':\r\n\r\n一级选择器:`$(\".topic_title a\")`\r\n\r\n二级选择器:`$(\".topic\")`\r\n\r\n'输出结果定制':\r\n```\r\n{\r\n \"name\":\"$element.find('.content .c-9 .ml-20 a').text()\",\r\n}\r\n```\r\n\r\n或者\r\n\r\n'选择器':\r\n\r\n一级选择器:`$(\".topic_title a\")`\r\n\r\n二级选择器:`$(\"body\")`\r\n\r\n'输出结果定制':\r\n```\r\n{\r\n \"name\":\"$element.find('.topic .content .c-9 .ml-20 a').text()\"\r\n}\r\n```\r\n\r\n\r\n常用的属性选择器有text(),html(),attr()这三种\r\n\r\ntext()选择的是目标元素中的文本内容\r\n\r\nhtml()选择的是目标元素的HTML代码\r\n\r\nattr()选择的是目标元素标签中的某个属性值。需要填写参数，比如$element.attr('url')指的是获取目标元素标签中的url属性值\r\n\r\n\r\n### 8.代理模式\r\n\r\n即抓取数据是否需要使用HTTP代理。有3中模式，无代理，西刺代理与自定义代理模式。\r\n\r\n无代理模式使用自己的IP向目标服务器发出请求。\r\n\r\n西刺代理模式使用[西刺代理](http://www.xicidaili.com/)可用的代理地址发出请求。[HttpProxy](http://httpproxy.docmobile.cn)提供API支持\r\n\r\n自定义代理模式需要用户自己填写可用代理。\r\n\r\n输入格式如下:\r\n```\r\n['http://111.111.111.111:1111','http://111.111.111.111:1111']\r\n```\r\n\r\n注:\r\n\r\n(1)自定义代理地址填写不符合正常IP地址的话，系统默认使用无代理模式。\r\n\r\n(2)西刺代理响应速度略慢，因为首先HttpProxy要检测可用的代理地址，其次代理质量不能保证。当使用西刺代理之后响应失败，请重新提交。\r\n\r\n\r\n### 9.结果预览\r\n\r\n返回结果中\r\n\r\nstate表示抓取状态，值为true或者false \r\n\r\ntime值为数据的更新时间。\r\n\r\ndata值为抓取结果，格式为数组。\r\n\r\n\r\n### 10.生成数据接口\r\n\r\n数据接口只在用户登录情况下生成。\r\n\r\n### 11.查看分享\r\nWebSplider左边栏有近期用户分享的API，贴左边屏幕有个icon，点击会滑动出所有用户分享的API。\r\n\r\n界面为了美观，隐藏了滚动条，在页面中，所有被遮挡的部分均可以滚动。\r\n\r\n### 12.数据自动更新机制\r\n(1)自API生成起，程序每24小时更新一次数据，time值为更新数据的时间\r\n\r\n(2)当应用意外崩溃重启，自动更新失效。当请求该API时，程序发现请求时间比数据库保存的数据更新时间大24小时，会调用爬虫程序并响应结果，time值为API请求的时间，此时响应时间稍长，同时程序将重新启动自动更新机制，自动更新该API数据。\r\n\r\n(3)当自动更新机制更新某个API数据时，如果连续5次请求失败，说明目标网站可能闭站，改版，或者封了我服务器的IP，程序将不会再更新该API数据。当用户在数据更新时间(即time值)的24小时后调用API，会调用爬虫程序抓取数据进行响应，此时程序将重新启动定时任务，自动更新数据，如果5次请求失败，就不会再更新数据，在更新时间的24小时后，用户再次调用API，程序调用爬虫程序抓取数据进行响应。。。当用户调用API时，根据API中的state状态很容易判断该API是否失效，失效的情况下，用户一般将不会再调用该API。该API事实废弃\r\n\r\n(4)不管数据更新成功或者失败，time值都会更新。\r\n\r\n## 数据接口调用示例\r\n\r\n### 1.后端调用示例:\r\n```\r\n\r\nNode.js后端\r\nconst express = require('express');\r\nconst axios = require(\"axios\");\r\nconst router = express.Router();\r\n\r\nrouter.get('/douban/movie', function(req, res, next) {\r\n axios.get(\"http://splider.docmobile.cn/interface?name=luckyhh&cid=1529046160624\").then(ires => {\r\n if(ires.data.state){\r\n res.render('douban', { title: 'douban', content: ires.data.data });\r\n }else{\r\n res.send(\"请求失败\");\r\n }\r\n }).catch(err => {\r\n console.error(err);\r\n });\r\n});\r\n\r\nejs模板页面\r\n

\r\n
\r\n <%=content[i].name%>\r\n
\r\n \" alt=\"<%=content[i].name%>\">
\r\n 导演:\r\n <%=content[i].director%>\r\n \r\n
\r\n 编剧:\r\n <%=content[i].screenwriter%>\r\n \r\n
\r\n 主演:\r\n <%=content[i].starring%>\r\n \r\n
\r\n \r\n 得分:<%=content[i].score%>\r\n \r\n
\r\n
简介:\r\n <%=content[i].brief%>\r\n
\r\n

\r\n```\r\n\r\n### 2.前端调用示例\r\n\r\nJSONP的调用方式\r\n```\r\n\r\n\r\n```\r\n调用时，只需要在数据接口后添加 &cb = 函数名即可。\r\n\r\n## 接口调用DEMO\r\n[WebSplider DEMO](http://demo.docmobile.cn)\r\n\r\n\r\n## 示例配置参考\r\n\r\n> * [WebSplider参考配置](https://docmobile.cn/artical_detiail/luckyhh/1528369921460)\r\n\r\n> * [基于WebSplider的在线新闻模块开发](https://www.docmobile.cn/artical_detiail/luckyhh/1528989508215)\r\n\r\n\r\n## WebSplider镜像\r\n```\r\nhttps://websplider.herokuapp.com/\r\n```\r\n该镜像采用在线的mlab数据库，数据库数据与我服务器中的数据保持单向同步。(即该镜像中数据不会被更新到我的服务器)\r\n\r\n优点是:该镜像的数据更加安全，并且生成的数据API支持https协议。\r\n\r\n缺点是:响应速度略慢\r\n\r\n\r\n## 更新日志\r\n\r\n[WebSplider更新日志](https://www.docmobile.cn/artical_detiail/luckyhh/1530767352093)\r\n\r\n\r\n## TODO\r\n- [x] 对GBK网页格式的抓取支持\r\n- [x] 支持模式选择，可抓取分页列表\r\n- [x] 定义请求头\r\n- [x] 添加HTTP代理\r\n- [x] JSONP调用支持\r\n- [ ] 优化管理界面\r\n- [ ] 添加更详细的使用说明\r\n \r\n\r\n## 协议\r\n\r\nMIT","title","突发奇想，写了个在线爬虫","last_reply_at","2018-07-30 07:28:03.079","good","top",5,"visit_count",7669,"2018-06-18 15:50:42.302","author",{"_13":55,"_22":56},"LuckyHH","https://avatars.githubusercontent.com/u/22864183?v=4"]

\r\n <%=content[i].name%>\r\n