HackMD
JSON server 教學
json-server - 不會後端也能自己開 REST API
教學目標：讓找不到好 API 的學生，也能自己寫 API 來練習，找到前端工作
- 講解後端與前端的觀念
- 關聯資料庫(https://www.youtube.com/watch?v=gDIX80yDgR0)
Image Not Showing Possible Reasons- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Image Not Showing Possible Reasons- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Image Not Showing Possible Reasons- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
json-sever 操作流程
步驟一：安裝Node.js
步驟二：安裝 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：修改資料 (局部)
- 新增一筆資料時，會固定附帶 id 值，他也會是 router 的條件
json-server 功能
filter 篩選資料
GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
GET /comments?author.name=typicode
q = 搜尋全文
- filer：依照 key 去搜尋
- 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
分享大綱
- 重新解釋資料關聯
- 如何安裝
JSON-Server-Auth - 什麼是 token？有期限嗎？
/register、/login介紹- token 設定：解釋與 JSON-SERVER 差異
- 產品收藏功能實做
npm install -g json-server json-server-auth express
npm install json-server json-server-auth express
常見 router
- 取得 userId 為 2 的收藏列表：
GET：/users/2/bookmarks - 將產品編號 1 加入收藏：
POST：/products/1/bookmarks - 將 ID 資料關聯展開：
?_expand=product&_expand=user
教學文件
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
