【js】【爬虫】fetch + json-server 快速搭建爬虫服务器环境及数据后续处理（突破session缓存大小限制）

导读

需求

上篇《【js】【爬虫】fetch + sessionStorage 快速搭建爬虫环境》中，我们遇到爬取数据大于5M需要分批爬取数据的情况，那么有没有解决方案呢？

• 使用chrome的indexedDB（一般来说不少于 250MB,甚至没有上限，但是操作复杂！！！）。
• 开启http服务器，将爬取的数据上传到服务器上（今天我们就选用json-server快速搭建restful风格的服务器）。
• 使用其他服务器方案。

ps： 如果遇到chrome安全限制，需要想办法绕过。

开发环境

json-server使用

json-server是一个简单的项目，它可以帮你快速搭建带有 CRUD 操作的 REST API。

安装json-server

npm install -g json-server

创建数据文件db.json

{
  "employees": [
    {
      "id": 1,
      "first_name": "Sebastian",
      "last_name": "Eschweiler",
      "email": "sebastian@codingthesmartway.com"
    },
    {
      "id": 2,
      "first_name": "Steve",
      "last_name": "Palmer",
      "email": "steve@codingthesmartway.com"
    },
    {
      "id": 3,
      "first_name": "Ann",
      "last_name": "Smith",
      "email": "ann@codingthesmartway.com"
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

其实这个数据内容可以为空，只包含employees就行了（post上的数据会将id设置为1进行填充数据），如下所示：

{
  "employees": [
  ]
}

1
2
3
4
5

运行服务器

json-server --watch db.json
通过浏览器可以直接查看employees中的数据。

修改默认端口

使用过程中，json-server默认使用了3000的端口，该端口也用于本机的一个服务器，所以这里就需要修改其端口为3333。
json-server -p 3333 --watch db.json

json-server提供的线上服务（不推荐）

json-server官方提供了一个线上服务：https://my-json-server.typicode.com/
不过需要访问Github创建git，所以不太推荐。

fetch上传数据到json-server服务器

通过fetch新增数据

代码如下所示，：

function postOne(item) {
  fetch('http://localhost:3000/employees', {
  	// 必须添加"content-type"为json，否则会报错。
  	// header中不要没必要的数据，比如encoding，可能会报错。
    "headers": {
      // "accept-encoding": "gzip",
      "content-type": "application/json;charset=UTF-8",
    },
  	// item为对象，需要序列化为字符串。
    "body": JSON.stringify(item),
  	// 方法为POST。
    "method": "POST",
  })
  .then(function(response) {
    return response.text();
  }).then(function(text) {
    console.log('[postOne]', text)
  })
}

postOne({
    "first_name": "Ann",
    "last_name": "Smith",
    "email": "ann@codingthesmartway.com",
    // 对于爬虫，没必要设置id，json-server会内部自增，设置了，可能报错`Error: Insert failed, duplicate id`
    // "id": 44
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

报错Error: Insert failed, duplicate id

数据后续处理

有了数据后，为了满足不同的业务需求，需要对数据进行处理，如下场景：

• 数据查询
• 数据格式转换（如csv等）

为此，想到一种方案，通过Navicat将json数据导入数据库，从而通过数据库的能力实现各种额外功能；同时Navicat支持数据导出为不同的数据类型。

打开导入向导

1. 通过文件菜单项打开导入向导
   

2. 通过右键数据库的表项打开导入向导
   

3. 通过表查询结果页面打开导入向导
   

新建数据表并导入数据

1. 选择导入格式（json）
   

2. 选择数据源
   

3. 选择目标表（db.json中可以包含多个表）
   

4. 附加选项（默认即可）
   

5. 创建新表
   

6. 修改表字段及属性。
   

7. 导入模式
   

8. 点击开始，执行导入。
   
9. 查看数据库内容：
   

导出数据csv等

1. 点击导出按钮，打开导出向导，选择csv格式。
   

2. 选择需要导出的表和导出目的地。
   
3. 修改导出的列：
   

4. 附加选项，默认即可
   

5. 点击开始，执行导出
   
6. 查看结果
   

参考资料

• github地址： https://github.com/typicode/json-server
• 用 json-server 创建 REST API https://zhuanlan.zhihu.com/p/410338064

**ps：**文章中内容仅用于技术交流，请勿用于违规违法行为。