Mock 数据

---

支持不依赖后端，本地方便调试数据。

实现原理

实现前后端的我们需要将 data 文件和 service 文件分隔开。 在TinyPro of Vue中，我们在src/api中定义数据的类型，同时在src/api中实现相关的接口文件。

下面以登录为例，介绍 Mock 数据的使用。

首先需要在src/api/user.ts文件中定义数据参数类型：

import axios from 'axios';
import { UserState } from '@/store/modules/user/types';

export interface LoginData {
  username: string;
  password: string;
}

export function login(data: LoginData) {
  return axios.post<LoginRes>('/api/user/login', data);
}

在src/mock/user.ts文件中我们实现接口定义具体要模拟的数据。

  {
    url: '/api/user/login',
    method: 'post',
    response: (params: MockParams) => {
      const { username, password } = JSON.parse(JSON.stringify(params.body));
      if (!username) {
        return failResponseWrap(null, '用户名不能为空', 50000);
      }
      if (!password) {
        return failResponseWrap(null, '密码不能为空', 50000);
      }
      if (username === 'admin' && password === 'admin') {
        window.localStorage.setItem('userRole', 'admin');
        return successResponseWrap({
          token: '12345',
        });
      }
      if (username === 'user' && password === 'user') {
        window.localStorage.setItem('userRole', 'user');
        return successResponseWrap({
          token: '54321',
        });
      }
      return failResponseWrap(null, '账号或者密码错误', 50000);
    },
  },

项目中使用

在src/view/login中调用你的 service：

    async login(loginForm: LoginData) {
      try {
        const res = await userLogin(loginForm);
        setToken(res.data.token);
      } catch (err) {
        clearToken();
        throw err;
      }
    },