前言

Ajax 是前端必學(xué)的一個(gè)知識(shí)點(diǎn)，但剛接觸 Ajax 的同學(xué)可能會(huì)因?yàn)?strong>沒接口測(cè)試而煩惱。

本文 入門篇 會(huì)花你10分鐘解決 沒接口測(cè)試 這個(gè)煩惱忧陪，而且不需要你具備后端知識(shí)厘托。

如果不想自己在本地搭環(huán)境，還可以使用 《前端需要的免費(fèi)在線api接口》 里推薦的幾個(gè)線上接口平臺(tái)流炕，里面包括常用的 json 結(jié)構(gòu)數(shù)據(jù)和圖片澎现。

雖然有線上的免費(fèi)接口可以測(cè)試，但需要自定義接口和數(shù)據(jù)的時(shí)候每辟，還是本地模擬數(shù)據(jù)比較適合前端開發(fā)者剑辫。

本文分 入門篇 和 進(jìn)階篇。再往下滑一點(diǎn)就能看到全文目錄渠欺。

入門篇： 5分鐘內(nèi)帶你實(shí)現(xiàn) 本地環(huán)境搭建 和 增刪改查 操作妹蔽，滿足入門測(cè)試使用。

進(jìn)階篇： 主要講解常用的 查詢操作挠将，除此之外還包括 常規(guī)配置胳岂、靜態(tài)資源配置 等知識(shí)點(diǎn)。這部分有點(diǎn)長(zhǎng)捐名，建議收藏旦万。

本文約定

1. 本文主要面向的讀者是 前端小白，幾乎不會(huì)涉及到后端知識(shí)镶蹋，所以并不打算講解 json-server 中間件 的內(nèi)容成艘。
2. 本文講到的所有知識(shí)點(diǎn)都會(huì)提供對(duì)應(yīng)的代碼展示（會(huì)比官方文檔詳細(xì)點(diǎn)）。
3. 本文使用 postman 測(cè)試贺归，希望能照顧到使用不同工具庫(kù)做數(shù)據(jù)請(qǐng)求的讀者（我知道還有只懂 jQuery 的開發(fā)者）淆两。
4. 特殊情況會(huì)使用 axios 配合演示。

點(diǎn)贊 + 收藏 = 學(xué)會(huì)了

目錄

思維導(dǎo)圖.png

入門

json-server簡(jiǎn)介

npm地址 | github地址

Get a full fake REST API with zero coding in less than 30 seconds (seriously)

引用了官方的一句話拂酣，大概意思是30秒就能獲得一套完整的模擬 REST API 接口秋冰。

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

• 數(shù)據(jù)查詢要使用 GET婶熬。
• 新增數(shù)據(jù)要使用 POST剑勾。
• 刪除數(shù)據(jù)要使用 DELETE埃撵。
• 修改數(shù)據(jù)使用 PUT 和 PATCH。

其他啰嗦的介紹可以打開上面提供的網(wǎng)址看看虽另。

30秒起步

30秒起步分 4 步完成：

1. node 環(huán)境安裝
2. 安裝 json-server
3. 創(chuàng)建數(shù)據(jù)庫(kù)（其實(shí)就是一個(gè) json 文件）
4. 啟動(dòng)服務(wù)

1. node 環(huán)境安裝

json-server 需要通過 npm 下載暂刘，npm 依賴在 node 中。

node 常見的安裝方法有2種捂刺。第一種是官方下載谣拣，第二種是使用 nvm 下載。自己選一種就行族展。

node 官網(wǎng)森缠，點(diǎn)擊進(jìn)入主頁(yè)下載，下載完狂按“下一步”和“完成”就行了仪缸。

注意： node 版本一定要 12 以上贵涵。不然會(huì)報(bào)以下錯(cuò)誤：

json-server requires at least version 12 of Node, please upgrade

2. 安裝 json-server

可以全局安裝，也可以在某項(xiàng)目里安裝恰画。這里建議全局安裝独悴，因?yàn)橐院竽憧赡軙?huì)對(duì) json-server 產(chǎn)生依賴。

全局安裝方式：

npm install -g json-server

