WebSplider项目介绍

正文之前：
这是一个针对小白的小项目。。大神感兴趣的看看哈，不感兴趣的不忙的话麻烦也帮我看看，我是一个野生的程序员，学习前端这块没有经历过别人指导。真诚希望热心大神指出我的一些缺点与不足。。

项目介绍：
这是一个在线web爬虫项目，可以提供最多深度为3的数据抓取服务。同时还包含了用户后台管理，数据接口生成的功能。

该项目后台基于Nodejs，Web框架利用koa2，数据库使用了mongodb，前端框架是Vue，还简单的使用了一下VueRouter与Vuex，前后端通信Axios，爬虫利用superagent与cheerio。

系统界面：
首页：

后台：

项目背景：
上课的时候偶然想到做这么一个项目，可以方便别人抓取数据，用来弄一些有价值的东西。正巧最近粗浅的学了学Vue，还想学学使用koa2和axios这些。恰巧之前学习过alsotang的《Nodejs包教不包会》系列，学了点Nodejs爬虫。所以当即开始了本项目的开发。

项目经历:
在写这个项目之前，使用koa2的经历也仅限于实现几个官网的Demo。做后台的时候，边看着koa2的官网API，边完成代码的编写。koa2相比express，koa2使用了ES7的async与await，使得相比express少了很多回调函数，用起来更舒服。此外koa2中很多中间件需要自行安装。本项目中使用koa-static与koa-session两个。koa-static用来设置静态文件夹，koa-session用来保存用户登录状态。koa-router这个路由中间件没有用到，因为在开始写的时候，参考官网的Dome，所以就一直if条件判断请求路径。

项目中koa2的代码写的相较express项目显得较为原生，很多东西需要手动实现，比如说用户请求路径的判断(完成一个响应需要很多个if判断，这个可以安装koa-router中间件)，响应文件需要使用原生fs模块读取文件等等。。。还有就是标签识别与定制爬虫输出格式这一块稍显麻烦，怎么样才能让用户输入的参数被整合到相关上下文？绞尽脑汁之后，灵机一动，想到了eval函数，虽然牺牲了一些安全性，但是最后识别效果还算完美。然后就是怎么样根据用户选择的爬取深度，制定合适的爬取规则？这里蛮困难的，如果是深度为1还好说，只需要将用户输入的参数带到爬虫程序里的上下文，获得数据直接输出即可，但是深度为2，为3怎么办呢？深度为2时，还要以第一个爬取的结果为条件，深度为3时，以第二次爬取为条件。。这里其实容易想到Promise，利用Promise即可实现函数的串行调用。。如何控制并发请求数，以免让目标网站发现，封了我的IP？我用了async库，来控制并发请求数，使得二次请求时(及将深度为一获得的链接用于第二次请求)，并发数量限制在可控范围内。在实验过程中，我试着抓塔读文学网的数据，结果就被封了IP。。说明塔读文学网防爬虫这块做的蛮出色的。。。

想使用一下Vue-cli脚手架的，因为新疆网络的问题，还有版本问题放弃了。最后直接写html，并在页面中引用了Vue。首页中有三个Vue实例，分别是左边的公开链接部分，中间的爬虫配置与预览，右边的登录注册三部分。左边的公开链接部分较为简单，使用v-for指令，遍历一下请求来的数据即可。。中间部分的选择器个数和数据绑定这里较为困难。怎么实现v-for遍历出的项目与v-model绑定的使用真是困惑我了好久，知乎找到解决方案后，试着将v-model绑定数据存到数组，实现了一下，却发现还是有个小bug，当数组中存了数据之后，不会再随v-model绑定数据而改变。换句话说就是v-model兼听不到数组里数据变化。。后来想想可以封装一个函数，监听相关操作来手动删除数组中的数据即可。。项目中由于业务逻辑关系，数组数据的添加都是从最后添加，所以直接控制数组长度(JavaScript中数组长度可写，这里数组长度与用户选择深度一致)来实现数据删除。。在登录注册那一块中，组件之间的通信业困惑我好久，之前学习组件通信，老师只是粗浅的讲了讲父组件监听子组件函数调用，并没有实质数据传输，依稀记得有Vuex这个东西，是用来全局共享状态的。在查看了文档之后，我变通的使用Vuex，‘告诉’父组件登录状态，以显示相应的模块。。

还有值得一提的就是koa-session这个中间件。这个中间件使用Cookie记录用户的登录状态，它不涉及redis,数据库什么的用来存储状态。所以可以用来实现项目中一些可能看似反常的东西。比如，在用户登录后，点击用户名的链接，会发现跳转到/user的链接下，JavaScript在后台向服务器请求，判断登录状态，判断逻辑就是session.user存不存在。如果按照以往，session存到数据库或者redis中，判断条件即为真，在用户登录没有注销情况下，任何人都会通过/user登录用户后台，当然，这只是在没有Cookie验证的情况下。。。使用这种Cookie记录登录状态也有坏处，容易遭受跨站请求伪造攻击。。但我想，这个小项目并没有实际有价值的数据值得人们这么做，所以也就使用了这个模块。

感想与体会：
Vue，koa，axios等这些没用过之前感觉这东西挺高大上的，用过了之后感觉也就那样。业务逻辑实现其实并不难，难的是用这些工具实现功能的背后原理。比如说，为什么Vue能够实现数据实时监听，koa如何实现等等。懂得这些工具背后实现与原理，凝练出自己的思想更重要。程序员与码农的差别就在于此。

最后：
由于学识有限，可能文章中有很多错误。求大神们轻喷。

本文首发地址：

https://www.docmobile.cn/arti...

项目演示地址：

http://splider.docmobile.cn/#/

配置说明与实例

https://www.docmobile.cn/arti...
https://www.docmobile.cn/arti...

项目地址：

https://github.com/LuckyHH/We...