JSON Server Tutorial

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
    }
  ]
}

操作步驟&指令

1. 打開終端機
   輸入 npm init -y
   產生 package.json
2. 安裝 json server package
   輸入 npm install json-server
3. 新增 package.json “scripts” 指令
   “serve-json”: “json-server –watch db.json”
4. 輸入 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&lte=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

講解&操作步驟

1. 安裝 VS Code 插件 – Thunder Client
2. 導覽列會出現 Thunder Client 功能
3. 點擊 New Request 按鈕
4. 選擇 POST 方法
5. 修改 Request Url
   http://localhost:3000/products
6. 點擊 Body > Json
7. 複製 db.json 檔案中一筆資料來做修改
8. 修改後點擊送出

// 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 & 操作步驟

1. 繼續使用 Thunder Client
2. 改成 PUT 方法
3. 修改 Request Url
   http://localhost:3000/products/11
4. 修改 Json Content
   category 的值由electronics改成furniture
5. 點擊傳送

講解 PATCH & 操作步驟

1. 修改部分
2. 改成 PATCH 方法
3. Request Url
   http://localhost:3000/products/11
4. 修改 Json Content
5. 點擊傳送

// 4. 修改 Json Content
{
  "price": 8000
}

講解 DELETE & 操作步驟

1. 改成 DELETE 方法
2. Request Url
   http://localhost:3000/products/11
3. 清除 Json Content 內容
4. 點擊傳送

#11 – Configurations

講解 & 操作步驟

1. 修改 package.json 檔案
   “serve-json”: “json-server –watch db.json –port 4000”
2. 儲存後，終止終端機
3. 執行 npm run serve-json 指令
4. 客製化 route configuration
5. 建立 routes.json 檔案
6. 修改 package.json 檔案
   “serve-json”: “json-server –watch db.json –port 4000 –routes routes.json”
7. 終端機重新啟動
8. 在網址列輸入
   http://localhost:4000/api/v1/products
9. 修改 routes.json 檔案
10. 終端機重新啟動
11. 在網址列輸入
    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

講解 & 操作步驟

1. 建立 data.js 檔案
2. 修改 package.json “scripts” 指令
3. 終端機重新啟動

// 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"

想要更多真實資料

• faker.js
• casual
• chancejs