3. 創(chuàng)建數(shù)據(jù)庫(kù)

在你本機(jī)創(chuàng)建一個(gè)文件夾锣尉，然后新建一個(gè) json 文件刻炒，再填入數(shù)據(jù)即可。

建議文件名不要出現(xiàn)中文自沧。

例：

創(chuàng)建 json-server-demo 文件夾坟奥，在 json-server-demo 里創(chuàng)建 db.json 文件（這些文件夾和文件名都可以自由命名）。

db.json 文件錄入以下數(shù)據(jù)（數(shù)據(jù)來自 json-server 官方文檔拇厢，你也可以使用自己的數(shù)據(jù)）

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

4. 啟動(dòng)服務(wù)

進(jìn)入 json-server-demo 目錄爱谁，打開終端輸入以下命令即可

json-server --watch db.json

01.png

首頁(yè)和三個(gè)接口都可以直接在瀏覽器訪問，自己打開試試吧孝偎。

搞掂访敌！

查（get）

json-server 查詢數(shù)據(jù)需要使用 GET 方法。

入門篇 只寫一種查詢方法衣盾，其他查詢操作請(qǐng)往下滑阻塑，看 進(jìn)階篇。

上一小節(jié)創(chuàng)建了3個(gè)接口独柑，我們可以直接在瀏覽器、postman或者自己寫JS代碼獲取數(shù)據(jù)骇径。

http://localhost:3000/posts

02.png

http://localhost:3000/comments 和 http://localhost:3000/profile 兩個(gè)接口可以自己嘗試，這里不再啰嗦嫡丙。

增（post）

json-server 新增數(shù)據(jù)需要使用 POST 方法怜瞒。

例：給 posts 添加一條新的數(shù)據(jù)。

http://localhost:3000/posts

03.png

這里使用 POSt 方法向 /posts 接口傳輸數(shù)據(jù)杆融，/posts 原本的數(shù)據(jù)結(jié)構(gòu)是包含 id淘捡、title、author 三個(gè)字段宦棺，id 默認(rèn)是自增主鍵，不傳的話會(huì)默認(rèn)增加。

此時(shí)打開 db.json 文件看看思瘟，可以發(fā)現(xiàn) posts 里多了一條數(shù)據(jù)。

04.png

需要注意的是：json-server 默認(rèn)情況下并不會(huì)限制你上傳的數(shù)據(jù)格式和類型，所以需要你嚴(yán)格遵循自己設(shè)計(jì)的數(shù)據(jù)格式來添加和修改。

刪（delete）

json-server 刪除數(shù)據(jù)需要使用 DELETE 方法景埃。

刪除的公式是：

http://localhost:3000/{接口名}/{id}

比如現(xiàn)在要?jiǎng)h除剛剛上傳的那條數(shù)據(jù)

{
  "title": "leihou",
  "author": "雷猴",
  "id": 2
}

可以看到剛剛上傳的那條數(shù)據(jù)的 id 為 2

http://localhost:3000/posts/2

05.png

此時(shí)打開 db.json 就會(huì)發(fā)現(xiàn)剛剛刪除的那條數(shù)據(jù)已經(jīng)沒了完慧。

06.png

需要注意的是： 刪除成功 Status 會(huì)返回 200拴孤；如果刪除的數(shù)據(jù)不存在會(huì)返回 404司顿。

我用 axios 模擬了一下估脆。

刪除成功返回的結(jié)果：

07.png

刪除失敗返回的結(jié)果：

08.png

改（put 和 patch）

修改數(shù)據(jù)分為2個(gè)方法：

• put ：覆蓋
• patch ：更新

公式如下所示：

http://localhost:3000/posts/{id}

覆蓋（put）

例：把 id 為 1 的數(shù)據(jù)改成 { "title": "leihou", "author": "雷猴" }

09.png

此時(shí)打開 db.json 就可以看到 id 為 1 的數(shù)據(jù)已經(jīng)發(fā)生變化厌衔。

注意：原本的數(shù)據(jù)包含 title 和 author 祟同，使用 put 時(shí)必須把這兩個(gè)字段都寫上窖贤，不然會(huì)刪掉沒傳的字段赃梧。這就是 “覆蓋” 的意思。

