วิธีสร้าง REST API จำลองง่ายๆ ในไม่กี่นาที (พร้อม JSONPlaceholder)

คุณกำลังสร้างส่วนหน้า (frontend) แต่ส่วนหลัง (backend) ยังไม่พร้อม คุณต้องการ REST API ที่ส่งคืน JSON ที่สมจริงทันที พร้อมด้วยฟังก์ชัน GET, POST, PUT และ DELETE ที่ใช้งานได้ เพื่อให้คุณสามารถเขียนโค้ดต่อไปได้โดยไม่ต้องรอ

นั่นคือสิ่งที่ json-server มีไว้ใช้ ชี้ไปที่ไฟล์ JSON ไฟล์เดียว แล้วมันจะให้บริการ REST API เต็มรูปแบบในไม่กี่วินาที โดยไม่จำเป็นต้องมีโค้ด backend ตัวน้องของมันคือ JSONPlaceholder ก้าวไปอีกขั้น: เป็น API ปลอมที่โฮสต์ไว้ซึ่งคุณสามารถเรียกใช้ได้โดยไม่ต้องติดตั้งอะไรเลย คู่มือนี้จะแสดงวิธีการใช้ทั้งสองอย่าง ข้อจำกัดของแต่ละอย่าง และเวลาที่ควรเปลี่ยนไปใช้ mock ที่รับรู้สคีมาใน Apidog

สำหรับภาพรวมที่ใหญ่ขึ้นเกี่ยวกับการสร้าง endpoint ปลอม โปรดดู mock API คืออะไร ในที่นี้เราจะเน้นไปที่สองเครื่องมือที่นักพัฒนาเลือกใช้เป็นอันดับแรก

json-server คืออะไร?

json-server เป็นเครื่องมือ npm แบบโอเพนซอร์สที่เปลี่ยนไฟล์ JSON ธรรมดาให้เป็น REST API จริงๆ คุณเขียนไฟล์ db.json เพื่ออธิบายทรัพยากรของคุณ เรียกใช้คำสั่งเดียว และคุณจะได้เส้นทาง CRUD มาตรฐานที่รองรับโดยไฟล์นั้น คำขอเขียนจะแก้ไขไฟล์จริง ทำให้ข้อมูลคงอยู่ระหว่างคำขอในเซสชันของคุณ

เป็นวิธีที่เร็วที่สุดในการสร้าง API ที่ใช้งานได้สำหรับการสร้างต้นแบบ การพัฒนาส่วนหน้า การสาธิต และการทดสอบ โดยไม่ต้องตั้งค่าฐานข้อมูลหรือเขียนโค้ดเซิร์ฟเวอร์ โปรเจกต์นี้อยู่บน GitHub และถูกใช้อย่างแพร่หลายสำหรับงานนี้โดยเฉพาะ

ติดตั้งและเรียกใช้ json-server

ติดตั้งจาก npm:

npm install json-server

สร้างไฟล์ db.json ในโปรเจกต์ของคุณ คีย์อาร์เรย์ระดับบนสุดจะกลายเป็นเส้นทางคอลเลกชัน; ออบเจกต์ระดับบนสุดจะกลายเป็นเส้นทางทรัพยากรเดียว:

{
  "posts": [
    { "id": "1", "title": "First post", "views": 100 },
    { "id": "2", "title": "Second post", "views": 250 }
  ],
  "comments": [
    { "id": "1", "text": "Nice work", "postId": "1" }
  ],
  "profile": {
    "name": "apidog"
  }
}

เริ่มเซิร์ฟเวอร์:

npx json-server db.json

โดยค่าเริ่มต้นจะทำงานที่ http://localhost:3000 แค่นั้นเอง ตอนนี้คุณมี API ที่ใช้งานได้แล้ว

