---
tags: JS 直播班 - 2022 秋季班
---

# JSON server 教學
# json-server - 不會後端也能自己開 REST API

教學目標：讓找不到好 API 的學生，也能自己寫 API 來練習，找到前端工作

* [影片 JSON SERVER](https://www.youtube.com/watch?v=9TAanXxNvEI)
* [JSON-SERVER](https://github.com/typicode/json-server)
* [線上操作](https://whispering-mountain-14537.herokuapp.com/)
* [git 範例](https://github.com/gonsakon/jsonServerSample)
* [postman](https://www.getpostman.com/)
* [Youtube 部署影片](https://www.youtube.com/watch?v=DGPw2LzY0sY&feature=youtu.be)

- [ ] 講解後端與前端的觀念
- [ ] 關聯資料庫(https://www.youtube.com/watch?v=gDIX80yDgR0)

## json-sever 操作流程

### 步驟一：安裝[Node.js](https://nodejs.org/en/)

### 步驟二：安裝 NPM

npm install -g json-server

### 步驟三：新增一個 `db.json`

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

### 步驟四：啟動伺服器

json-server --watch db.json

## **RESTful API** 細節分享

* GET：取得資料
* POST ：新增資料
* PUT：修改資料 (完整)
* *PATCH：修改資料 (局部)*

- [x] 新增一筆資料時，會固定附帶 id 值，他也會是 router 的條件

## json-server 功能

### filter 篩選資料

GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
GET /comments?author.name=typicode

### q = 搜尋全文

- [x] filer：依照 key 去搜尋
- [x] q：依照全文進行檢索

### Paginate 頁碼

`page` 頁數、`limit` 一頁幾筆

`GET /posts?_page=7
GET /posts?_page=7&_limit=20`

### 字串與數值大小於

* _gte 大於等於(數值)
* _lte 小於等於 (數值)
* _ne 不等於 (數值)

`GET /posts?_page=7
GET /posts?_page=7&_limit=20`

## json-server 細節

* 預設支援跨網域 CORS
* 每筆資料都有 id
* 根目錄新增 `public` ，可放靜態檔案

## Q&A

Q：可以拿來當作真正的伺服器嗎？
A：不行，他是記錄在記憶體上，而非複寫檔案

Q：如何確保面試官看的內容都有資料？
A：一開始在 db.json 將全部資料寫上即可

## JSON-Server-Auth

### 分享大綱
1. 重新解釋資料關聯
2. 如何安裝 `JSON-Server-Auth`
3. 什麼是 token？有期限嗎？
4. `/register`、`/login` 介紹
5. token 設定：解釋與 JSON-SERVER 差異
6. 產品收藏功能實做

npm install -g json-server json-server-auth express
npm install json-server json-server-auth express

### 常見 router
1. 取得 userId 為 2 的收藏列表：`GET：/users/2/bookmarks`
2. 將產品編號 1 加入收藏：`POST：/products/1/bookmarks`
3. 將 ID 資料關聯展開：`?_expand=product&_expand=user`

### 教學文件
* [Wei J 文章](https://weij0.github.io/Web/docs/tags/json-server)