使用mock.js来模拟后台数据的方案

如何在项目中引入mockjs，从而实现脱离后端数据，前端做假数据来独立开发业务逻辑。

一. 安装依赖

npm i mockjs --save-dev

二. 使用mock

1. 按照业务模块建立一个文件来写模拟数据，比如建一个spaceAppoint.ts文件；其中mockjs的一些创建随机数的规则，可以查看文档

import Mock from 'mockjs'

const Random = Mock.Random
const tagList = Mock.mock({
  'list|10': [
    {
      'tagId|+1': Random.natural(),
      'tagName': '羽毛球',
      'groundingStatus': 0,
      'tagLogo': 'https://cdn.ideamake.cn/thumb/saas/visitors/images/avatar/2022-04-20-2bf1d44d6d9832794b7c1dad55c400fb-b2gZth39Q5.jpg?x-oss-process=image/resize,w_104,h_104,m=fill/interlace,1',
    },
  ],
})

export const getTagList = function () {
  return {
    code: 200,
    data: {
      ...tagList,
      current: 1,
      total: 10,
      pages: 1,
      size: 10,
    },
  }
}

2. 建立一个index.ts文件，将业务模块的文件都引入，并且编写拦截函数；

import { getTagList } from './spaceAppoint'
// 引入mockjs
import Mock from 'mockjs'

// 获取标签列表
Mock.mock(/\/project-business\/space-reservation-tag\/getTagList/, 'post', getTagList)

拦截异步请求

Mock.mock拦截ajax请求，有三个参数：

• 第一个参数：要拦截的请求路径
• 第二个参数：要拦截的请求方式
• 第三个参数：拦截之后的处理逻辑（它是一个函数）这个函数必须要有一个返回值，这个返回值就是返回给异步请求的结果

3. 在main.js中引入

import './mock' // 此处引入的是src/mock/index.ts文件

4. 在业务组件中还是按照正常方法编写代码，mock对业务代码是无侵入式的，当我们打开mock的时候，异步请求回自动拦截并返回数据，在浏览器network中无法看到接口请求，返回的是模拟数据。

5. 当想关闭mock的时候，将main.js中的引入mock注释掉即可

// import './mock' // 此处引入的是src/mock/index.ts文件