例如：

10.png

此時(shí)查看 db.json 會(huì)發(fā)現(xiàn)數(shù)據(jù)被覆蓋了

11.png

更新（patch）

先還原一下數(shù)據(jù)览闰，改成如下圖所示：

12.png

此時(shí)有 title 和 author 字段。

例：使用 patch 方法把 id 為 1 的數(shù)據(jù) title 字段的值更改成 hello 巷折。

13.png

打開 db.json 文件查看一下压鉴，會(huì)發(fā)現(xiàn)只改了 id 為 1 的 title 值，并沒有刪掉 author 這個(gè)字段的數(shù)據(jù)锻拘。

14.png

進(jìn)階

啟動(dòng)參數(shù)

我們之前使用 json-server --watch db.json 這條命令啟動(dòng)了接口項(xiàng)目世曾，其中 json-server 是服務(wù)啟動(dòng)的命令述寡，--watch 是參數(shù)封寞，db.json 是目標(biāo)文件缕探。

使用下面這條命令可以 查看配置項(xiàng)：

json-server --help

# 或使用簡(jiǎn)寫方式
json-server -h

配置

使用 json-server --help 可以查看到所有配置項(xiàng)枚碗。接下來我演示幾個(gè)常見的配置操作。

端口

使用 -p 或者 --port 配置端口號(hào)霜瘪，例如配置 6666 端口

json-server -p 6666 db.json

啟動(dòng)后

\{^_^}/ hi!

Loading db.json
Done

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

Home
http://localhost:6666

主機(jī)地址

json-server --host 0.0.0.0 db.json

這里設(shè)置了 0.0.0.0 鳖枕，之后通過本機(jī) IP 來訪問即可则奥。同一個(gè)局域網(wǎng)內(nèi)的其他設(shè)備也可以通過這個(gè)地址來訪問罚舱。

查詢的常用操作

查詢是日常項(xiàng)目中接觸最多的操作，所以查詢是重點(diǎn)泊窘。

普通查詢

用 30秒起步 的那份數(shù)據(jù)审胸。

查詢 /posts 所有數(shù)據(jù)

http://0.0.0.0:3000/posts

查詢 /comments 所有數(shù)據(jù)

 http://localhost:3000/comments

查詢 /profile 所有數(shù)據(jù)

http://localhost:3000/profile

id查詢

將 db.json 的內(nèi)容修改一下亥宿。

{
  "posts": [
    {
      "id": 1,
      "title": "文章111",
      "author": "張三"
    },
    {
      "id": 2,
      "title": "文章222",
      "author": "李四"
    }
  ]
}

此時(shí)只有 posts 接口，里面有2條數(shù)據(jù)砂沛，id 分別為 1 和 2烫扼。

查詢的公式是：

http://localhost:3000/posts/{id}

查詢 id 為 2 的數(shù)據(jù)

http://localhost:3000/posts/2

15.png

條件查詢

準(zhǔn)備以下數(shù)據(jù)。

{
  "posts": [
    {
      "id": 1,
      "title": "文章111",
      "author": "張三"
    },
    {
      "id": 2,
      "title": "文章222",
      "author": "李四"
    },
    {
      "id": 3,
      "title": "文章333",
      "author": "張三"
    }
  ]
}

可以看到里面有 2條張三 的數(shù)據(jù)碍庵，1條李四 的數(shù)據(jù)映企。

單一條件查詢

查找 author 為 張三 的所有數(shù)據(jù)。

查詢 author 是 張三 的數(shù)據(jù)

http://localhost:3000/posts?author=張三

16.png

在 http://localhost:3000/posts 后面加一個(gè) ? 静浴，然后寫上篩選條件即可堰氓。

多條件查詢（且）

上面的數(shù)據(jù)，有2條張三的苹享。

這次要篩選的是 author = 張三 且 title = 文章333 的數(shù)據(jù)

http://localhost:3000/posts?author=張三&title=文章333

17.png

符合條件賽選的時(shí)候双絮，使用 & 號(hào)添加條件。

多條件查詢（或）

