索引擎和聚合类新闻App之所以有源源不断的新内容供予用户浏览，原因就在于有网络爬虫技术的加持。网络爬虫的应用对于用户来说，是一大福利——我们可以从一个搜索引擎轻松搜索到各个领域的信息。但是，对于原创方来说，就涉及到版权被侵犯的问题了。工具理性，但不意味着操持工具的人就可以假借“工具理性”肆意侵犯他人的合法权益，网络爬虫技术的应用还应该要在法理之内。

一、初识爬虫

工作的时候，想要查找“产品设计”，可以直接在搜索引擎上输入内容，就可以直接找到数以百万计的资料。

上下班路上，刷新闻类APP的时候，只要愿意，就会有源源不断的新的信息，足够刷一路的时间。

搜索引擎和（大多数）新闻类APP都不自己生产内容（虽然有些平台孵化了自己的内容，但也只占整个平台内容的很少的一部分，更重要的是，成本非常高）。

那么，他们的大量的内容从哪里来？

“我们不生产内容，只是内容的搬运工”，将互联网上的内容“搬运”到自己的服务器上，这就是爬虫。

首先，我们需要了解一下互联网的结构。

互联网上的内容数以亿计，虽然很复杂，但说白了就是一张大网，网上的每个节点就是一个网页，连接网页的超链接（Hyperlinks）相当于线，线把所有的节点连接在一起，形成了一个复杂的网。

通过点击超链接的文字或者图片，就可以跳转到对应的网页。爬虫可以自动访问到每一个网页，并把网页的内容保存下来。

世界上第一个网络爬虫由麻省理工学院的学生马修·格雷（Matthew Gray）在1993年写成，之后的爬虫尽管越来越复杂。

比如：可以实现更快的访问速度、访问更多的网页、更好的将网站内容解析出来。但爬虫的基本原理是一样的，都主要包括三个部分：访问网页链接，下载网页内容，解析网页内容。

爬虫的工作过程与我们查找网页的过程是一样的。

比如，我们想要查一下豆瓣上最新的电影：首先，在浏览器地址栏输入网址链接https://movie.douban.com/，之后，浏览器会跳转到豆瓣电影。最后，我们就可以找到当前热映的电影。

同样的，一个最简单的爬虫三步就可以爬取一个网页——首先，访问这个网页，之后，把网页内容下载下来，最后，对下载的内容进行解析。

二、7行代码爬取豆瓣电影

最简单的爬虫三步就可以爬取一个网页，那么要写多少行代码呢？

我们写一个爬虫，爬取豆瓣的“一周口碑榜”，只要7行代码！

这里我们使用Python语言，至于为什么选择Python语言，会在后面交代清楚，如果不懂Python也没有关系，了解爬虫是如何工作的就可以了。

代码如下：

import requests from lxml

import html url=’https://movie.douban.com/’ # 1、需要爬数据的网址

page=requests.Session.get(url) # 2、访问网页

tree=html.fromstring(page.text) # 3、解析网页的过程

