Hướng dẫn dùng jsonserver JavaScript - sử dụng jsonserver JavaScript

1. Giới thiệu về Json-server.

• Json server hiểu đơn giản là một server trả về các dữ liệu dưới dạng json. Ở bài viết này mình sẽ hướng dẫn các bạn xây dựng một bộ “Fake” REST API với đầy đủ các tác vụ cơ bản CRUD.

Trong bài viết mình sử dụng thư viện : json-server. Các bạn có thể tham khảo tài liệu thư viện này tại: https://www.npmjs.com/package/json-server.

2. Cài đặt json-server phía client.

Tại terminal các bạn chạy dòng lệnh dưới đây để cài đặt json-server:

sudo npm install -g json-server

Tạo một thư mục với tên JsonServer. Tạo một file db.json với nội dung:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Chạy lệnh:

json-server --watch db.json 

Kết quả ta có:

Như kết quả ta thấy, json-server đã tạo cho chúng ta một địa chỉ là: http://localhost:3000 và 3 địa chỉ khác là http://localhost:3000/posts, http://localhost:3000/comments, http://localhost:3000/profile. Các địa chỉ này tương ứng với các api lấy danh sách posts, comments, profile đã tạo trong file db.json.

Các bạn mở một địa chỉ bất kì trên trình duyệt, ở đây mình dùng Chrome:

Kết quả ta đã có được một dữ liệu dạng json trả về thông tin bài posts đã tạo trong file json.db.

Như vậy việc cài đặt json-server đã hoàn thành.

3. Tạo một cấu trúc json-server.

Trong bài viết này chúng ta sẽ tạo ra một cấu trúc dữ liệu quản lý lớp và học sinh trong lớp( đã quá quên với các bạn lập trình).

3.1 Cài đặt môi trường node.

Trong thư mục vừa tạo chạy lệnh:

npm init

Sau đó cập nhật các thông tin như hướng dẫn. Sau khi thành công ta có file package.json

Tạo file .gitignore cho project. Ở đây mình sử dụng một base gitignore dành cho node tại https://www.toptal.com/developers/gitignore/api/node.

Cài đặt json-server vào vào project:

npm i json-server

Cài đặt nodemon:

npm i --save-dev nodemon

Taọ file main.js với nội dung:

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

// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares)

// Add custom routes before JSON Server router
server.get('/echo', (req, res) => {
  res.jsonp(req.query)
})

// To handle POST, PUT and PATCH you need to use a body-parser
// You can use the one used by JSON Server
server.use(jsonServer.bodyParser)
server.use((req, res, next) => {
  if (req.method === 'POST') {
    req.body.createdAt = Date.now()
  }
  // Continue to JSON Server router
  next()
})

// Use default router
server.use('/api',router)
server.listen(3000, () => {
  console.log('JSON Server is running')
})

Ở đây mình mình sẽ chỉ đỉnh địa chỉ có mình là : http://localhost:3000/api

Tạo một scripts để chạy cho môi trường dev.

"dev": "nodemon main.js"

Vậy là việc cài đặt đã xong. Chạy lệnh:

npm run dev

Kết quả chúng ta đã có dữ liệu khi truy cập địa chỉ: http://localhost:3000/api/class.

3.2 Khởi tạo dữ liệu ngẫu nhiên cho db.json

Có rất nhiều thư viện hỗ trợ việc random dữ liệu như Faker, Casual, Chance or JSON Schema Faker… trong bài viết này mình sẽ dùng Faker( vì đơn giản nghe nó giống một idol trong Legend of league)

Cài đặt Faker:

npm i --save-dev faker

Tạo file render-data.js trong cấu trúc project và scripts trong package.json.

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Ý tưởng ở đây để tạo một cấu trúc dữ liệu dạng Json như mục tiêu ban đầu, chúng ta cần tạo ra một danh sách các lớp và sau đó tạo danh sách học sinh cho từng lớp.

3.2.1 Tạo danh sách lớp ngẫu nhiên.

