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