ข้อควรทราบเกี่ยวกับเวอร์ชัน: json-server v1 ได้ยกเลิกแฟล็ก --watch แบบเก่า ดังนั้น npx json-server db.json จึงเป็นคำสั่งปัจจุบัน หากคุณใช้เวอร์ชัน 0.x เก่า คุณจะยังคงเห็น json-server --watch db.json ในคู่มือการสอนต่างๆ

เส้นทางที่คุณได้รับฟรี

จาก db.json ด้านบน json-server จะสร้าง REST surface ที่สมบูรณ์

สำหรับอาร์เรย์ posts:

GET    /posts
GET    /posts/:id
POST   /posts
PUT   /posts/:id
PATCH  /posts/:id
DELETE /posts/:id

สำหรับออบเจกต์ profile:

GET   /profile
PUT   /profile
PATCH /profile

การสืบค้นข้อมูลก็มีมาให้ด้วย ไวยากรณ์ v1 ใช้เครื่องหมายโคลอนสำหรับเงื่อนไข:

GET /posts?views:gt=100 # views มากกว่า 100
GET /posts?views:lte=50 # views น้อยกว่าหรือเท่ากับ 50
GET /posts?_sort=-views # จัดเรียงตาม views, จากมากไปน้อย
GET /posts?_page=1&_per_page=25 # การแบ่งหน้า
GET /posts?_embed=comments # รวมคอมเมนต์ที่เกี่ยวข้อง

ตัวดำเนินการที่ใช้ได้ ได้แก่ lt, lte, gt, gte, eq, ne, in, contains, startsWith และ endsWith สำหรับไฟล์เดียวและคำสั่งเดียว นั่นคือ API จำนวนมาก

JSONPlaceholder: API ปลอมที่ไม่ต้องตั้งค่าใดๆ

บางครั้งคุณก็ไม่อยากแม้แต่จะติดตั้งเครื่องมือ JSONPlaceholder จากผู้สร้างคนเดียวกัน เป็น REST API ปลอมฟรีที่โฮสต์อยู่ที่ jsonplaceholder.typicode.com คุณเรียกใช้ได้โดยตรงจากโค้ดของคุณ:

curl https://jsonplaceholder.typicode.com/posts/1

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident",
  "body": "quia et suscipit..."
}

มาพร้อมกับทรัพยากรที่สร้างไว้ล่วงหน้าหกรายการ:

• /posts (100 รายการ)
• /comments (500 รายการ)
• /albums (100 รายการ)
• /photos (5000 รายการ)
• /todos (200 รายการ)
• /users (10 รายการ)

มันรองรับ POST, PUT, PATCH และ DELETE ด้วย แต่มีข้อแม้คือ: การเขียนเป็นแบบปลอม API จะคืนค่าการตอบสนองที่สมจริงราวกับว่าการเปลี่ยนแปลงเกิดขึ้นจริง แต่ไม่มีอะไรถูกบันทึกไว้ รีเฟรชแล้วโพสต์ "ใหม่" ของคุณจะหายไป นั่นเป็นเรื่องปกติสำหรับการเชื่อมต่อโค้ด UI กับข้อมูลที่คาดเดาได้ แต่มันไม่ใช่ backend จริง

json-server vs JSONPlaceholder

เลือกใช้ JSONPlaceholder เมื่อคุณต้องการข้อมูลในนาทีนี้และไม่สนใจว่ามันคืออะไร เลือกใช้ json-server เมื่อคุณต้องการทรัพยากรของคุณเองและการเขียนที่คงอยู่

เครื่องมือเหล่านี้ไปได้ไกลแค่ไหน

json-server และ JSONPlaceholder ยอดเยี่ยมในเรื่องเดียว: การให้บริการ JSON อย่างรวดเร็ว พวกมันเริ่มมีปัญหาเมื่อโปรเจกต์เติบโตเกินกว่าต้นแบบเดี่ยวๆ

