mock数据在vue里如何模拟登录接口

在Vue中模拟登录接口需要使用mock数据来模拟后端API返回的数据。可以使用mockjs来生成随机数据，并使用axios-mock-adapter拦截axios的请求，返回mock数据。

下面是一个简单的示例，假设登录接口的URL是`/login`，请求参数是用户名和密码。首先，我们需要安装mockjs和axios-mock-adapter：

npm install mockjs axios-mock-adapter --save-dev

然后，在Vue组件中引入axios和axios-mock-adapter，并初始化一个mock实例：

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import Mock from 'mockjs';

const mock = new MockAdapter(axios);

接下来，使用`mock.onPost`方法拦截POST请求，并返回模拟的数据：

mock.onPost('/login').reply(config => {
  const { username, password } = JSON.parse(config.data);

  // 这里可以根据用户名和密码进行逻辑处理，返回不同的数据

  return [200, Mock.mock({
    code: 200,
    message: '登录成功',
    data: {
      token: Mock.Random.guid(),
      username: username,
      avatar: Mock.Random.image('200x200')
    }
  })];
});

在以上示例中，我们使用Mock.mock方法生成了一个随机的响应数据，包括一个随机的token、用户名和头像。

最后，在Vue组件中使用axios发送请求即可：

axios.post('/login', {
  username: 'test',
  password: '123456'
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

这样就可以在Vue中模拟登录接口了。