使用 JSON server创建 REST API

妖狐艹你老母 2023-10-01 19:05 63阅读 0赞

在本教程中，我们将了解 JSON 服务器。

假设您是前端开发人员，需要将后端调用与 REST API 集成，但您从后端团队得知 REST API 尚未完成，需要一些时间来进行编码。你现在将如何进行？

JSON 服务器可以通过模拟 REST API 在这些情况下为您提供帮助。JSON 服务器提供虚假的 REST API，无需任何编码即可用于模拟和测试。

JSON Server 是一个简单的项目，可帮助您快速设置具有 CRUD 操作的 REST API。

请注意 JSON 服务器作为 NPM 包提供，因此您需要在您的机器上安装 NPM。  
让我们开始使用 JSON 服务器。

**第 1 步：**安装 JSON 服务器。

npm install -g json-server

\-g 选项用于确保 JSON 服务器全局安装在机器上。

**第 2 步：**创建名为 countries.json 的 JSON 文件来模拟数据。

**countries.json**

{
      "countries": [
        {
          "id": 1,
          "name": "India",
          "population": "40000"
        },
        {
          "id": 2,
          "name": "Nepal",
          "population": "5000"
        }
      ]
    }

在终端中运行以下命令。

json-server –watch countries.json

基于 country.json，这里有一些 Rest API 的默认路由。

GET /countries  
GET /countries/1  
POST /countries  
PUT /countries/1  
PATCH /countries/1  
DELETE /countries/1

**第 3 步：**转到浏览器并浏览此 URL “http://localhost:3000/countries”。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_19_color_FFFFFF_t_70_g_se_x_16][]

在进行请求时请注意以下几点。

*  您可以执行 PUT、POST 和 DELETE 请求，更改将反映在 countries.json 中。
 *  请求正文应包含对象。
 *  Id 值是不可变的，不能更改。如果您将 Id 放入 PUT 或 PATCH 请求中，它将被忽略。
 *  如果你把 id 放在 post 中并且它已经被占用了，那么 request 也将被忽略。
 *  POST、PUT 或 PATCH 请求应包含 `Content-Type: application/json` 在请求正文中使用 JSON 的标头。

**根据id获取国家**

**网址：“http://localhost:3000/countries/2”。**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_17_color_FFFFFF_t_70_g_se_x_16][]

我们将使用 post 来测试 POST、PUT 和 DELETE 请求。

让我们将“内容类型”=“应用程序/json”放在下面的标题中。因为所有 POST、PUT 和 DELETE 请求都需要它。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16][]

**第 4 步：**让我们发送带有正文的 post 请求

<table style="margin-left:-19px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#eeeeee;vertical-align:top;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:right;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#aaaaaa;">1</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:right;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#aaaaaa;">2</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:right;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#aaaaaa;">3</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:right;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#aaaaaa;">4</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:right;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#aaaaaa;">5</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:right;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#aaaaaa;">6</span></span></span> 
     </div> 
    </div> </td> 
   <td style="vertical-align:top;width:696.188px;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#000000;">&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#000000;"><span style="color:#333333;">{ </span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#dd1144;">"name"</span><span style="color:#006fe0;">:</span> <span style="color:#dd1144;">"China"</span><span style="color:#333333;">,</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#dd1144;">"population"</span><span style="color:#006fe0;">:</span> <span style="color:#dd1144;">"60000"</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#000000;"><span style="color:#333333;">}</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#000000;">&nbsp;</span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**URL：“http://localhost:3000/countries/”**  
![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 1][]  
让我们再次发送 get 请求来检查我们的 post 请求是否成功。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 2][]  
  
如您所见，中国现在已添加到国家/地区列表中。

**第 5 步：**让我们发送带有正文的 put 请求

<table style="margin-left:-19px;"> 
 <tbody> 
  <tr> 
   <td style="background-color:#eeeeee;vertical-align:top;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:right;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#aaaaaa;">1</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:right;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#aaaaaa;">2</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:right;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#aaaaaa;">3</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:right;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#aaaaaa;">4</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:right;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#aaaaaa;">5</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:right;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#aaaaaa;">6</span></span></span> 
     </div> 
    </div> </td> 
   <td style="vertical-align:top;width:696.188px;"> 
    <div style="margin-left:0;text-align:left;"> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#000000;">&nbsp;</span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#000000;"><span style="color:#333333;">{ </span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#dd1144;">"name"</span><span style="color:#006fe0;">:</span> <span style="color:#dd1144;">"Nepal"</span><span style="color:#333333;">,</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#dd1144;">"population"</span><span style="color:#006fe0;">:</span> <span style="color:#dd1144;">"6000"</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#000000;"><span style="color:#333333;">}</span></span></span></span> 
     </div> 
     <div style="margin-left:0;text-align:left;"> 
      <span style="background-color:#ffffff;"><span style="color:#c7254e;"><span style="color:#000000;">&nbsp;</span></span></span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**URL：“http://localhost:3000/countries/2”**  
![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 3][]  
让我们再次发送 get 请求来检查我们的 put 请求是否成功。  
![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 4][]  
如您所见，尼泊尔的人口已更新为 6000。

**第六步：**发送删除请求  
**URL：“http://localhost:3000/countries/2”**  
![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 5][]  
再次发送get请求，检查删除请求是否成功。  
![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 6][]  
如您所见，从国家/地区列表中删除了 id=2 的国家/地区。

这就是使用 JSON 服务器创建 REST API 的全部内容。

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/5c8d2e1237a5433cade26c6f6e33c922.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_19,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f5341c8997874253a3c8f9dd61a22bc1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_17,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/7fb129828c0e4254b9f2e6f1c6aee64c.webp?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/43874bc04f08403cb968cb24e7627b79.webp?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/e7f3ed664bc04e6fa9dad511648372b3.webp?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/7b68fb33a6c04bfc9a525ba123e4961b.webp?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/2dc24470b5124a22822aff1127f8a5c2.webp?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/c528c03d96f74f6c9bce0cb7f95d43d2.webp?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/0d5b6d5c6e5f48d8bda6163f2c5c3c9b.webp?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16