這次要篩選的是 title = 222 和 title = 333 這兩條數(shù)據(jù)出來得问。

http://localhost:3000/posts?title=文章222&title=文章333

18.png

重復(fù)使用 title 囤攀，會(huì)把符合條件的都篩查出來。

當(dāng)然椭赋，我們還可以使用 模糊查詢 來達(dá)到類似的效果抚岗，稍后會(huì)講到或杠。

深度屬性查詢

這里需要準(zhǔn)備另一份數(shù)據(jù)才能展示這個(gè)知識(shí)點(diǎn)哪怔。

數(shù)據(jù)內(nèi)容如下

{
  "posts": [
    {
      "id": 1,
      "title": "文章111",
      "authorInfo": {
        "name": "張三",
        "age": 20
      }
    },
    {
      "id": 2,
      "title": "文章222",
      "authorInfo": {
        "name": "李四",
        "age": 24
      }
    }
  ]
}

可以看到 authorInfo 里面還有子屬性。

查詢 authorInfo.name = 張三 的數(shù)據(jù)向抢。

http://localhost:3000/posts?authorInfo.name=張三

19.png

這里需要使用 . 的方式來訪問子級(jí)數(shù)據(jù)认境，有點(diǎn)像 js 用點(diǎn)語(yǔ)法訪問對(duì)象屬性那樣。

工作中我遇到這樣的接口不多挟鸠。

分頁(yè)查詢

使用 _page 和 _limit(可選) 對(duì)數(shù)據(jù)進(jìn)行分頁(yè)叉信。需要注意，_page 和 _limit 前面都要有下劃線艘希。

• _page：頁(yè)碼
• _limit：每頁(yè)的數(shù)據(jù)量

修改 db.json 里的數(shù)據(jù)方便測(cè)試分頁(yè)功能硼身，如下所示

{
  "comments": [
    { "id": 1, "body": "some comment 1", "postId": 1 },
    { "id": 2, "body": "some comment 2", "postId": 1 },
    { "id": 3, "body": "some comment 3", "postId": 2 },
    { "id": 4, "body": "some comment 4", "postId": 3 },
    { "id": 5, "body": "some comment 5", "postId": 1 },
    { "id": 6, "body": "some comment 6", "postId": 3 },
    { "id": 7, "body": "some comment 7", "postId": 3 },
    { "id": 8, "body": "some comment 8", "postId": 1 },
    { "id": 9, "body": "some comment 9", "postId": 2 },
    { "id": 10, "body": "some comment 10", "postId": 2 },
    { "id": 11, "body": "some comment 11", "postId": 3 },
    { "id": 12, "body": "some comment 11", "postId": 1 }
  ]
}

準(zhǔn)備了12條數(shù)據(jù)硅急。

需要獲取第2頁(yè)的數(shù)據(jù)，每頁(yè)3條：

http://localhost:3000/comments?_page=2&_limit=3

20.png

除了要返回的數(shù)據(jù)外佳遂，還會(huì)在 Headers 里返回 總數(shù)营袜；第一個(gè)、前一個(gè)丑罪、下一個(gè)荚板、最后一個(gè)的鏈接。我用 axios 發(fā)個(gè)請(qǐng)求演示一下吩屹。

axios.get('http://localhost:3000/comments', {
  params: {
   _page: 2,
   _limit: 3
  }
})
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.error(err)
  })

返回結(jié)果如下所示

21.png

x-total-count 存放總數(shù)跪另。

link 字段里存放的是 第一個(gè)、前一個(gè)煤搜、下一個(gè)免绿、最后一個(gè) 的鏈接地址

"
<http://localhost:3000/comments?_page=1&_limit=3>; rel=\"first\", <http://localhost:3000/comments?_page=1&_limit=3>; rel=\"prev\", <http://localhost:3000/comments?_page=3&_limit=3>; rel=\"next\", <http://localhost:3000/comments?_page=4&_limit=3>; rel=\"last\"
"

排序查詢

需要添加 排序的標(biāo)記 ( _sort )，然后設(shè)置 排序規(guī)則 ( _order )擦盾。

