learning from Youtube Channel: Codevolution
JSON Server Tutorial for Beginner: Playlist
Thank you.
#1 – Introduction
What and Why?
Json server is an npm package that let you create fake REST APIs with zero coding
As a front end developer, I constantly need mock data that I can use to quickly prototype front end components
Data should be fetched asynchronously and the APIs should support not just GET but also POST, PUT and DELETE requests
Creating a node + express + mongodb backend is pretty time consuming
Course structure
How to create a simple json file that can be used as a database
Querying a list of items
Querying by id
Filtering
Sorting
Pagination
Querying with operations
Querying by full text search
Querying parent or child entities
Making POST, PUT or DELETE requests
Configuration options
Prerequisites
JSON format
How APIs are consumed in a frontend app
// db.json
{
"products": [
{
"id": 1,
"title": "Product 1",
"category": "electronics",
"price": 4000,
"description": "This is description about product 1"
},
{
"id": 2,
"title": "Product 2",
"category": "electronics",
"price": 2000,
"description": "This is description about product 2"
},
{
"id": 3,
"title": "Product 3",
"category": "books",
"price": 1000,
"description": "This is description about product 3"
},
{
"id": 4,
"title": "Product 4",
"category": "fitness",
"price": 3000,
"description": "This is description about product 4"
},
{
"id": 5,
"title": "Product 5",
"category": "fitness",
"price": 4000,
"description": "This is description about product 5"
},
{
"id": 6,
"title": "Product 6",
"category": "gardening",
"price": 5000,
"description": "This is description about product 6"
},
{
"id": 7,
"title": "Product 7",
"category": "furniture",
"price": 6000,
"description": "This is description about product 7"
},
{
"id": 8,
"title": "Product 8",
"category": "furniture",
"price": 7000,
"description": "This is description about product 8"
},
{
"id": 9,
"title": "Product 9",
"category": "accessories",
"price": 4000,
"description": "This is description about product 9"
},
{
"id": 10,
"title": "Product 10",
"category": "electronics",
"price": 3000,
"description": "This is description about product 10",
"discount": {
"type": "shipping"
}
}
],
"reviews": [
{
"id": 1,
"rating": 3,
"comment": "Review 1 for product id 1",
"productId": 1
},
{
"id": 2,
"rating": 4,
"comment": "Review 2 for product id 1",
"productId": 1
},
{
"id": 3,
"rating": 4,
"comment": "Review 3 for product id 1",
"productId": 1
},
{
"id": 4,
"rating": 5,
"comment": "Review 1 for product id 2",
"productId": 2
},
{
"id": 1,
"rating": 3,
"comment": "Review 1 for product id 3",
"productId": 3
}
]
}
操作步驟&指令
- 打開終端機
輸入 npm init -y
產生 package.json - 安裝 json server package
輸入 npm install json-server - 新增 package.json “scripts” 指令
“serve-json”: “json-server –watch db.json” - 輸入 npm run serve-json
#2 – GET Request
- http://localhost:3000/products
- http://localhost:3000/products/1
- http://localhost:3000/reviews
- http://localhost:3000/reviews/1
#3 – Filtering
- http://localhost:3000/products/?category=electronics
- http://localhost:3000/products/?category=electronics&discount.type=shipping
#4 – Sorting
- http://localhost:3000/products?_sort=price
- http://localhost:3000/products?_sort=price&_order=desc
- http://localhost:3000/products?_sort=price,category&_order=desc,asc
#5 – Pagination
- http://localhost:3000/products?_page=1
- http://localhost:3000/products?_page=1&_limit=2
- http://localhost:3000/products?_page=2&_limit=2
- http://localhost:3000/products?_page=3&_limit=2
講解
- 使用 Chrome 打開 Network 查看 Headers 資訊
Link: 的資訊內容
#6 – Operators
- http://localhost:3000/products?price_gte=2000<e=6000
- http://localhost:3000/products?id_ne=1
- http://localhost:3000/products?category_like=^f
#7 – Full text Search
- http://localhost:3000/products?q=in
#8 – Relationships
- http://localhost:3000/products?_embed=reviews
- http://localhost:3000/products/1?_embed=reviews
- http://localhost:3000/reviews?_expand=product
- http://localhost:3000/reviews/1?_expand=product
#9 – POST Request
講解&操作步驟
- 安裝 VS Code 插件 – Thunder Client
- 導覽列會出現 Thunder Client 功能
- 點擊 New Request 按鈕
- 選擇 POST 方法
- 修改 Request Url
http://localhost:3000/products - 點擊 Body > Json
- 複製 db.json 檔案中一筆資料來做修改
- 修改後點擊送出
// 7.複製 db.json 檔案中一筆資料來做修改
{
"id": 11,
"title": "Product 11",
"category": "electronics",
"price": 4000,
"description": "This is description about product 11"
}
#10 – PUT, PATCH and DELETE Request
講解 PUT & 操作步驟
- 繼續使用 Thunder Client
- 改成 PUT 方法
- 修改 Request Url
http://localhost:3000/products/11 - 修改 Json Content
category 的值由electronics改成furniture - 點擊傳送
講解 PATCH & 操作步驟
- 修改部分
- 改成 PATCH 方法
- Request Url
http://localhost:3000/products/11 - 修改 Json Content
- 點擊傳送
// 4. 修改 Json Content
{
"price": 8000
}
講解 DELETE & 操作步驟
- 改成 DELETE 方法
- Request Url
http://localhost:3000/products/11 - 清除 Json Content 內容
- 點擊傳送
#11 – Configurations
講解 & 操作步驟
- 修改 package.json 檔案
“serve-json”: “json-server –watch db.json –port 4000” - 儲存後,終止終端機
- 執行 npm run serve-json 指令
- 客製化 route configuration
- 建立 routes.json 檔案
- 修改 package.json 檔案
“serve-json”: “json-server –watch db.json –port 4000 –routes routes.json” - 終端機重新啟動
- 在網址列輸入
http://localhost:4000/api/v1/products - 修改 routes.json 檔案
- 終端機重新啟動
- 在網址列輸入
http://localhost:4000/api/v1/products/electronics
// 5. 建立 routes.json 檔案
{
"/api/v1/*": "/$1"
}
// 9. 修改 routes.json 檔案
{
"/api/v1/*": "/$1",
"/products/:category": "/products?category=:category"
}
#12 – Generate Random Data
講解 & 操作步驟
- 建立 data.js 檔案
- 修改 package.json “scripts” 指令
- 終端機重新啟動
// 1. 建立 data.js 檔案
module.exports = () => {
const data = {
products: []
}
for (let i = 0; i < 1000; i++) {
data.products.push({
id: i,
title: `products${i}`,
})
}
return data
}
// 2. 修改 package.json "scripts" 指令
"serve-json": "json-server --watch data.js --port 4000 --routes routes.json"