mockjs模拟后台数据,再也不怕找不到数据接口了

前后端分离开发的时候，前端为了模拟后台的数据，我们就需要自己“制造数据”，因此便有了Mock.js

//图片来源于网络

使用mockjs的步骤

1. 安装mockjs， yarn add mockjs / npm install mockjs
2. 自定义数据的格式, 查看配置

如我在src/mockdata目录下新建mockdata.js

import Mock from 'mockjs';
// 为了写更多的url，做了一个配置
const urlObj = {
  indexURL: '/',
  bookURL: '/book'
};

// 如下代表当请求 '/'的时候，就会响应list数组，数组长度为8，数组的每一项为一个对象，对象拥有这id，name，age字段,Mock.mock（url,options）返回的是promise对象，需要自己做处理哦
Mock.mock(urlObj.indexURL, {
  'list|8': [
    {
      'id|+1': 1,
      name: '@cname',
      'age|18-100': 23,
    },
  ],
});

// 当请求‘/book’的时候就会命中 该配置
Mock.mock(urlObj.bookURL, {
  'book|8': [
    {
      'id|+1': 1,
      'bookName': '@cname',
      'publishDate': '@date("yyyy-MM-dd")',
    },
  ],
});

3. 获取数据，我在此使用的是axios，环境为react

我在src下的app获取数据

import React, { Component, Fragment } from 'react';
import axios from 'axios';
// 一定要引入mock的配合文件，以便模拟请求数据
import './mockdata/mockdata';

import './css/app.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      indexData: [],
      bookData:[]
    };
  }

  async componentDidMount() {
  	// 请求数据并将返回的结果data重命名为indexData和bookData
    const { data: indexData } = await axios.get('/');
    const { data: bookData } = await axios.get('/book');
    this.setState({
      indexData: indexData.list,
      bookData: bookData.book,
    });
  }

  render() {
    return (
      <Fragment>
      	// 渲染个人列表
        <table>
          <caption>个人信息表</caption>
          <thead>
            <tr>
              <th>PERSON_ID</th>
              <th>姓名</th>
              <th>年龄</th>
            </tr>
          </thead>

          <tbody>
            {this.state.indexData.map((item) => (
              <tr key={item && item.id}>
                <td>{item && item.id}</td>
                <td>{item && item.name}</td>
                <td>{item && item.age}</td>
              </tr>
            ))}
          </tbody>
        </table>
		// 渲染书单链表
        <table>
          <caption>书单列表</caption>
          <thead>
            <tr>
              <th>BOOK_ID</th>
              <th>书名</th>
              <th>出版时间</th>
            </tr>
          </thead>

          <tbody>
            {this.state.bookData.map((item) => (
              <tr key={item && item.id}>
                <td>{item && item.id}</td>
                <td>{item && item.author}</td>
                <td>{item && item.publishDate}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Fragment>
    );
  }
}

export default App;