react使用mockjs模拟数据

mockjs简介

生成随机数据，拦截 Ajax 请求
注意：只能使用axios，fetch请求无法拦截

官网：http://mockjs.com/

---

mockjs语法

先略，有空补齐，可以去看看官网，挺简单的

---

react mock数据方式

第一种方式：在create-react-app项目中直接mock，无需node
第二种方式：在node中mock，需要会一点node知识，需要解决跨域

---

第一种方式：在create-react-app项目中mock，无需node

步骤：

1. 安装mockjs，yarn add mockjs -D 或 npm i mockjs -D
2. 创建文件夹 src -> mock
3. 在mock文件夹创建文件 user.js，在 user.js引入mockjs，并写上mock数据
4. 在app或者入口文件中引入，发起请求会自动拦截对应的请求，如果不用，注释即可

例子：
请求代码：

import React, {
    useEffect,useState } from 'react'
import axios from 'axios'

//引入mock -> user.js，如果不再需要mock，注释即可
import './mock/user.js'
import './App.css';


function App() {
   
  const [page,setPage] = useState(0)
  
  useEffect(() => {
   
  	//get请求
    axios.get('/user').then(res => {
   
        console.log(res.data)
    })

	//post请求，模拟注册或登陆
    axios.post('/add', {
   
      data:{
   
        username:'admin',
        password:123
      }
    }).then(res => {
   
      	console.log(res.data