• ไม่มีการตรวจสอบที่แท้จริง พวกมันไม่ได้บังคับใช้สคีมา โพสต์สตริงในตำแหน่งที่ควรจะเป็นตัวเลข มันจะถูกจัดเก็บอย่างมีความสุข API จริงของคุณจะปฏิเสธมัน
• ไม่มีข้อมูลแบบไดนามิกหรืออัจฉริยะ การตอบสนองคือสิ่งใดก็ตามที่อยู่ในไฟล์ ไม่มีวิธีในตัวที่จะคืนค่าอีเมลสุ่มใหม่ๆ หรือวันที่ในอนาคตต่อคำขอ
• โลคัลและผู้ใช้คนเดียว json-server ทำงานบนแล็ปท็อปของคุณ เพื่อนร่วมทีมหรือ CI job ไม่สามารถเรียก localhost:3000 ได้ JSONPlaceholder เป็นแบบแบ่งปัน แต่คุณไม่สามารถปรับแต่งได้
• คลาดเคลื่อนจากสเปกของคุณ ข้อมูลปลอมอยู่ในไฟล์แยกต่างหาก ซึ่งไม่ได้เชื่อมต่อกับสัญญา OpenAPI ของคุณ ดังนั้นทั้งสองจึงคลาดเคลื่อนกันเมื่อ API พัฒนาไป
• การเขียนปลอม (JSONPlaceholder) อะไรก็ตามที่เป็นแบบมีสถานะ เช่น ตะกร้าสินค้า หรือขั้นตอนหลายขั้นตอน ไม่สามารถทดสอบกับมันได้

หากคุณเติบโตเกินกว่าไฟล์ธรรมดา บทสรุปของเราเกี่ยวกับ เครื่องมือสำหรับการจำลอง endpoint ของ REST และ เซิร์ฟเวอร์ mock API ราคาถูกและฟรี ครอบคลุมระดับถัดไป และ การเปรียบเทียบเครื่องมือจำลอง API ออนไลน์ จะนำเสนอตัวเลือกที่โฮสต์ไว้เคียงข้างกัน

เมื่อใดที่ควรเปลี่ยนไปใช้ mock server จริง

mock ที่รับรู้สคีมาแก้ไขข้อจำกัดข้างต้นทุกประการ นี่คือจุดที่ Apidog เข้ามารับช่วงต่อจาก json-server

• ขับเคลื่อนด้วยสคีมา ไม่ใช่ขับเคลื่อนด้วยไฟล์ กำหนด endpoint (หรือนำเข้า OpenAPI spec ของคุณ) และ Apidog จะจำลองมันโดยอัตโนมัติ mock และสัญญาจะคงอยู่ในซิงค์เนื่องจากเป็นคำจำกัดความเดียวกัน
• ข้อมูลอัจฉริยะและไดนามิก Apidog อ่านชื่อฟิลด์และประเภท และคืนค่าที่สมจริง: อีเมลที่ถูกต้องสำหรับฟิลด์ email, วันที่สำหรับ createdAt, ตัวเลขสำหรับ price คุณสามารถแนบกฎสไตล์ Faker ต่อฟิลด์เพื่อการควบคุมเต็มรูปแบบ คู่มือของเราเกี่ยวกับ Faker.js ใน Apidog และคำแนะนำที่กว้างขึ้นของ ตัวสร้างข้อมูลทดสอบ จะเจาะลึกเกี่ยวกับการสร้างค่าที่สมจริง
• URL คลาวด์ที่แชร์ได้ Apidog ให้ mock URL ที่โฮสต์ซึ่งทั้งทีมและ CI pipeline ของคุณสามารถเรียกใช้ได้ ไม่ใช่แค่ localhost
• ไม่จำเป็นต้องใช้ Node ไม่ต้องติดตั้งแพ็กเกจต่อโปรเจกต์ และไม่ต้องดูแล db.json

จำลอง API เดียวกันใน Apidog