Hàm khởi tạo danh sách gồm n lớp:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Sử dụng IIFE function để thực thi việc tạo dữ liệu:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Chạy lệnh:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Kết quả ta có:

Như kết quả ta thấy, json-server đã tạo cho chúng ta một địa chỉ là: http://localhost:3000 và 3 địa chỉ khác là http://localhost:3000/posts, http://localhost:3000/comments, http://localhost:3000/profile. Các địa chỉ này tương ứng với các api lấy danh sách posts, comments, profile đã tạo trong file db.json.

Các bạn mở một địa chỉ bất kì trên trình duyệt, ở đây mình dùng Chrome:

Kết quả ta đã có được một dữ liệu dạng json trả về thông tin bài posts đã tạo trong file json.db.

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Như vậy việc cài đặt json-server đã hoàn thành.

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Chạy lệnh:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Kết quả ta có:

Như kết quả ta thấy, json-server đã tạo cho chúng ta một địa chỉ là: http://localhost:3000 và 3 địa chỉ khác là http://localhost:3000/posts, http://localhost:3000/comments, http://localhost:3000/profile. Các địa chỉ này tương ứng với các api lấy danh sách posts, comments, profile đã tạo trong file db.json.

Các bạn mở một địa chỉ bất kì trên trình duyệt, ở đây mình dùng Chrome:

Kết quả ta đã có được một dữ liệu dạng json trả về thông tin bài posts đã tạo trong file json.db.

Như vậy việc cài đặt json-server đã hoàn thành.

3. Tạo một cấu trúc json-server.

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Trong bài viết này chúng ta sẽ tạo ra một cấu trúc dữ liệu quản lý lớp và học sinh trong lớp( đã quá quên với các bạn lập trình).

3.1 Cài đặt môi trường node.

Trong thư mục vừa tạo chạy lệnh:

Sau đó cập nhật các thông tin như hướng dẫn. Sau khi thành công ta có file package.json

Tạo file .gitignore cho project. Ở đây mình sử dụng một base gitignore dành cho node tại https://www.toptal.com/developers/gitignore/api/node.

Cài đặt json-server vào vào project:

Cài đặt nodemon:

Taọ file main.js với nội dung:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Ở đây mình mình sẽ chỉ đỉnh địa chỉ có mình là : http://localhost:3000/api

Tạo một scripts để chạy cho môi trường dev.

Vậy là việc cài đặt đã xong. Chạy lệnh:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Kết quả chúng ta đã có dữ liệu khi truy cập địa chỉ: http://localhost:3000/api/class.

3.2 Khởi tạo dữ liệu ngẫu nhiên cho db.json

Có rất nhiều thư viện hỗ trợ việc random dữ liệu như Faker, Casual, Chance or JSON Schema Faker… trong bài viết này mình sẽ dùng Faker( vì đơn giản nghe nó giống một idol trong Legend of league)

Cài đặt Faker:

Tạo file render-data.js trong cấu trúc project và scripts trong package.json.

json-server --watch db.json 

Tương tự các với các phương thức POST, PUT, PATCH các bạn sẽ sử dụng Postman để kiểm tra.

Ngoài ra còn rất nhiều trường hợp truy vấn api như sắp xếp, tìm kiếm… các bạn có thể tham khảo thêm tại tài liệu của json-server. Mình sẽ để link ở phần cuối bài viết.

5. Tổng kết.

Trong bài viết này mình đã chia sẻ với các bạn cách để tạo một json-server đẻ mock api cho riêng mình phục vụ cho quá trình phát triển ứng dụng.

Việc mock các api giúp các bạn có thể thực hiện các hàm gọi api ngay chính trên ứng dụng font-end của mình để rút ngắn thời gian ghép nối với các api thực thế của back-end sau này.

Trên đây là những chia sẻ của mình sau khi nghiên cứu thư viện json-server. Có thể sẽ có những phần sai xót, rất mong nhận được góp ý từ phía các bạn.

Tài liệu tham khảo: https://github.com/typicode/json-server

Source code: https://github.com/ducgiangtrankma/Json-server-public.git