Mock.js使用

以前开发流程中，接口比较慢时都是自己写点死数据测试，不够高级~
目前在新项目中接触到了mock接口，现在记录学习下：

在Vue项目中，可以使用mock来模拟接口，方便进行开发和测试。
且正式环境中应该移除mock的配置和依赖，使用真实的接口数据。

http://mockjs.com/ Mock.js官网地址

1: 安装依赖

首先，需要安装 axios 和 mockjs 两个依赖包。可以使用 npm 或者 yarn 进行安装：

npm install axios mockjs --save-dev

2: 创建Mock数据

在项目的根目录下创建一个 mock 文件夹，并在其中创建一个 mock.js 文件。在 mock.js 文件中编写模拟的接口数据：

import Mock from 'mockjs';

Mock.mock('/api/users', 'get', {
  success: true,
  data: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Smith' }
  ]
});

上述代码模拟了一个 GET 请求 /api/users，返回一个包含两个用户对象的数据。

3: 配置Vue项目

在Vue项目中的入口文件（例如 main.js）中，引入 axios 和 mock.js，并配置axios的baseURL为mock的根路径：

import { createApp } from 'vue';
import axios from 'axios';
import './mock/mock'; // 导入mock.js

axios.defaults.baseURL = 'http://localhost:8080'; // mock服务器地址

createApp(App).mount('#app');

这里假设mock服务器运行在本地的 http://localhost:8080。

4: 发送请求

在Vue组件中，可以使用axios发送请求并获取模拟的数据。例如，在一个组件中发送GET请求：

import axios from 'axios';

export default {
  mounted() {
    axios.get('/api/users')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }
};

当组件挂载时，它会发送一个GET请求到 /api/users，并打印响应数据到控制台。