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)
  	})
  }, [])

  //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).page
    const 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

步骤：

1. 选择node框架 koa 或 express，安装相关依赖
2. 安装mockjs，并引入
3. 配置路由(接口地址)，并且编写mock数据
4. 解决跨域，可在前端解决，也可使用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语法，撒花