result=tree.xpath(‘//td[@class=”title”]//a/text’) #3、解析网页的过程

print(result) # 打印出结果

在Python环境中运行这几行代码，就可以获取“一周口碑榜”了，结果如下：

[‘迦百农’, ‘绿皮书’, ‘驯龙高手3’, ‘速成家庭’, ‘阿丽塔：战斗天使’, ‘肤色’, ‘死亡天使’, ‘黎明墙’, ‘小小巨人’, ‘出·路’]

其中最关键的是解析网页内容，主要是(‘//td[@class=”title”]//a/text’)这行代码，大多数人可能对比较困惑。

这涉及到HTML网页的结构，可以把网页理解成一个文件夹，打开一个文件夹，会发现子文件夹，子文件夹或许还有文件夹。通过打开一个个文件夹，最终找到需要的数据。

1. //td ：这个相当于大目录；
2. [@class=”title”]：这个相当于小目录；
3. //a ：这个相当于最小的目录；
4. /text：这个是提取其中的文字内容。

至于是怎么写出来这行代码的，可以通过在网页空白处点击右键，查看源代码，就可以找到对应的td、class=”title”、a等标识符。

大多数程序员写爬虫选择python的理由很简单.

首先，python有很多的库，可以直接调用，比如：上面的代码就引入了requests、lxml库，分别实现访问网页、对网页结构解析。有开源的库，就直接调用，避免重复造轮子。

其次，python写起来很方便，配置也简单，短短几行的代码，就可以直接运行了，如果使用C或者Java，可能配置环境就要老半天。

三、一个简答的爬虫系统

把上面的每个步骤分别实现（模块化），就可以构成一个简答的爬虫系统。

使用URL（可以理解为网址链接）管理器管理所有的网址链接，使用HTML（可以理解为网页内容）下载器下载网页内容，使用HTML解析器对下载的内容解析，再加上数据存储模块、控制整个爬虫的调度模块，就构成了一个简单的爬虫系统。

爬虫基本架构

更具体的说，URL管理器负责管理所有的网址链接，记录下哪些URL已经爬取了，哪些还没有爬取。如果爬取过了，就要避免再次下载，如果没有，就要加入队列，等HTML下载器下载。

HTML下载器可以从服务器下载整个网页的内容，从URL管理器中获取未爬取的网址链接，之后，访问这些网页链接，下载网页。

HTML解析器负责解析下载好的网页，主要有两个任务：一方面，解析出需要的信息，比如上文的“一周口碑榜”；另一方面，解析出新的URL链接，交给URL管理器，继续下载，这个功能在上面的“7行代码”没有实现。

数据存储器实现存储数据的功能，将HTML解析器解析出来的信息存储起来，否则每次使用都要下载，会浪费大量的时间。图片、文档之类的文件可以直接保存到服务器上，文字类的可以通过数据库存储起来。

爬虫调度器作为系统的大脑，负责统筹其他四个模块的协调工作。

无论是大型的还是小型的爬虫虽然在设计细节，性能上有所不同，但都不会脱离这五个模块。

四、更深入的考虑

乍一看，每个模块实现起来都很简单，但细想，似乎每个模块都要考虑很多东西。

1. 初始的网址链接如何获得

7行代码爬取豆瓣电影，直接访问网址链接（https://movie.douban.com/）就可以爬取“一周口碑榜”。对稍大一些的爬虫系统或者商用爬虫，就要有更多的考虑了，在保证获取充足信息的同时，也要保证下载的质量。

对搜索引擎公司而言，要尽可能包括互联网所有的信息。对垂直领域，更多的偏向业务类信息，比如：对新闻类的APP，主要包括一些新闻网站、政府网站等，对Github这类的编程网站，他们可能就不感兴趣。

巧妇难为无米之炊，初始的网址链接基本要靠人工凭经验获取，比如：新闻类的APP，他们的初始URL列表里可能就包括新浪、网易、搜狐等门户网站，也包括各个级别的政府网站，还有人民网、新华社、人民日报等媒体的网站。

2. 如何确定哪些网页已经下载过了

当一个页面下载完成后，从这个网页中提取出其中的网址链接，把它们添加到等待下载的队列中，就可以获得更多的网址链接。

如果一个网页已经下载过了，重新下载，会消耗大量的时间，并占用存储空间。更要命的是，如果一直重复下载，就可能陷入死循环。

那么，如何知道这网址链接是不是已经下载过了？

对于小型爬虫，可以使用列表存储下载过的网址链接，当有新的网址链接的时候，先查找这个列表中有没有该网址链接。如果有的话，就不用插入，如果没有的话，就插入列表，等待访问下载。

对于大型爬虫，有成百上千个“小爬虫”（更加专业的名词叫做分布式爬虫），分布在不同的服务器上，同时爬取网址链接，就要考虑更多的东西。

比如：不同爬虫之间的分工和通信，如何共同维护上述的列表。

当数据很大的时候，就要考虑分布式、通信、存储、带宽等每个环节的限制，无论哪个环节没有做好，都有可能成为系统的瓶颈，这就像是木桶效应中的短板。

数据量增加10倍，之前的代码可能要重写了，工作量可能就要增加100倍，这也是量变引起质量的一个很好的例子。

在计算机领域，这样的例子随处可见，当数据增大到一定量级，原有的算法很可能无法继续使用，需要重新开发，随之而来的是加班、DEBUG以及延期上线。

3. 页面的解析

爬取豆瓣电影的“一周口碑榜”，需要研究网页的源代码，并编写对应的解析代码。但是网页的结构不同，用这个代码爬取知乎，解析不到任何内容。

以新闻类的APP为例：一个好的新闻类APP需要爬虫数以亿计的网页，并把里面的文字、视频、图片分别解析出来，难度可想而知。

好消息是一部分网站会遵守RSS规范（遵守RSS规范的网页结构和代码都有相似性，以便于订阅器获取主要信息），一种类型的爬虫就可以爬取大量这种类似的网页。但大部分的网站的结构，都是不同的，这需要算法工程师花费大量的时间和精力做解析工作。

五、 反爬虫

新闻类APP通过爬虫，获得大量的优质资源，读者也乐意在一个平台上看到所有的内容，但“被爬取”的网站就不太高兴了。对于大多数依靠广告收入的网站，没有了流量，连生存都成了问题，更别说盈利了。

一些自成体系的平台，比如：大型电商平台，他们希望所有的用户在自己的平台上查找信息，所有的商家在自己的平台上吸引卖家（广告费可不能付给搜索引擎），同样不希望爬虫的骚扰。

搜索引擎希望爬取更多的信息，优质的内容提供商又不希望被爬虫骚扰，利益冲突难以调和，于是产生了Robots协议来解决这个问题。

Robots协议网站服务器的一个声明，通常是保存在网站根目录下的一个TXT格式的文件，网站通过Robots协议告诉搜索引擎：哪些页面可以抓取？哪些页面不能抓取？

当爬虫访问一个站点时，它会首先检查该站点根目录下是否存在robots.txt，如果存在，爬虫就会按照该文件中的内容来确定访问的范围；如果该文件不存在，所有的爬虫将能够访问网站上所有没有被口令保护的页面。

我们使用搜索引擎，经常会看到“由于该网站的robots.txt文件存在限制指令（限制搜索引擎抓取），系统无法提供该页面的内容描述”，就是源于这个协议。

值得注意的是：Robots协议是国际互联网界通行的道德规范，并没有强制性约束力。

一些“没有道德”的爬虫同样会爬取有robots.txt限制指令的网站，这时候就需要一些技术来实现反爬虫了。

最常见的有三种方式：

1. 网站会根据IP地址访问的频率确定是不是爬虫

每个电脑都有唯一的IP地址，每个爬虫也有唯一的IP地址，当电脑或者爬虫访问网站的时候，网站会记录这个IP地址。如果同一个IP短时间多次访问同一个网站，这个网站可能会倾向于认为这是个爬虫，会采取一些措施。

当然，这在反爬虫的同时，也会给用户带来一些不好的体验。

相比之下，一些比较优秀的网站或者APP，会根据用户点击频率、时间间隔等信息，判断是不是爬虫或者误点击，之后再确定是否需要验证。

更好的用户体验背后，是更大的开发成本，更长的开发周期。

2. 网站也可以根据用户请求的Headers来判断是不是爬虫

当我们使用浏览器访问网站的时候，浏览器会自动在访问请求上添加一些信息，比如：浏览器采用的编码方式、使用的操作系统、浏览器版本等信息放在访问请求的最开始，作为Headers，但爬虫一般不会附加这些信息。

网站会根据是否存在Headers信息以及Headers信息的内容，判断对方是不是爬虫，有必要的话，就拒绝访问。

3. 动态页面的反爬虫

之前将的HTML网页都是静态的，随着HTML代码生成，页面的内容和显示效果就不会发生变化了。而动态网页则不然，动态网站是脚本语言（比如PHP）生成的，一些内容不是直接可见的，而是要运行一些脚本，才能看到。

网址后缀为htm、html、shtml、xml的网页是静态网页，而动态网页是以·aspx、.asp、.jsp、.php、.perl、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号“?”，这些不同的后缀基本代表了网页使用的语言。

访问静态网页，只需要直接访问链接就可以了，访问动态网站，还需要执行一些特定的操作（比如点击），才能显示更多的内容，这就增加了爬取的难度，一些简单的爬虫就被拒之门外了。

介绍完三种主流的反爬虫的方式，最后要说的是：反爬虫技术也不是一劳永逸的，在反爬虫的发展过程中，爬虫也进化出了一系列反“反爬虫”的方式。

针对反爬虫验证IP机制，爬虫“进化”出了IP代理池，这样，爬虫就可以不断变换自己的IP地址，迷惑反爬虫。针对Headers验证，爬虫也会生成一个Headers信息，甚至针对动态页面，也会模拟浏览器的行为。

虽然如此，反爬虫在一定程度上提高了爬虫的成本，降低了爬虫的效率，就可以将一大部分爬虫挡在门外。

从爬虫与反爬虫的例子也可以看出：大多数时候，没有绝对的有效方式。提高对方的成本，让对方觉得代价太大，得不偿失，就是很好的解决问题的办法。

六、爬虫实现冷启动——胜利即正义？

上面讲了爬虫是怎么运行的，常见的反爬虫机制。最后，我们再讲一个爬虫的应用场景的例子，可以帮助我们更好理解爬虫。

冷启动是每一个产品经理、运营人员和创业者面临的重大问题。没有优质的内容，就吸引不了用户，没有大量的用户，就无法吸引优质的内容，就陷入了先有鸡还是先有蛋的悖论。

爬虫，低成本、快速地解决了这个问题！

“我们不生产新闻，我们只是新闻的搬运工”，通过爬虫，低成本、快速地爬取整个互联网的优质内容，并凭借海量数据，利用算法实现内容分类和个性推荐（个性推荐系统会在后序章节详细介绍），吸引大量的用户，最终通过广告变现。

事实证明，这是个非常成功的商业模式。而媒体平台和新闻网站雇佣大量编辑人员，花费大量时间、金钱写成的高质量内容，连说一声都没有，就这样被拿走了，这不是侵犯人家版权嘛！

于是，多家媒体联合发起侵权诉讼或抗议声讨，最终迫使这家新闻巨头支付版权费，但无论法律上、道德上有多少问题，都不影响这家公司商业成功的既定事实。

类似的事情同样发生在其他垂直领域。

一家新成立的技术博客平台，爬取竞争对手上的文章，迅速实现优质内容的聚合。如果原博客主发现了自己的文章被盗用了，新的平台就移交账号并看情况给予少许补偿。如果对方不乐意，就注销账号，当一切都没有发生过。凭借这种运营方式，顺利实现了冷启动。

短视频APP的后来者，也可以通过类似的方式，实现用户的积累和优质内容的聚合。

胜利即正义？

这似乎是过于武断的一个评价。

上述的视频APP做得太过分，引起公愤，最终不得不关闭自己的平台。

对于通过爬虫获取内容的平台而言，内容的获取也只是万里长征的第一步，通过运营手段减小生产内容的成本，通过利益共享激励优质内容的产生，通过技术减小信息成本吸引用户，更加任重而道远。

而版权，也始终是悬于头顶的达摩克利斯之剑。

本文由@linghu 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自Unsplash, 基于CC0协议

在前面

今年国庆假期终于可以憋在家里了不用出门了，不用出去看后脑了，真的是一种享受。这么好的光阴怎么浪费，睡觉、吃饭、打豆豆这怎么可能（耍多了也烦），完全不符合我们程序员的作风，赶紧起来把文章写完。

这篇文章比较基础，在国庆期间的业余时间写的，这几天又完善了下，力求把更多的前端所涉及到的关于文件上传的各种场景和应用都涵盖了,若有疏漏和问题还请留言斧正和补充。

自测读不读

以下是本文所涉及到的知识点，break or continue ?

• 文件上传原理
• 最原始的文件上传
• 使用 koa2 作为服务端写一个文件上传接口
• 单文件上传和上传进度
• 多文件上传和上传进度
• 拖拽上传
• 剪贴板上传
• 大文件上传之分片上传
• 大文件上传之断点续传
• node 端文件上传

原理概述

原理很简单，就是根据 http 协议的规范和定义，完成请求消息体的封装和消息体的解析，然后将二进制内容保存到文件。

我们都知道如果要上传一个文件，需要把 form 标签的enctype设置为multipart/form-data,同时method必须为post方法。

那么multipart/form-data表示什么呢？

multipart互联网上的混合资源，就是资源由多种元素组成，form-data表示可以使用HTML Forms 和 POST 方法上传文件，具体的定义可以参考RFC 7578。

multipart/form-data 结构

看下 http 请求的消息体

• 请求头：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次请求要上传文件，其中boundary表示分隔符，如果要上传多个表单项，就要使用boundary分割，每个表单项由———XXX开始，以———XXX结尾。

• 消息体- Form Data 部分

每一个表单项又由Content-Type和Content-Disposition组成。

Content-Disposition: form-data 为固定值，表示一个表单元素，name 表示表单元素的 名称，回车换行后面就是name的值，如果是上传文件就是文件的二进制内容。

Content-Type：表示当前的内容的 MIME 类型，是图片还是文本还是二进制数据。

解析

客户端发送请求到服务器后，服务器会收到请求的消息体，然后对消息体进行解析，解析出哪是普通表单哪些是附件。

可能大家马上能想到通过正则或者字符串处理分割出内容，不过这样是行不通的，二进制buffer转化为string,对字符串进行截取后，其索引和字符串是不一致的，所以结果就不会正确，除非上传的就是字符串。

不过一般情况下不需要自行解析，目前已经有很成熟的三方库可以使用。

至于如何解析，这个也会占用很大篇幅，后面的文章在详细说。

最原始的文件上传

使用 form 表单上传文件

在 ie时代，如果实现一个无刷新的文件上传那可是费老劲了，大部分都是用 iframe 来实现局部刷新或者使用 flash 插件来搞定，在那个时代 ie 就是最好用的浏览器（别无选择）。

DEMO

这种方式上传文件，不需要 js ，而且没有兼容问题，所有浏览器都支持，就是体验很差，导致页面刷新，页面其他数据丢失。

HTML

 <form method="post" action="http://localhost:8100" enctype="multipart/form-data">

        选择文件:
            <input type="file" name="f1"/> input 必须设置 name 属性，否则数据无法发送<br/>
<br/>
            标题：<input type="text" name="title"/><br/><br/><br/>

        <button type="submit" id="btn-0">上 传</button>

</form>

复制代码

文件上传接口

服务端文件的保存基于现有的库koa-body结合 koa2实现服务端文件的保存和数据的返回。

在项目开发中，文件上传本身和业务无关，代码基本上都可通用。

在这里我们使用koa-body库来实现解析和文件的保存。

koa-body 会自动保存文件到系统临时目录下，也可以指定保存的文件路径。

然后在后续中间件内得到已保存的文件的信息，再做二次处理。

• ctx.request.files.f1 得到文件信息，f1为input file 标签的 name
• 获得文件的扩展名，重命名文件

NODE

/**
 * 服务入口
 */
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存库
var fs = require('fs');
var Koa = require('koa2');

var app = new Koa();
var port = process.env.PORT || '8100';

var uploadHost= `http://localhost:${port}/uploads/`;

app.use(koaBody({
    formidable: {
        //设置文件的默认保存目录，不设置则保存在系统临时目录下  os
        uploadDir: path.resolve(__dirname, '../static/uploads')
    },
    multipart: true // 开启文件上传，默认是关闭
}));

//开启静态文件访问
app.use(koaStatic(
    path.resolve(__dirname, '../static') 
));

//文件二次处理，修改名称
app.use((ctx) => {
    var file = ctx.request.files.f1;//得道文件对象
    var path = file.path;
    var fname = file.name;//原文件名称
    var nextPath = path+fname;
    if(file.size>0 && path){
        //得到扩展名
        var extArr = fname.split('.');
        var ext = extArr[extArr.length-1];
        var nextPath = path+'.'+ext;
        //重命名文件
        fs.renameSync(path, nextPath);
    }
    //以 json 形式输出上传文件地址
    ctx.body = `{
        "fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
    }`;
});

/**
 * http server
 */
var server = http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ......   ');
复制代码

CODE

https://github.com/Bigerfe/fe-learn-code/

04页面是什么，有什么作用？

404页面的目的是：告诉浏览者其所请求的页面不存在或链接错误，同时引导用户使用网站其他页面而不是关闭窗口离开。

现在大部分开源系统都会为大家考虑到404页面的跳转引导，比如：z-blog/wordpress，都是很不错的开源系统（注意不要用最原始的开源系统，而是采用带有模板的系统）。菜鸟后院网站本身也是wordpress的开源程序，然后我们用robin模板。(花299元拥有和菜鸟后院一样的网站，包括域名和1G阿里巴巴云空间)

页面应该达到什么样的效果才能满足SEO的要求？

搜索引擎使用 http 状态码来识别网页的状态。当搜索引擎获得不正确的链接时，网站应该返回一个状态代码404，告诉搜索引擎放弃索引该链接。如果返回一个200或302状态代码，搜索引擎会对链接进行索引，导致许多不同的链接指向相同的页面内容。结果，搜索引擎对这个网站的信任度大大降低。很多网站存在这个问题，那就是404页面返回的是200或302状态码而不是404状态码。

正确建立404页面的方法是：（仅适合Apache服务器）

• 在.htaccess 文件中加入代码： ErrorDocument 404 /Error.html
• 建立一个简单的html404页面命名 Error.html
• 把 Error.html放置在网站根目录
• 如果碰到困难，参考本站：错误网页
• 注意：不要将404错误直接，跳转到网站首页，这将导致首页不被收录，正确的做法是在404页面加上一个返回首页的链接，让用户判断，并选择是否返回首页，或者返回其他页面，这也是用户体验的一种表现，搜索引擎对于这种做法比较友好。
• /Error.html 前面不要带主域名，否则返回的状态码是302或200状态码。

现在我们购买的虚拟主机一般提供有404页面的制作方法，流程：

1、做一个简单的404页面，命名如：404.html；

2、通过ftp把这个404页面上传到网站根目录；

3、进入虚拟主机管理后台，找到404页面提交的入口，添加以上404页面的地址，如：www.cnbackyard.com/404.html（一般空间服务商都有带着种功能，也可以直接找他们技术客服完成这步操作）

4、输入一个错误的链接进行访问测试，随便输入，比如：www.cnbackyard.com/123.html，如果正确返回到404.html页面，则算正确；

5、使用站长工具（http://tool.chinaz.com/pagestatus），输入任意一个错误网址，检查返回值是否为404。如果返回值是200，代表该主机商设置有误，可以与其技术反馈。

以上操作方法对于一个seo初学者来说，还是有点复杂，同学们可以关注燃灯教育直播课程，参加我们的培训，理解起来会更透彻一点。