Tạo API giả lập nhanh bằng JSON Server trong JavaScript

"scripts": {
  "start:api": "json-server --watch db.json --port 3001"
}

Giờ đây, bạn chỉ cần chạy:

npm run start:api

Tạo file dữ liệu JSON trong JavaScript

Sau khi đã cài đặt thành công JSON Server, bước tiếp theo là tạo một file JSON chứa dữ liệu mô phỏng – đây chính là “cơ sở dữ liệu giả lập” để JSON Server sử dụng và tạo ra API.

Tạo file db.json

Bạn có thể tạo một file mới có tên là db.json ở thư mục gốc của dự án hoặc bất kỳ vị trí nào bạn muốn.

Nội dung file db.json phải là một object JSON hợp lệ, trong đó mỗi thuộc tính (key) đại diện cho một bảng dữ liệu (resource), còn giá trị là một mảng các đối tượng mô tả từng bản ghi.

Ví dụ nội dung file db.json:

{
  "users": [
    { "id": 1, "name": "Alice" },
    { "id": 2, "name": "Bob" }
  ],
  "posts": [
    { "id": 1, "title": "Hello World", "userId": 1 }
  ]
}

Giải thích cấu trúc:

• "users": là một danh sách người dùng. Mỗi phần tử là một object với id và name.

• "posts": là danh sách các bài viết. Mỗi bài có id, title, và userId (liên kết với người dùng).

Đây là cấu trúc mô phỏng một mối quan hệ đơn giản giữa users và posts, gần giống với hệ quản trị cơ sở dữ liệu thực tế.

Một số lưu ý khi viết file db.json:

• Phải đảm bảo tệp JSON hợp lệ: đúng định dạng, đúng dấu ngoặc, có dấu phẩy ngăn cách nhưng không được có dấu phẩy cuối cùng.

• Mỗi "resource" nên có một trường id duy nhất cho từng bản ghi – đây là cách JSON Server quản lý dữ liệu.

• Bạn có thể thêm nhiều resource khác nhau như comments, products, categories tùy ý.

Sau khi có file db.json, bạn có thể chạy JSON Server với lệnh sau:

json-server --watch db.json

Mặc định server sẽ chạy ở https://localhost:3000/, và bạn có thể truy cập các endpoint như:

• GET https://localhost:3000/users

• GET https://localhost:3000/posts

• GET https://localhost:3000/posts/1

Chạy JSON Server trong JavaScript

Sau khi đã tạo xong file dữ liệu db.json, bạn có thể bắt đầu khởi chạy JSON Server để tạo ra một RESTful API hoàn chỉnh từ chính file này.

Lệnh khởi chạy cơ bản

json-server --watch db.json

• --watch: giúp theo dõi file db.json – nếu bạn chỉnh sửa file này, server sẽ tự động cập nhật dữ liệu mà không cần khởi động lại.

• db.json: là file dữ liệu JSON bạn đã tạo.

Sau khi chạy lệnh, JSON Server sẽ khởi động tại địa chỉ mặc định:

https://localhost:3000

Các endpoint được tạo tự động

JSON Server sẽ tự động tạo các endpoint RESTful dựa trên cấu trúc dữ liệu trong db.json. Ví dụ, với phần users trong file:

"users": [
  { "id": 1, "name": "Alice" },
  { "id": 2, "name": "Bob" }
]

Bạn sẽ có các endpoint sau:

Tương tự, với các resource khác như posts, products, comments… cũng sẽ có các endpoint tự động tương ứng.

Mở rộng cấu hình (tuỳ chọn)

Nếu muốn thay đổi cổng chạy server (mặc định là 3000), bạn có thể dùng tham số --port:

json-server --watch db.json --port 4000

Hoặc nếu muốn chỉ định một file JSON khác:

json-server --watch data/products.json

Sau khi chạy, bạn có thể mở trình duyệt hoặc dùng Postman để gửi request đến các endpoint và kiểm tra hoạt động.

Tuỳ chỉnh JSON Server trong JavaScript

JSON Server không chỉ đơn giản là chạy trên mặc định – bạn hoàn toàn có thể tùy chỉnh để phù hợp với yêu cầu phát triển của mình. Dưới đây là một số cách tuỳ chỉnh phổ biến:

Tuỳ chỉnh cổng chạy

Mặc định, JSON Server sẽ chạy ở https://localhost:3000. Bạn có thể thay đổi cổng bằng cách thêm tuỳ chọn --port:

json-server --watch db.json --port 4000

