mock数据

1.mock是什么

Mock是一种模拟行为的技术，通常用于软件开发过程中，特别是在单元测试和前端开发中。它指的是创建模拟对象（mock objects）来代替实际的依赖项，以便在不依赖实际组件的情况下测试代码。

2.引入mock

mock.js文档
http://mockjs.com/examples.html#Number
mock运用实例
https://github.com/nuysoft/Mock/wiki

3.mock文件

创建一个js文件，，例如创建一个userInformation.js文件，该文件使用Mock.js生成模拟的用户信息数据，并通过export将其暴露给外部使用

function queryNumberMock() {
    return {
        "code": 200,
        "data":
            {
                "initiate|1-100": 100,
                "project|1-100": 100,
                "task|1-100": 100,
            }

    }
}

export default {
    queryNumberMock
};

3.index文件中引入mock文件

可自定义路径，引入mock创建模板函数，当axios请求路径是/number/queryNumberDetail/时，拦截请求，返回模拟数据

// 引入Mockjs
import Mock from "mockjs";
// 引入模板数据
import userInformation from "./modules/userInformation.js";

const { mock } = Mock; // Mock函数
// 用户工作台
mock(/.*?\/number\/queryNumberDetail/, "get", userInformation.queryNumberMock());

4.接口

前端采用axios进行数据传输，创建axios实例

import axios from 'axios'
class AxiosService {
  // axios 请求实例
  request;

  constructor(baseURL, timeout = 1000 * 60) {
	this.request = axios.create({
	  baseURL: baseURL,
	  timeout: timeout,
	});
}

发送HTTP请求

import AxiosService from '@/utils/request.js'

const {request} = new AxiosService(‘/api’)
``

export function queryNumber(userId) {
    return request({
        url: `/number/queryNumberDetail?id=${userId}`,
        method: 'get',
    })
}

5.页面引用

vue3.0的setup写法如下：
引入方法js文件，直接使用函数返回mock数据

import {queryNumber} from "@/api/userInfomation.js";
onMounted(getData)
function  getData(){
  queryNumber().then(result=>{
    console.log(result)
  })
}