1. ดาวน์โหลด Apidog และสร้างหรือเปิดโปรเจกต์
2. เพิ่ม endpoint เช่น GET /posts และกำหนดสคีมาการตอบกลับ (หรือนำเข้าไฟล์ OpenAPI ที่มีอยู่)
3. Apidog สร้าง mock URL และเริ่มส่งคืนข้อมูลที่ชาญฉลาดและสมจริงสำหรับทุกฟิลด์ทันที
4. ต้องการค่าเฉพาะ? เพิ่มกฎ mock ต่อฟิลด์เพื่อกำหนดผลลัพธ์
5. แชร์ mock URL กับทีมของคุณ หรือนำไปใส่ในชุดทดสอบและ CI ของคุณ

คุณยังคงความเร็ว "API ในไม่กี่นาที" ของ json-server และคุณจะได้รับคุณสมบัติการตรวจสอบ ข้อมูลไดนามิก และ URL ที่ทุกคนสามารถเข้าถึงได้

คำถามที่พบบ่อย

json-server ฟรีหรือไม่? ใช่ มันเป็นโอเพนซอร์สและใช้งานได้ฟรี JSONPlaceholder ก็ฟรีเช่นกัน

json-server เก็บข้อมูลถาวรหรือไม่? ใช่ คำสั่ง POST, PUT, PATCH และ DELETE จะเขียนกลับไปยัง db.json ของคุณ ดังนั้นการเปลี่ยนแปลงจะคงอยู่ระหว่างคำขอในขณะที่เซิร์ฟเวอร์ทำงาน JSONPlaceholder จะจำลองการเขียนและไม่ได้บันทึกอะไรเลย

ฉันสามารถใช้ json-server ในการผลิตได้หรือไม่? ไม่ มันถูกสร้างมาเพื่อการสร้างต้นแบบและการทดสอบเท่านั้น ไม่มีระบบการตรวจสอบจริง การรับรองความถูกต้อง หรือความสามารถในการขยายขนาด

ความแตกต่างระหว่าง json-server และ mock server อย่าง Apidog คืออะไร? json-server ทำหน้าที่เป็นไฟล์คงที่ในรูปแบบ API Apidog จำลองจากสคีมา API ของคุณ คืนค่าข้อมูลไดนามิกที่สมจริง และเผยแพร่ URL คลาวด์ที่สามารถแชร์ได้ โปรดดู mock API คืออะไร และ บทสรุปเครื่องมือจำลอง REST เพื่อทำความเข้าใจบริบทเพิ่มเติม

ฉันจะได้รับข้อมูลปลอมที่สมจริงแทนที่จะเป็นแถวข้อมูลคงที่ได้อย่างไร? ใช้เครื่องกำเนิดข้อมูล ตัวสร้างข้อมูลทดสอบ จะสร้างบันทึกที่หลากหลายและสมจริง และ mock ของ Apidog จะทำสิ่งนี้โดยอัตโนมัติจากสคีมาของคุณ

เวอร์ชันย่อ

json-server เปลี่ยนไฟล์ JSON ให้เป็น REST API ที่ใช้งานได้ด้วยคำสั่งเดียว และ JSONPlaceholder มอบ API ปลอมที่โฮสต์ไว้ให้คุณโดยไม่ต้องตั้งค่าใดๆ ทั้งสองเหมาะสำหรับการเริ่มทำงานอย่างรวดเร็ว เมื่อคุณต้องการการตรวจสอบสคีมา ข้อมูลไดนามิก สถานะที่คงอยู่ และ URL ที่ทีมของคุณสามารถเข้าถึงได้จริง ไฟล์ธรรมดาไม่เพียงพอ นั่นคือจุดที่ mock server ของ Apidog เข้ามารับช่วงต่อ ดาวน์โหลด Apidog นำเข้า spec ของคุณ และ mock ของคุณจะตรงกับสัญญาจริงตั้งแต่คำขอแรก