Để phát triển frontend độc lập mà không phụ thuộc vào backend, việc mô phỏng dữ liệu API là một kỹ thuật thiết yếu. Bài viết này trình bày cách tích hợp Mock.js vào dự án Vue (phiên bản CLI 4/5) kết hợp với axios để giả lập các endpoint HTTP như GET và POST.

1. Khởi tạo dự án

Sử dụng giao diện đồ họa Vue CLI để tạo dự án mới:

vue ui

Sau đó chọn các tùy chọn phù hợp qua wizard — không cần cấu hình đặc biệt nào khác.

2. Cài đặt thư viện hỗ trợ

Chạy lệnh sau để cài đặt axios và mockjs:

npm install axios mockjs

Kiểm tra phiên bản trong package.json:

"axios": "^1.6.0",
"mockjs": "^1.1.0"

3. Thiết kế lớp yêu cầu HTTP (api.ts)

Tạo file src/utils/api.ts với logic xử lý request/response và wrapper cho các phương thức phổ biến:

import axios from 'axios';

// Thiết lập header mặc định cho POST
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// Interceptor yêu cầu
axios.interceptors.request.use(
  config => config,
  error => Promise.reject(error)
);

// Interceptor phản hồi
axios.interceptors.response.use(
  response => response.data,
  error => Promise.reject(error)
);

export const httpPost = <T>(url: string, data?: any): Promise<T> => 
  axios.post(url, data).then(res => res.data);

export const httpGet = <T>(url: string, params?: any): Promise<T> => 
  axios.get(url, { params }).then(res => res.data);

export default {
  post: httpPost,
  get: httpGet
};

4. Triển khai mock server cục bộ (mock/index.ts)

Tạo thư mục src/mock/, sau đó thêm file index.ts:

import Mock from 'mockjs';
import { UserList } from './data/user'; // Dữ liệu mẫu được tách riêng

// Hàm sinh dữ liệu tin tức ngẫu nhiên
const generateNewsFeed = () => {
  const list = [];
  for (let i = 0; i < 50; i++) {
    list.push({
      id: Mock.Random.guid(),
      headline: Mock.Random.cparagraph(1, 3),
      coverUrl: Mock.Random.dataImage('400x300', 'Ảnh minh họa'),
      author: Mock.Random.cname(),
      publishedAt: `${Mock.Random.date('yyyy-MM-dd')} ${Mock.Random.time('HH:mm:ss')}`
    });
  }
  return { code: 200, data: list };
};

// Đăng ký các route giả lập
Mock.mock('/api/news/feed', 'post', generateNewsFeed);
Mock.mock('/api/news/feed', 'get', { code: 200, message: 'OK' });
Mock.mock('/api/users/list', 'get', () => ({ code: 200, data: UserList }));

File src/mock/data/user.ts chứa dữ liệu tĩnh dạng object:

export const UserList = [
  { id: 1, name: 'Nguyễn Văn A', role: 'admin', email: 'a@example.com' },
  { id: 2, name: 'Trần Thị B', role: 'editor', email: 'b@example.com' }
];

5. Kích hoạt mock trong ứng dụng

Mở src/main.ts và thêm dòng import ở đầu file:

// Kích hoạt mock chỉ trong môi trường dev
if (process.env.NODE_ENV === 'development') {
  require('@/mock/index.ts');
}

6. Sử dụng trong component Vue

Ví dụ trong HomeView.vue:

<script setup lang="ts">
import api from '@/utils/api';

const fetchNews = async () => {
  try {
    const result = await api.post<any>('/api/news/feed', { category: 'tech' });
    console.log('Danh sách tin:', result.data);
  } catch (err) {
    console.error('Lỗi khi gọi API:', err);
  }
};

const fetchUsers = async () => {
  const users = await api.get<{ data: any[] }>('/api/users/list');
  console.log('Danh sách người dùng:', users.data);
};

fetchNews();
fetchUsers();
</script>

7. Tắt ESLint strict mode (tùy chọn)

Nếu muốn giảm mức độ nghiêm ngặt của kiểm tra mã, tạo file vue.config.js ở gốc dự án:

module.exports = {
  lintOnSave: false,
  devServer: {
    client: {
      overlay: false
    }
  }
};