WebSplider项目介绍

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

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

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

系统界面:
首页:

WebSplider项目介绍_第1张图片

后台:

WebSplider项目介绍_第2张图片

项目背景:
上课的时候偶然想到做这么一个项目,可以方便别人抓取数据,用来弄一些有价值的东西。正巧最近粗浅的学了学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...

你可能感兴趣的:(WebSplider项目介绍)