React使用mock模拟数据两种方式

mock模拟数据

一、使用Mock模拟数据

直接模拟办法

• 在src/mock/test.js 模拟数据；

  <!-- test.js -->
  import Mock from "mockjs";
    Mock.setup({ timeout: "1000" });
  
    Mock.mock("/test", "get", {
    data: {
        "string|1-10": "★",
    },
    });
  
  

• 在src/app.js 直接引用使用即可；

import axios from "axios";
import React, { Component } from "react";
import "./mock/test";
export default class App extends Component {
  componentDidMount() {
    console.log("componentWillMoent");
    axios
      .get("/test")
      .then(function (res) {
        console.log(res.data);
      })
      .catch(function (err) {
        console.log(err);
      });
  }

  render() {
    return (
      <div className="App">
       ...app
    );
  }
}

二、将mock的模拟数据打包，放在mock/index下面

• 在mock/index操作集合；

    import Mock from "mockjs";
    import loginAPI from "./login";
    // 登录与用户相关
    Mock.mock(/\/login/, "post", loginAPI.login);
    Mock.mock(/\/user\/list/, "get", loginAPI.getUsers);
    export default Mock;
  
  

• 在src/index 目录下引用即可

• 使用直接输入地址即可

使用express mock数据

推荐使用express方式mock数据

参考

React使用mock模拟数据两种方式_哔哩哔哩_bilibili