其中针姿，排序規(guī)則有 升序 ( asc ) 和 降序 ( desc ) 。

http://localhost:3000/{接口名}?_sort=要排序的字段名&_order=排序規(guī)則

以這份數(shù)據(jù)為例：

{
  "comments": [
    { "id": 11, "body": "some comment 1", "postId": 1 },
    { "id": 2, "body": "some comment 2", "postId": 1 },
    { "id": 3, "body": "some comment 3", "postId": 2 },
    { "id": 10, "body": "some comment 4", "postId": 3 },
    { "id": 7, "body": "some comment 5", "postId": 1 },
    { "id": 6, "body": "some comment 6", "postId": 3 },
    { "id": 5, "body": "some comment 7", "postId": 3 },
    { "id": 8, "body": "some comment 8", "postId": 1 },
    { "id": 9, "body": "some comment 9", "postId": 2 },
    { "id": 4, "body": "some comment 10", "postId": 2 },
    { "id": 1, "body": "some comment 11", "postId": 3 },
    { "id": 12, "body": "some comment 11", "postId": 1 }
  ]
}

id 的排序是亂的厌衙，如果使用普通的方式請(qǐng)求回來的數(shù)據(jù)是原模原樣返回的距淫。

升序

以 id 為參考字段進(jìn)行升序排列返回給客戶端。

http://localhost:3000/comments?_sort=id

或
http://localhost:3000/comments?_sort=id&_order=asc

22.png

返回的結(jié)果就會(huì)以 id 為參考字段升序排好婶希。

普通升序排列的話榕暇，_order=asc 可以不傳。只需指定 參考字段 ( _sort ) 即可喻杈。

降序

降序必須填好 _order=desc 彤枢。

http://localhost:3000/comments?_sort=id&_order=desc

23.png

多字段排序

這次的需求是：

1. 首先按 postId 升序排列

2. 在 1 的基礎(chǔ)上再對(duì) id 進(jìn)行倒序排列

多個(gè)字段用 , 分格。

http://localhost:3000/comments?_sort=postId,id&_order=asc,desc

返回結(jié)果：

{
  "comments": [
    { "id": 12, "body": "some comment 11", "postId": 1 },
    { "id": 11, "body": "some comment 1", "postId": 1 },
    { "id": 8, "body": "some comment 8", "postId": 1 },
    { "id": 7, "body": "some comment 5", "postId": 1 },
    { "id": 2, "body": "some comment 2", "postId": 1 },
    { "id": 9, "body": "some comment 9", "postId": 2 },
    { "id": 4, "body": "some comment 10", "postId": 2 },
    { "id": 3, "body": "some comment 3", "postId": 2 },
    { "id": 10, "body": "some comment 4", "postId": 3 },
    { "id": 6, "body": "some comment 6", "postId": 3 },
    { "id": 5, "body": "some comment 7", "postId": 3 },
    { "id": 1, "body": "some comment 11", "postId": 3 }
  ]
}

符合需求筒饰。

切片查詢

切片的意思是指定 頭 和 尾 缴啡；也可以指定 頭 和 片段長(zhǎng)度 。

用到的關(guān)鍵字有：

• _start：開始位置（下標(biāo)瓷们，從0開始）
• _end：結(jié)束位置
• _limit：片段長(zhǎng)度

總數(shù) 會(huì)放在 headers 里业栅。

以這份數(shù)據(jù)為例

{
  "comments": [
    { "id": 1, "body": "some comment 1", "postId": 1 },
    { "id": 2, "body": "some comment 2", "postId": 1 },
    { "id": 3, "body": "some comment 3", "postId": 2 },
    { "id": 4, "body": "some comment 4", "postId": 3 },
    { "id": 5, "body": "some comment 5", "postId": 1 },
    { "id": 6, "body": "some comment 6", "postId": 3 },
    { "id": 7, "body": "some comment 7", "postId": 3 },
    { "id": 8, "body": "some comment 8", "postId": 1 },
    { "id": 9, "body": "some comment 9", "postId": 2 },
    { "id": 10, "body": "some comment 10", "postId": 2 },
    { "id": 11, "body": "some comment 11", "postId": 3 },
    { "id": 12, "body": "some comment 11", "postId": 1 }
  ]
}

