前端开发数据模拟简单省事法：在 Vue-CLI 中引入 simple-mock

2024-02-13 08:27:48

simple-mock 简介

simple-mock 是一个轻量级、易于使用的 JavaScript 库，可以轻松模拟 API 接口的数据返回。它支持多种数据格式，包括 JSON、XML 和文本。

2. 在 Vue-CLI 中引入 simple-mock

2.1 安装 simple-mock

npm install --save-dev simple-mock

2.2 在 main.js 中引入 simple-mock

import SimpleMock from 'simple-mock';

// 将 SimpleMock 挂载到 Vue 原型上
Vue.prototype.$simpleMock = SimpleMock;

3. 使用 simple-mock 模拟数据

3.1 创建模拟数据

// 假设有一个接口 /api/users，返回所有用户数据
const users = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' }
];

// 使用 simple-mock 模拟 /api/users 接口的 GET 请求
Vue.prototype.$simpleMock.mock('/api/users', 'GET', users);

3.2 在组件中使用模拟数据

// 在组件中使用模拟数据
export default {
  methods: {
    fetchUsers() {
      // 使用 fetch 请求模拟的 /api/users 接口
      fetch('/api/users').then(res => res.json()).then(data => {
        console.log(data); // 输出模拟数据
      });
    }
  }
};