React 使用 Mock.js 进行数据模拟简例

1、背景

前后端分离开发的时候，前端和后端是并行开发的，前端往往刚开始不能拿到测试的数据，都需要自己写测试数据，多则几十行几十列的数据， 手动编写起来还是比较浪费时间的，虽然简单，但是都是体力活。

那么是否有工具可以帮我们拦截AJAX请求，然后自动生成模拟数据，让前端能够爽爽的开发呢？ Mock.js 正是这样一款类库，可以帮我们模拟生成一堆数据。

2、Mock.js 介绍

Mock.js 具有两个重要的特性:

• 数据类型丰富
  支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

• 拦截 Ajax 请求
  不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。安全又便捷

3、简单Demo

    (1):写入Mock返回的数据，创建一个 mockData.js 如下：

// 使用 Mock
import Mock from 'mockjs'

export default Mock.mock('/getdata','get',{//拦截/getdata的GET请求
    success: true,
    //随机生成一个名字
    message: '@name',
})

    (2):关联Mock，在 App.js 里面导入我们Mock的数据来进行中间件拦截

//挂载 Mock
import './mock/mockData.js'
import React from 'react';
import Mock from './components/Mock'

function App() {
  return (
    <div className="App">
      <Mock />
    </div>
  );
}

export default App;

    (3)：写一个组件展示数据

/* eslint-disable */
import React from 'react';
import axios from 'axios'


class Mock extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            data: null
         };
    }

    getData = () => {
        axios.get('/getdata')
        .then((res)=>{
            console.log(res.data)
            this.setState({
                data: res.data.message
            })
        })
    }

    render() {
        return (
            <React.Fragment>
                <h3>数据展示</h3>
                <p>get：{ this.state.data == null ? '无' :  this.state.data }</p>
                <button onClick={ this.getData}>点击获取(Get)Mock数据</button>
                <br /><br />
            </React.Fragment>
        );
    }
}

export default Mock;

    (4)：效果展示

更多Mock.js的使用模板及规范可参考官方文档：https://github.com/nuysoft/Mock/wiki