react使用mockjs模拟数据

最新推荐文章于 2024-08-22 09:42:24 发布

大神乔伊

最新推荐文章于 2024-08-22 09:42:24 发布

阅读量6.6k

点赞数 4

分类专栏： react 文章标签： react nodejs

本文链接：https://blog.csdn.net/weixin_44828005/article/details/114083772

版权

本文介绍了如何在React项目中使用MockJS模拟数据，包括两种方式：无需Node环境的直接在create-react-app中mock数据，以及利用Node的Koa或Express框架进行mock。详细步骤包括安装MockJS、配置mock数据及拦截Ajax请求。对于不熟悉Node的开发者，文章还给出了React解决跨域问题的链接。

摘要由CSDN通过智能技术生成

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

步骤：

安装mockjs，yarn add mockjs -D 或 npm i mockjs -D

创建文件夹 src -> mock

在mock文件夹创建文件 user.js，在 user.js引入mockjs，并写上mock数据

在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)
  	}