小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

在前端开发的时候，往往都需要都需要后端提供接口数据来进行相应页面的开发。但这个时候就需要后端先行开发，之后前端才进行开发，从而可能会影响开发效率。

那前端能不能独立进行开发呢？答案是可以的。接下来就有请我们今天的主角，Mock.js。

Mock.js

是一款模拟数据生成器
生成随机数据，拦截 Ajax 请求。
Mock.js这个工具完全可以通过我们设置的规则，来提供数据，从而解决了前端不能独立开发的问题。
而且当对接后端接口的时候，也不需要修改既有代码。

使用

// 安装
npm install mockjs

假设我们有一个获取轮播图的接口。

/**
 * 轮播图
 */
export const getBanners = () => request({
  url: '/mall/banners',
  method: 'get'
});

这个时候就通过Mock.js拦截这个接口，并提供相应的数据。
首先通过Mock.js生成数据并导出。

// mail.js
import Mock from 'mockjs'

export default {
  // 轮播图
  getBanners: config => {
    return {
      "data": [
        {
          "image": "https://s11.mogucdn.com/mlcdn/c45406/201126_0hgl23klege84596ljk0hgcc0g3f2_1060x367.jpg_750x9999.v1c7E.81.webp",
          "url": "/promotion/ydftx"
        },
        {
          "image": "https://s17.mogucdn.com/mlcdn/c45406/201125_07510jcdhelj6630a0cibl1fa5ci5_1060x367.jpg_750x9999.v1c7E.81.webp",
          "url": "/promotion/jjyz"
        },
        {
          "image": "https://s18.mogucdn.com/mlcdn/c45406/201126_0a5lh50816f213d8e1dai7kl5ij4g_1060x367.png_750x9999.v1c7E.81.webp",
          "url": "/promotion/qdpsfx"
        }
      ],
      "status": 200,
      "msg": "请求成功"
    }
  },
}

在通过Mock.js建立相应的接口。

// mock.js
import Mock from 'mockjs'
import mall from './mall'

Mock.setup({
  timeout: '300-600'
})

// mall 相关
Mock.mock('/api/mall/banners', 'get', mall.getBanners)

这样我们在通过配置相应的代理地址，就可以了。

好，今天就到这里了。Bye!

收

前端开发工具之Mock.js

前言

Mock.js

使用