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

news2025/7/22 22:20:55

文章目录

- 导读
- - 需求
  - 开发环境
- json-server使用
- - 安装json-server
  - 创建数据文件db.json
  - 运行服务器
  - 修改默认端口
  - json-server提供的线上服务（不推荐）
- fetch上传数据到json-server服务器
- - 通过fetch新增数据
  - 报错`Error: Insert failed, duplicate id`
- 数据后续处理
- - 打开导入向导
  - 新建数据表并导入数据
  - 导出数据csv等
- 参考资料

导读

需求

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

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

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

开发环境

	版本号	描述
文章日期	2022-11-25
操作系统	Win11-22H2	内部版本号22621.674
nvm version	1.1.9
node -v	v12.22.12	npm -v （6.14.16）
json-server	0.17.1

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"
    }
  ]
}

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

{
  "employees": [
  ]
}

运行服务器

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
})