Khi đó, server sẽ chạy tại https://localhost:4000.

Tạo route riêng bằng routes.json

Nếu bạn muốn tuỳ chỉnh đường dẫn API (ví dụ: chuyển /users/1 thành /profile), hãy tạo một file routes.json và khai báo:

routes.json

{
  "/profile": "/users/1"
}

Lúc này, khi truy cập https://localhost:3000/profile, nó sẽ trả về dữ liệu từ /users/1.

Lệnh chạy kèm routes:

json-server --watch db.json --routes routes.json

Sử dụng middleware tùy chỉnh (với Node.js)

JSON Server cũng cho phép bạn mở rộng bằng cách tích hợp vào một ứng dụng Node.js để thêm logic xử lý trung gian (middleware), như xác thực, ghi log, phân quyền, v.v.

Ví dụ đơn giản:

const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();

// Middleware tùy chỉnh – ví dụ log request method và URL
server.use((req, res, next) => {
  console.log(`${req.method} ${req.url}`);
  next();
});

server.use(middlewares);
server.use(router);
server.listen(3000, () => {
  console.log('JSON Server is running on port 3000');
});

Chạy bằng Node.js:

Tạo file server.js, chép đoạn code trên vào, sau đó chạy:

node server.js

Tích hợp JSON Server với ứng dụng frontend trong JavaScript

Sau khi đã khởi chạy JSON Server, bạn hoàn toàn có thể sử dụng nó như một API thật để tích hợp vào các ứng dụng frontend như React, Vue, hoặc đơn giản là HTML/JS thuần.

Sử dụng Fetch API (JS thuần hoặc React)

Dùng fetch() để lấy dữ liệu từ JSON Server như một REST API bình thường:

fetch('https://localhost:3000/users')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(error => console.error('Lỗi:', error));

Kết quả trả về là một mảng users từ db.json.

Sử dụng Axios (React/Vue)

Nếu bạn dùng thư viện Axios, cú pháp đơn giản hơn:

import axios from 'axios';

axios.get('https://localhost:3000/users')
  .then(res => {
    console.log(res.data);
  })
  .catch(error => {
    console.error('Lỗi:', error);
  });

Ví dụ đơn giản trong React

import { useEffect, useState } from 'react';
import axios from 'axios';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('https://localhost:3000/users')
      .then(res => setUsers(res.data))
      .catch(err => console.error(err));
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

Một số lưu ý khi sử dụng JSON Server trong JavaScript

Dù rất tiện lợi, JSON Server vẫn có những giới hạn nhất định mà bạn cần ghi nhớ:

Không nên dùng cho môi trường production

• JSON Server không được thiết kế để chạy trong môi trường thực tế (production).

• Nó không có cơ chế bảo mật, xác thực, hay hiệu suất cao như các framework backend thật sự.

Chỉ nên dùng để:

• Mô phỏng API khi backend chưa sẵn sàng.

• Viết và test giao diện frontend nhanh chóng.

Dữ liệu không tự động lưu nếu không sửa file db.json

• Khi bạn thực hiện POST/PUT/DELETE qua API, dữ liệu chỉ lưu tạm trong bộ nhớ.

• Nếu không có flag --watch, thay đổi không được ghi vào file thật.

• Dùng --watch để đảm bảo file db.json được cập nhật theo thời gian thực.

json-server --watch db.json

Có thể reset lại dữ liệu

• Nếu bạn chỉnh sửa trực tiếp file db.json, JSON Server sẽ tự động reload dữ liệu gốc.

• Điều này rất hữu ích nếu bạn muốn reset API về trạng thái ban đầu sau mỗi lần thử nghiệm.\

Kết bài

JSON Server là một công cụ tuyệt vời giúp bạn tạo API giả lập nhanh chóng, dễ dàng và linh hoạt chỉ với một file JSON. Với khả năng hỗ trợ đầy đủ các phương thức REST (GET, POST, PUT, PATCH, DELETE), cùng khả năng tích hợp mượt mà với các framework frontend như React, Vue, Angular…, JSON Server trở thành giải pháp lý tưởng cho việc phát triển, thử nghiệm và demo ứng dụng khi backend chưa sẵn sàng.

Dù không phù hợp để triển khai trong môi trường production, JSON Server vẫn là một trợ thủ đắc lực cho các lập trình viên frontend và những ai muốn nhanh chóng dựng mô hình dữ liệu. Chỉ với vài dòng lệnh và một file db.json, bạn đã có thể khởi chạy một API hoàn chỉnh trong tích tắc.