# JSON-SERVER從0開始

- 一款npm 套件
- 使用 JSON 檔案模擬資料庫
- 快速建立 RESTful API，幫助前端開發
- 無權限控管功能

## 安裝與設定

:::spoiler 安裝NPM (如果如果安裝過node.js，請略過此步驟)

- npm 的全名是 Node Package Manager
- 安裝Node.js時，會順便安裝NPM
1. 到node.js官網下載LTS版本 [https://nodejs.org/en/](https://nodejs.org/en/)
2. 安裝過程一律 `next`直到`finish`
3. 在終端機(命令提示字元) 輸入 `npm -v`
有出現版號就表示成功
- 如出現提示'環境變數未設定'，請依下圖做設定
:::
### 1. 安裝json-server本體

- 開啟 指令視窗 並輸入`npm install -g json-server`

### 2. 建立 db.json檔案

- 新增 db.json檔案
:::spoiler db.json 範本

        {
            "users": [
                {
                    "id": 1,
                    "name": "Stark",
                    "age": "33"
                },
                {
                    "id": 2,
                    "name": "Happy",
                    "age": "35"
                },
                {
                    "id": 3,
                    "name": "Pepper",
                    "age": "28"
                }
            ],
            "toDo": [
                {
                    "id": 1,
                    "content": "把冰箱發霉的檸檬拿去丟",
                    "isDone": true
                },
                {
                    "id": 2,
                    "content": "打電話叫媽媽匯款給我",
                    "isDone": false
                },
                {
                    "id": 3,
                    "content": "整理電腦資料夾",
                    "isDone": true
                },
                {
                    "id": 4,
                    "content": "繳電費水費瓦斯費",
                    "isDone": false
                },
                {
                    "id": 5,
                    "content": "推廣六角",
                    "isDone": true
                }
            ]
        }

:::

### 3. 啟動 json-server

- `json-server --watch db.json`
- 查看預設網址 [http://localhost:3000/](http://localhost:3000/)
- 想變更預設port ?
`json-server --watch db.json --port 3004`

#### 三步驟，大功告成!

## **RESTful API 使用方式**

推薦可以使用[Postman](https://www.postman.com/)做API測試

### GET：取得資料

- 取得全部users資料
`http://localhost:3000/users`
- 取得users id=2的資料
`http://localhost:3000/users/2`
- 取得users name=Happy的資料
`http://localhost:3000/users?name=Happy`
- 模糊查詢
`http://localhost:3000/users?name_like=a`
- 會出現所有name含有a的資料

### DELETE : 刪除

- 刪除單筆資料 (method: DELETE)
`http://localhost:3000/users/5`

### POST ：新增資料

- 每筆資料一定都要有唯一的id，沒給id的話，json-server會自動補上
id重複的話，會回傳500
- Content-Type: application/json
- Method: POST
- url: `http://localhost:3000/users`
- Body:

{
	"id": 4,
	"name": "Peter",
	"age": "30"
}

### PUT：修改資料 (完整)

與POST方式相似，會將新資料**完全取代舊資料**，沒寫到的屬性會被刪除

- Content-Type: application/json
- Method: PUT
- url: `http://localhost:3000/users/4`

### PATCH：修改資料 (局部)

與PUT方式相似，**僅更新有變動的部分**，其餘資料不會變

- Content-Type: application/json
- Method: PUT
- url: `http://localhost:3000/users/4`

# 參考文獻

- ****[JSON Server 官方Github](https://github.com/typicode/json-server)****
- [六角學院文件](https://quip.com/C6t2ALm9L6G8) ← **強力推薦**!! 內含影音教學