需求：返回下標(biāo)從 2-6 的數(shù)據(jù)

使用 _start 和 _end 的方式

http://localhost:3000/comments?_start=2&_end=6

使用 _start 和 _limit 的方式

http://localhost:3000/comments?_start=2&_limit=4

24.png

范圍查詢

范圍查詢包括 大于等于、小于等于谬晕、不等于 三種情況碘裕。

大于等于 _get

大于等于 使用的關(guān)鍵字是 _get 。注意攒钳，前面有個(gè)下劃線的帮孔。

需求：查詢 comments 接口 id 大于等于 4 的數(shù)據(jù)

http://localhost:3000/comments?id_gte=4

25.png

小于等于 _lte

需求：查詢 comments 接口 id 小于等于 4 的數(shù)據(jù)

http://localhost:3000/comments?id_lte=4

26.png

聯(lián)合一起使用

需求：查詢 comments 接口 id 大于等于 4 且 小于等于 6 的數(shù)據(jù)

http://localhost:3000/comments?id_gte=4&id_lte=6

27.png

不等于 _ne

需求：查詢 comments 接口 id 不等于 2 的數(shù)據(jù)

http://localhost:3000/comments?id_ne=2

28.png

模糊查詢

模糊查詢的關(guān)鍵字是 _like。

需求：查詢 comments 接口 body 包含 1 的數(shù)據(jù)

29.png

全文查詢

全文查詢的關(guān)鍵字是 q

準(zhǔn)備以下數(shù)據(jù)比較好演示

{
  "authors": [
    { "id": 1, "name": "zhangsan", "age": 18},
    { "id": 2, "name": "lisi", "age": 21},
    { "id": 3, "name": "wangwu", "age": 24}
  ]
}

查詢所有字段中包含 2 的數(shù)據(jù)出來

http://localhost:3000/authors?q=2

30.png

因?yàn)?id 為 3 的那條數(shù)據(jù)里 age 是 24 不撑，也算是包含了 2 文兢。

外鍵關(guān)聯(lián)查詢

外鍵查詢需要 2個(gè)接口 關(guān)聯(lián)查詢晤斩。

準(zhǔn)備以下數(shù)據(jù)方便演示

{
  "posts": [
    { "id": 1, "title": "文章111", "author": "張三" },
    { "id": 2, "title": "文章222", "author": "李四" }
  ],
  "comments": [
    { "id": 1, "body": "some comment 1", "postId": 1 },
    { "id": 2, "body": "some comment 2", "postId": 1 },
    { "id": 3, "body": "some comment 3", "postId": 2 }
  ]
}

posts 里有2條數(shù)據(jù)。

comments 里有3條數(shù)據(jù)姆坚，其中每條數(shù)據(jù)都有一個(gè) postId尸昧，是對(duì)應(yīng) posts 每條數(shù)據(jù)的 id。

需求：查詢 posts 里 id 為 1 的所有 comments 內(nèi)容

http://localhost:3000/posts/1/comments

31.png

關(guān)系拼裝

關(guān)系拼裝可以把關(guān)聯(lián)的2個(gè)接口的數(shù)據(jù)拼接起來并返回旷偿。

其中有2種查詢關(guān)系：

• 包含子資源 _embed
• 包含父資源 _expand

準(zhǔn)備以下數(shù)據(jù)方便演示

{
  "posts": [
    { "id": 1, "title": "文章111", "author": "張三" },
    { "id": 2, "title": "文章222", "author": "李四" }
  ],
  "comments": [
    { "id": 1, "body": "some comment 1", "postId": 1 },
    { "id": 2, "body": "some comment 2", "postId": 1 },
    { "id": 3, "body": "some comment 3", "postId": 2 }
  ]
}

包含子資源 _embed

http://localhost:3000/posts?_embed=comments

32.png

還可以拼接多個(gè)條件烹俗。

需求：在 comments 里，把 posts 里 id 為 2 的數(shù)據(jù)找出來并拼接起來

http://localhost:3000/posts/2?_embed=comments

