使用 json-server 需要遵守一定的規(guī)范凉夯。

• 數(shù)據(jù)查詢要使用 GET
• 新增數(shù)據(jù)要使用 POST
• 刪除數(shù)據(jù)要使用 DELETE
• 修改數(shù)據(jù)使用 PUT 和 PATCH

一让虐、json-server環(huán)境搭建

【第一步】 node 環(huán)境安裝

Node.js (nodejs.org)

image.png

進(jìn)入node官網(wǎng)视卢，下載并安裝node撮胧。

【第二步】 安裝json-server

CMD命令打開控制臺(tái)，輸入 npm install -g json-server

npm 指令只有安裝node之后哦才可用。

【第三步】 新建json數(shù)據(jù)庫(kù)

創(chuàng)建 json-server-demo 文件夾吼砂，在 json-server-demo 里創(chuàng)建 db.json 文件。
db.json 文件錄入以下數(shù)據(jù)：

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

【第四步】 啟動(dòng)服務(wù)

json-server --watch db.json

輸入以上命令可以監(jiān)聽db.json鼎文，控制臺(tái)中的輸出內(nèi)容是：

image.png

Resources
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile

Home
http://localhost:3000

以上連接都可以在本地瀏覽器中打開渔肩，如果能打開，則說明json-server已經(jīng)搭建完成漂问。

二赖瞒、查詢

假設(shè)db.json內(nèi)容如下：

{
  "user": [
    {
      "id": 1,
      "name": "張三",
      "age": 13
    },
    {
      "id": 2,
      "name": "李四",
      "age": 14
    },
    {
      "id": 3,
      "name": "王五",
      "age": 15
    }
  ]
}

【1】查詢（GET）

json-server 查詢只能使用GET請(qǐng)求女揭，可以在postman中演示。

查詢?nèi)繑?shù)據(jù)：

image.png

根據(jù)id查詢數(shù)據(jù)：

image.png

根據(jù)單個(gè)條件查詢數(shù)據(jù)：

image.png

根據(jù)多個(gè)條件查詢數(shù)據(jù)：

image.png

image.png

三栏饮、插入

json-server 查詢只能使用POST請(qǐng)求吧兔，可以在postman中演示。

image.png

插入數(shù)據(jù)時(shí)袍嬉，id不需要傳入境蔼，id會(huì)自增。

四伺通、刪除

json-server 查詢只能使用DELETE請(qǐng)求箍土，可以在postman中演示。

根據(jù)id刪除數(shù)據(jù)：

image.png

五罐监、覆蓋

json-server 查詢只能使用PUT請(qǐng)求吴藻，可以在postman中演示。

image.png

覆蓋后的數(shù)據(jù)變?yōu)椋?/p>

{
  "user": [
    {
      "name": "老六",
      "age": 16,
      "id": 1
    },
    {
      "id": 2,
      "name": "李四",
      "age": 14
    },
    {
      "id": 3,
      "name": "王五",
      "age": 15
    }
  ]
}

覆蓋是弓柱，傳入的json盡量包含所有的字段（除id字段）沟堡，否則覆蓋之后會(huì)缺少字段。

假如傳入的json數(shù)據(jù)是：

{
    "name": "老六",
}

那么覆蓋后的最終數(shù)據(jù)變?yōu)椋?/p>

{
  "user": [
    {
      "name": "老六",
      "id": 1
    },
    {
      "id": 2,
      "name": "李四",
      "age": 14
    },
    {
      "id": 3,
      "name": "王五",
      "age": 15
    }
  ]
}

id為1的數(shù)據(jù)字段丟失矢空，這一點(diǎn)尤為注意航罗。

六、更新

更新和覆蓋相比更加安全屁药，我們可以只更新某一個(gè)字段粥血。
json-server 查詢只能使用PATCH請(qǐng)求，可以在postman中演示酿箭。

image.png

最終數(shù)據(jù)是：

{
  "user": [
    {
      "id": 1,
      "name": "老六",
      "age": 13
    },
    {
      "id": 2,
      "name": "李四",
      "age": 14
    },
    {
      "id": 3,
      "name": "王五",
      "age": 15
    }
  ]
}

七复亏、如何使用手機(jī)瀏覽器訪問

【第一步】保證PC和手機(jī)連接同一個(gè)wifi
【第二步】ipconfig 查看電腦的ip地址

image.png

拿到IPv4地址。

【第三步】啟動(dòng)json-server

輸入指令：

json-server --host x.x.x.x db.json

啟動(dòng)json-server缭嫡，x.x.x.x是你電腦的ip地址蜓耻。

image.png

【第四步】打開手機(jī)瀏覽器，輸入對(duì)應(yīng)的地址械巡。

參考博客：

『前端必備』本地?cái)?shù)據(jù)接口 —— json-server 從入門到膨脹 - 掘金 (juejin.cn)

更加詳細(xì)的講解，可以在這篇文章查看饶氏。

[本章完...]