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)})}, [])//get请求，模拟分页useEffect(() => {axios.get('/list', {data:{page:page}}).then(res => {console.log(res.data)})}, [page])return (<div className="App">hello react<button onClick={() => setPage(page + 1)}>请求分页</button></div>);
}export default App;

mock -> user.js代码

const Mock = require('mockjs')//get请求
module.exports = Mock.mock('/user', 'get', (options) => {const ret = Mock.mock({'user': {username:'@cname'}})return {status:200,data:ret}
})//get请求：模拟分页数据
module.exports = Mock.mock('/list', 'get', (options) => {//接受参数：是JSON格式，需要转换成对象const page = JSON.parse(options.body).pageconst ret = Mock.mock({'list|20':[{'id|+1':1, name:'@cname'}]})if(page > 3){return {status:200,data:[]}}return {status:200,data:ret}
})//post请求，模拟注册
module.exports = Mock.mock('/add', 'post', (options) => {return {status:200,data: JSON.parse(options.body).data}
})

第二种方式：在node中mock

步骤：

选择node框架 koa 或 express，安装相关依赖

安装mockjs，并引入

配置路由(接口地址)，并且编写mock数据

解决跨域，可在前端解决，也可使用node解决

node-koa 代码：

const Koa = require('koa')
const app = new Koa()
const cors = require('koa-cors')
const Router = require('koa-router')
const router = new Router({prefix:'/user'})
const Mock = require('mockjs')router.get('/', (ctx) => {const ret = Mock.mock({'user': {username: '@cname',sign:'@cword(8, 20)','age|18-100':18,'money|1-10000.2':1,'family|2-4':{father:'@cname',mother:'@cname',brother:'@cname',sister:'@cname'},'friends|1-3':['@last'],avatar: `@image('100×100','#50B347', '#FFF', 'Mock.js')`,isMarry:'@boolean',seniority:'@range(3, 7)',birthday:'@date',Address: `${'@region()'} - ${'@city(true)'}`,'score|1-5':'★'},})ctx.body = {status: 200,data: ret}
})app.use(router.routes()).use(router.allowedMethods())//如果使用后端跨域，开启这里
// app.use(
//     cors({//         origin: (ctx) => {//             const origin = ctx.headers.origin
//             console.log(origin);
//             return origin
//         },
//         allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
//         credentials: true,
//     })
// )app.listen(9092, () => {console.log('app is running on 9092 port')
})

如果不会react解决跨域，点击这里 react解决跨域

完结：暂时写这么多，有空再补全一些mockjs语法，撒花

react使用mockjs模拟数据相关推荐

mock模拟的数据能增删改查吗_如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
在vue-cli项目下简单使用mockjs模拟数据
为什么要用mockjs 实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试.大部分情况下,前后端需要同时进行开发.因此便需要mockjs制造随机数 ...
【MockJS】使用MockJS模拟数据（超级详细）
[MockJS]使用MockJS模拟数据 (超级详细) 文章目录 [MockJS]使用MockJS模拟数据 (超级详细) 2. MockJS 2.1 准备工作 2.2 语法规范数据模板定义规范 DT ...
【Vue】032-尚硅谷-尚品汇-mockjs模拟数据---20230111
032-尚硅谷-尚品汇-mockjs模拟数据官网链接第一步:安装依赖包mockjs 安装mockjs `npm install --save mockjs` 第二步:在src文件夹下创建一个文件夹 ...
vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】
文章目录 19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件) 本人其他相关文章链接 19.mockjs模拟数据(开发Home首页当中的ListConta ...
vue实战-mockjs模拟数据
vue实战-mockjs模拟数据 1.在src目录下创建文件夹mock 2.将模拟的json格式的数据写入到文件夹中 banner.json [{"id": "1&quo ...
使用mockjs模拟数据
一.安装简单粗暴 npm install mockjs 二.引入 CommonJS引入 let Mock = require('mockjs') let userInfo = Mock.mock({ ...
前端用Mockjs模拟数据
mockjs可以模拟数据,可以使我们更快的得到较为真实的数据,且可以拦截axios的接口调用,让我们的代码实现了调用接口的逻辑且得到模拟的数据,保存业务完整度. 使用步骤: 1.安装 npm i mo ...
nuxt.js开发环境使用mockjs模拟数据
安装 mockjs 先安装依赖: yarn add mockjs -D 配置插件在 plugins/mock.js 建立一个 mock 的插件,我们就在这里模拟数据: const Mock = re ...

react使用mockjs模拟数据

react使用mockjs模拟数据

react使用mockjs模拟数据相关推荐

最新文章

热门文章