介绍

做前端的一定经历过，页面在写但接口调不到后端数据的困扰，毕竟后端兄弟写接口和数据库也得花时间。我以前试过最麻烦的引入js/json文件的方法，自己写返回的数据，但数据结构得自己处理，不仅耗时也增加了很多文件。现在很流行的Mockjs的模拟数据工具，可直接生成各种类型的模拟数据，前端js可像调用后台接口一样，异步请求后判断成功失败再进行下一步的处理。

官网地址

下面用Create-React-App 的登录页面引入Mockjs做一个案例

代码

登录页面组件关键代码（非全部）

import axios from 'axios'
import '@/../mock/user' // mockjs模拟数据
const onFinish = (values: any) => {
    console.log(values)
    message.loading('登陆中').then(() => {
      axios
        .post('/getData', {
          username: values.username,
          password: values.password
        })
        .then((res) => {
          console.log(res)

          if (res.status === 200) {
            message.destroy()
            message.success('欢迎回来')
            navigate('/')
          } else {
            message.error(res.statusText || '登录异常')
          }
        })
    })
  }

  

需要留意的是要在页面组件ts中引入mockjs，这样axios的请求就会被mock拦截掉。

Mock文件

import Mock from 'mockjs'
const Random = Mock.Random
const getData = Mock.mock('/getData', 'post', () => {
  const ret = Mock.mock({ username: '@cname', age: Random.integer(60, 100), ID: Random.id() })
  return {
    status: 200,
    data: ret
  }
})

export { getData }

从代码可见，mock已经用类似@cname,Random.integer(60,100),Random.id() 随机生成了中文名，60-100的整数，身份证号等信息，从而不需要我们自行去虚拟数据给页面展示。使用起来非常简单快捷，是目前前端vue,react等框架必备的一项模拟数据工具。

从返回数据的格式可以看到，符合一般规定的后端返回格式，也能让前端调用数据的代码更符合正式调后端接口的格式。赶紧试试吧！