33.png

包含父資源 _expand

http://localhost:3000/comments?_expand=post

34.png

配置路由

有時(shí)候我們的 api地址 可能不像上面所有案例中那么簡(jiǎn)單萍程，此時(shí)就可以使用 自定義路由 的方法來模擬幢妄。

比如模擬下面這個(gè)接口：

http://localhost:3000/api/users/1

實(shí)現(xiàn)的步驟如下所示：

1. 創(chuàng)建 routes.json 文件（也可以不叫這個(gè)名字）
2. 啟動(dòng)服務(wù)時(shí)使用 --routes 參數(shù)

1、創(chuàng)建 routes.json 茫负，并輸入以下內(nèi)容蕉鸳。

{
  "/api/*": "/$1"
}

2、啟動(dòng)服務(wù)

json-server db.json --routes routes.json

3忍法、訪問

http://localhost:3000/api/posts

靜態(tài)資源

靜態(tài)資源包含 html 潮尝、css 、js 饿序、圖片勉失、視頻等資源。

配置

配置方式分2種：

• 默認(rèn)配置
• 指定資源位置

默認(rèn)配置

需要在根目錄下創(chuàng)建 public 文件夾原探，里面放入 html 等文件乱凿。

35.png

然后在瀏覽器訪問一下 http://localhost:3000/

36.png

你也可以加入自己的 css 和 js 進(jìn)行設(shè)計(jì)交互。

指定資源位置

json-server 配資靜態(tài)資源的默認(rèn)方式是在根目錄下創(chuàng)建 public 文件夾咽弦，然后里面放入靜態(tài)資源徒蟆。

但如果你不想使用 public 作為靜態(tài)資源的文件夾，也可以自己起過另一個(gè)名字型型，然后在啟動(dòng)環(huán)境時(shí)使用 --static 來指定目標(biāo)目錄就行了段审。

比如我創(chuàng)建了一個(gè) some-other-dir 作為靜態(tài)資源的目錄，使用以下命令指定以下即可闹蒜。

json-server db.json --static ./some-other-dir

多媒體資源

除了放 html 寺枉、css 和 js 資源外，還可以放圖片和視頻嫂用。

我以圖片為例型凳，我在 public 目錄下添加一個(gè)圖片丈冬。

37.png

直接在 http://localhost:3000/ 后面跟著 圖片文件名 即可嘱函。

38.png

其他

生成動(dòng)態(tài)數(shù)據(jù)

如果我們要模擬100條數(shù)據(jù)，甚至更多的話埂蕊，創(chuàng)建 json 文件然后一條一條錄入的方式真的很不合時(shí)往弓。

此時(shí)我們可以使用 js 通過循環(huán)的方式來實(shí)現(xiàn)數(shù)據(jù)創(chuàng)建疏唾。

1、首先在根目錄下創(chuàng)建一個(gè) db.js 的文件函似。

2槐脏、輸入一下內(nèi)容

module.exports = () => {
  const data = { users: [] }
  // 創(chuàng)建 100 個(gè) users
  for (let i = 0; i < 100; i++) {
    data.users.push({ id: i, name: `user${i}` })
  }
  return data
}

3、運(yùn)行 js 文件

json-server db.js

4撇寞、查詢一下

 http://localhost:3000/users

39.png

100條數(shù)據(jù)就直接生成了顿天。

需要什么字段可以自己在 js 文件里配置。

查詢整個(gè)數(shù)據(jù)庫(kù)

訪問以下地址可以獲得整個(gè)數(shù)據(jù)庫(kù)的數(shù)據(jù)蔑担。

 http://localhost:3000/db

遠(yuǎn)程模式

如果想使用互聯(lián)網(wǎng)上的數(shù)據(jù)牌废，也可以直接運(yùn)行 json-server 然后加上遠(yuǎn)端的地址即可。

json-server http://jsonplaceholder.typicode.com/db

如果本文能給您帶來幫助啤握，請(qǐng)幫我 點(diǎn)個(gè)贊 唄~

轉(zhuǎn)自：『前端必備』本地?cái)?shù)據(jù)接口 —— json-server 從入門到膨脹