【web開發必備技能之一】json-server搭建mock伺服器

大家好，我是Smile。

今天給大家分享：一個在前端本地運作，可以存儲 json 資料的 server。

基于node環境，可以指定一個 json 檔案作為 API 的資料源。

前提

• 安裝 node 環境

下載下傳安裝

• 全局安裝 json-server

npm install -g json-server           

監聽服務

• 在需要的檔案夾下執行以下指令，執行成功後，預設會建立 db.json 檔案。

json-server --watch db.json           

啟動成功

• 根據執行指令，服務已正常監聽，我們可以根據以下位址進行通路體驗。
• 可以了解為 json-server 把 db.json 根節點的每一個 key ，當作一個 router 。我們可以根據這個規則來編寫測試。

• 在浏覽器運作 http://localhost:3000，效果如下

修改端口号

方式一：

• json-server 預設端口為 3000，可以根據需要自定義端口号。

json-server --watch db.json --port 3006           

方式二：

• 告訴你個可以偷懶的方式吧，如果覺得每次 啟動服務 都要執行相關指令，可以在 db.json 同級檔案夾建立一個 package.json 檔案，然後把以下配置資訊放在裡面就可以啦。

{
   "scripts": {
        "mock":  "json-server db.json --port 3006"
    }
}           

• 注意啟動服務的方式：執行以下指令即可。

npm run mock           

資料操作

測試資料源

• 直接複制到所建立的 db.json 檔案中

{
"subject": [
	{
		"id": 1,
		"name": "JAVA",
		"price": 888 
	},
	{
		"id": 2,
		"name": "GO",
		"price": 2088 
	},
	{
		"id": 3,
		"name": "VUE",
		"price": 288 
	}
  ]
}           

查詢資料

擷取資料方式

方式一：

• 直接在 url 後面拼接 id 值

http://localhost:3006/subject/3           

• 傳回資料格式：對象

{
  	id: 3,
  	name: "VUE",
 	  price: 288
}           

方式二：

• 也是我們常見 GET 的傳參方式，拼接需要查詢參數

http://localhost:3006/subject?id=3           

• 傳回資料格式：數組

[
  	{
		   id: 3,
		   name: "VUE",
		   price: 288
	  }
]           

分頁擷取資料

• _page：頁碼
• _limit：每頁顯示數量，如果沒有指定，預設每頁10條資料。

http://localhost:3006/subject?_page=1&_limit=2           

排序資料

• _sort：排序字段
• _order：排序方式【asc | desc】，預設asc

http://localhost:3006/subject?_sort=id&_order=desc           

截取資料

• 使用 slice 方式，通過參數 _start 指定開始位置，_end 指定結束位置
• 注意： 是通過 下标 方式截取
• 也可以結合 _limit 指定開始位置算起，往後取n個資料。

http://localhost:3006/subject?_start=3&_end=6

http://localhost:3006/subject?_start=3&_limit=6           

區間資料

• _gte： 大于等于
• _lte： 小于等于
• _ne： 不等于
• _like： 模糊查詢

http://localhost:3006/subject?id_gte=2&_lte=5

http://localhost:3006/subject?name_like=V           

配置靜态資源伺服器

• 在根目錄下建立 json 檔案，例 json_server_config.json
• 在根目錄下建立 public 目錄，存放靜态資源。

{
	"port": 3006,
	"watch": true,
	"static": "./public",
	"read-only": false,
	"on-cors": true,
	"no-gzip": false
}           

• 修改 package.json 檔案中啟動指令

{
  "name": "my-json-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
	"mock1": "json-server db.json --port 3006",
	 "mock": "json-server --c json_server_config.json db.json"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}           

• 因為配置檔案中指定靜态檔案的目錄，是以通路圖檔時可以忽略public目錄。
• 例：通路圖檔（public/image）：http://localhost:3006/image/test.png