学习搭建模拟REST API

什么是REST

REST是Representational State Transfer（表现层状态转移）的缩写，它是用来描述创建HTTP API的标准方法的，常用的四种行为（查看（view），创建（create），编辑（edit）和删除（delete））都可以直接映射到HTTP 中已实现的GET，POST，PUT和DELETE方法。（原文）
当客户端通过 REST API 提出请求时，它会将资源状态表述传递给请求者或终端。该信息或表述通过 HTTP 以下列某种格式传输：JSON、HTML、XLT、Python、PHP 或纯文本。（原文）

JSON-Server

JSON-Server可以搭建一个REST API，即简单地模拟后端服务器（API与数据库）获取、传送数据的过程，让前端在不依赖后端的情况下进行开发。

搭建JSON-Server

1. 新建项目文件夹

2. 初始化npm项目：npm init

3. 安装json-server：npm install --save json-server

4. 创建api中需要用到的json数据，例如db.json。

   {
       "users": [
           {
               "id": 1,
               "name": "Carol"
           },
           {
               "id": 2,
               "name": "John"
           }
       ],
       "products": [
           {
               "id": 1,
               "name": "Apple"
           },
           {
               "id": 2,
               "name": "Orange"
           }
       ]
   }
   

5. 开启json-server：json-server --watch db.json ，亦可以将此脚本命令添加到package.json里面的script中，例如：

   {
   	"scripts": { 
   		"json:server": "json-server --watch db.json"
   	}
   }
   

   之后使用npm run json:server运行该脚本命令。

6. 浏览器进入JSON Server页面：http://localhost:3000。
   

这颜文字hhhh，json-server的作者也太可爱了吧！！！🤣🤣🤣

通过URL获取Json数据

查找id

在JSON-Server中我们可以通过不同的URL获取所需的Json数据，例如：通过http://localhost:3000/users/1来获取id为1的users数据。

查找某个属性

在URL中添加?可以针对某些属性的值获取所需数据，例如：通过http://localhost:3000/users?name=Carol获取“name”为“Carol”的users。

查找任何维度

通过http://localhost:3000/users?q=o，可以获取users中任何维度的值里带有“o”的数据：

其他用法

更多URL玩法请参考视频。

通过Postman进行HTTP操作

POST请求

通过POST请求，我们可以往db.json里添加新的数据。

1. 在Postman里建立POST请求；
2. 填入URL，例如：http://localhost:3000/users；
3. 在Headers里填入Content-Type，选择application/json；
4. 在Body中选择raw，填入要添加的uesrs条目信息：

   {
   	"name": Amy
   }
   

5. 发送POST请求，检查请求的返回，可以发现id被自动添加了。

   {
   	"name": Amy,
   	"id": 3
   }
   

在本地的db.json，你可以对数据进行添加修改，但是对于像REQ | RES、JSONPlaceholder这样的第三方REST API，这些操作是不会被保存的。

DELETE请求

同理，通过发送DELETE请求可以删除db.json里的数据，但对于远程REST API删除操作是不会被真正实现的。

PATCH请求

通过发送PATCH请求可以修改db.json里的数据：

1. 在Postman里建立POST请求；
2. 填入URL，例如：http://localhost:3000/users/3；
3. 在Headers里填入Content-Type，选择application/json；
4. 在Body中选择raw，填入要修改的uesrs条目信息：

   {
   	"name": "David"
   }
   

5. 在db.json的users中，id为3的“name”便会改成“David”。

其他请求

还有其他请求，可以自行搜素。

使用远程REST API

如果你不想自定义本地数据db.json，那么可以用远程的REST API来进行前端接口的调试。

1. 在package.json的“script”添加启动远程REST API的命令：

   {
   	"scripts": { 
   		"json:server": "json-server --watch db.json",
   		"json:remote-server": "json-server https://jsonplaceholder.typicode.com/db",
   	}
   }
   

2. 启动npm run json:remote-server；

3. 打开浏览器查看http://localhost:3000。