Sử Dụng Thư Viện MockJS Trong Dự Án Vue.js

MockJS là một thư viện JavaScript giúp tạo dữ liệu ngẫu nhiên hoặc mô phỏng phản hồi HTTP, rất hữu ích trong các bài kiểm tra đơn vị, chức năng và tích hợp trong phát triển ứng dụng phía client.

MockJS có khả năng sinh ra nhiều loại dữ liệu như chuỗi ký tự, số, giá trị boolean, đối tượng, mảng, hỗ trợ nhiều định dạng dữ liệu bao gồm JSON, XML, YAML. Người dùng còn có thể tùy chỉnh định dạng và quy tắc tạo dữ liệu để đáp ứng yêu cầu nghiệp vụ khác nhau.

Thư viện này cũng cho phép mô phỏng các yêu cầu HTTP với các phương thức GET, POST, PUT, DELETE cùng khả năng tùy chỉnh tiêu đề yêu cầu, phản hồi, mã trạng thái, v.v. Nó còn hỗ trợ phản hồi trễ và phản hồi ngẫu nhiên để mô phỏng các tình huống mạng đa dạng.

Để sử dụng MockJS, bạn có thể thêm trực tiếp vào dự án hoặc tích hợp với các công cụ xây dựng như webpack hay framework Vue.js.

Tài liệu chính thức của MockJS có tại: https://github.com/nuysoft/Mock/blob/refactoring/README.md

Dưới đây là các bước cài đặt và sử dụng MockJS:

Cài đặt MockJS trong dự án

Có thể sử dụng npm hoặc yarn để cài đặt MockJS. Thực hiện các lệnh sau trong dòng lệnh:

npm install mockjs
hoặc

yarn add mockjs

Tạo dữ liệu giả lập

Tạo một thư mục tên là 'mock_data' trong dự án và thêm file index.js. Sử dụng API của MockJS để viết dữ liệu cần thiết:

const Mo = require('mockjs')

Mo.mock('/api/user', 'get', {
  status: 200,
  msg: 'thanh cong',
  thong_tin: {
    ma: '@guid',
    ten: '@cname',
    tuoi: '@integer(18, 60)',
    email: '@email',
    so_dt: /^1[3456789]\d{9}$/,
    gioi_tinh: ['nam', 'nu'][Math.floor(Math.random() * 2)]
  }
})

Mã trên định nghĩa một yêu cầu GET tới '/api/user', trả về thông tin người dùng ngẫu nhiên.

Chặn yêu cầu Ajax

Để chặn yêu cầu Ajax và trả về dữ liệu giả lập, có thể sử dụng các thư viện như axios hoặc jQuery.

Ví dụ với axios, khi gửi yêu cầu Ajax, bạn có thể chặn yêu cầu và trả về dữ liệu giả lập như sau:

import axios from 'axios'
import AxiosMock from 'axios-mock-adapter'
import du_lieu_gia_lap from './mock_data'

const mo = new AxiosMock(axios)

du_lieu_gia_lap.forEach((item) => {
  mo.onAny(item.url, item.method).reply(200, item.response)
})

Trong đoạn mã này, chúng ta đã nhập axios và axios-mock-adapter, tạo một đối tượng mo và duyệt qua dữ liệu giả lập để chặn yêu cầu Ajax và trả về dữ liệu tương ứng.

Kiểm thử dữ liệu giả lập

Khi sử dụng dữ liệu giả lập, cần kiểm thử tính đúng đắn và tính khả dụng bằng các công cụ như Postman, Swagger hoặc viết các bài kiểm thử đơn vị, chức năng.

Xem tài liệu chi tiết tại: https://github.com/nuysoft/Mock/blob/refactoring/README.md

Thẻ: Vue.js MockJS Axios

Đăng vào ngày 22 tháng 5 lúc 08:21

Thành phố Cuồng loạn

Sử Dụng Thư Viện MockJS Trong Dự Án Vue.js

Thẻ Phổ Biến