Trong bài viết này, chúng ta sẽ thiết lập JSON server không chỉ với các endpoint cơ bản mà còn tùy chỉnh sâu hơn qua routes, middleware, proxy, xác thực, và cấu trúc dữ liệu động. Đây là hướng dẫn chi tiết với các bước mở rộng để tạo một API mạnh mẽ và dễ tùy chỉnh.

1. Cài đặt `json-server`

Để cài đặt json-server, hãy sử dụng lệnh sau để cài đặt toàn cục:

npm install -g json-server

2. Tạo cơ sở dữ liệu JSON

Bạn có thể tạo một tệp db.json với cấu trúc phức tạp hơn, mô phỏng một hệ thống quản lý blog với các thực thể như bài viết, bình luận, người dùng, và tác giả.

Ví dụ về tệp db.json:

{
  "posts": [
    { "id": 1, "title": "Post 1", "content": "Content of post 1", "authorId": 1 },
    { "id": 2, "title": "Post 2", "content": "Content of post 2", "authorId": 2 }
  ],
  "comments": [
    { "id": 1, "postId": 1, "authorId": 2, "text": "Great post!" },
    { "id": 2, "postId": 2, "authorId": 1, "text": "Very informative." }
  ],
  "users": [
    { "id": 1, "name": "Alice", "email": "[email protected]" },
    { "id": 2, "name": "Bob", "email": "[email protected]" }
  ],
  "authors": [
    { "id": 1, "name": "Author 1", "bio": "Bio of Author 1" },
    { "id": 2, "name": "Author 2", "bio": "Bio of Author 2" }
  ]
}

3. Chạy Server

Khởi động server với lệnh cơ bản:

json-server --watch db.json

4. Tùy chỉnh Routes

Bạn có thể tùy chỉnh các route bằng cách tạo tệp routes.json để điều chỉnh cách hoạt động của các endpoint:

{
  "/api/posts": "/posts",
  "/api/comments": "/comments",
  "/api/users": "/users",
  "/api/authors": "/authors",
  "/api/posts/:id/comments": "/comments?postId=:id"
}

Chạy server với route tùy chỉnh:

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

5. Sử dụng Middleware Tùy Chỉnh

Bạn có thể sử dụng middleware để thêm các thao tác đặc biệt trước hoặc sau khi xử lý yêu cầu. Ví dụ, xác thực token cơ bản:

Tạo file server.js:

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

server.use((req, res, next) => {
  if (req.headers.authorization === 'Bearer my-token') {
    next();
  } else {
    res.sendStatus(401);
  }
});

server.use(middlewares);
server.use(router);

server.listen(3000, () => {
  console.log('JSON Server is running');
});

Chạy server:

node server.js

6. Query và Filter Nâng Cao

JSON server hỗ trợ nhiều tính năng lọc dữ liệu, phân trang và sắp xếp. Ví dụ:

Lọc theo trường cụ thể:

GET http://localhost:3000/posts?authorId=1

Phân trang:

GET http://localhost:3000/posts?_page=1&_limit=5

Sắp xếp:

GET http://localhost:3000/posts?_sort=title&_order=asc

7. Cấu Hình Proxy để Phát Triển Frontend

Khi phát triển frontend và backend cùng lúc, bạn có thể cấu hình proxy trong React hoặc Vue.js để chuyển tiếp các yêu cầu API tới JSON server:

Trong React (tệp package.json):

{
  "name": "my-app",
  "version": "1.0.0",
  "proxy": "http://localhost:3000",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

8. Sử dụng `db.js` để Tạo Dữ liệu Động

Bạn có thể tạo dữ liệu ngẫu nhiên thay vì sử dụng tệp JSON tĩnh bằng cách tạo tệp db.js:

module.exports = () => {
  const data = { posts: [], comments: [], users: [] };

  for (let i = 0; i < 50; i++) {
    data.posts.push({ id: i, title: `Post ${i}`, content: `Content of post ${i}` });
    data.comments.push({ id: i, postId: i, text: `Comment on post ${i}` });
    data.users.push({ id: i, name: `User ${i}`, email: `user${i}@example.com` });
  }

  return data;
};

Chạy server:

json-server --watch db.js

9. Xác Thực Người Dùng với `json-server-auth`

Bạn có thể sử dụng json-server-auth để thêm xác thực người dùng tự động:

Cài đặt:

npm install json-server-auth

Cấu hình xác thực trong server.js:

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

server.use(middlewares);
server.use(auth);
server.use(router);

server.listen(3000, () => {
  console.log('Server is running with authentication');
});

10. Kết Luận

json-server là công cụ mạnh mẽ giúp bạn xây dựng API giả lập với các tính năng tùy chỉnh linh hoạt như routes, middleware, proxy, và xác thực. Điều này giúp bạn tạo ra một môi trường phát triển hoàn chỉnh mà không cần phải xây dựng backend phức tạp từ đầu.