mockjs 语法

Mockjs介绍

Mockjs官网：http://mockjs.com/

Mockjs语法

Mockjs官网语法规范：https://github.com/nuysoft/Mock/wiki/Syntax-Specification

React项目中Mockjs使用方式

• 在create-react-app项目中mock

• 在node中使用

在create-react-app项目中mock

• 使用pnpm命名创建react项目

pnpm create vite

• 输入项目名后选择react及TypeScript

• 创建完成后使用如下命令启动项目或者直接在vs code中启动

cd vite-react-demopnpm installpnpm run dev

在vscode中启动

• 安装mockjs和axios

pnpm install mockjspnpm install axiospnpm i --save-dev @types/mockjs

• 在src目录下创建mock文件夹及index.ts文件，index.ts文件内容

import Mock from 'mockjs'
// Mock设置Mock.setup({  // timeout: 500,})
// 随机值const Random = Mock.Random
export default Mock.mock('/getDataInfo', 'post', function (param) {  console.log(param.body)  return {    data: Random.integer(1, 2000),  }})

• 修改App.tsx文件如下：

import { useState } from 'react'import reactLogo from './assets/react.svg'import viteLogo from '/vite.svg'import axios from 'axios'import './mock'import './App.css'
function App() {  const [count, setCount] = useState(0)  const [dataInfo, setDataInfo] = useState(0)
  const getDataInfo = () => {    axios.post('/getDataInfo', { param1: 11, param2: 22 }).then((res) => {      setDataInfo((dataInfo) => (dataInfo = res.data.data))    })  }
  return (    <>      <div>        <a href="https://vitejs.dev" target="_blank">          <img src={viteLogo} className="logo" alt="Vite logo" />        </a>        <a href="https://react.dev" target="_blank">          <img src={reactLogo} className="logo react" alt="React logo" />        </a>      </div>      <h1>Vite + React</h1>      <div className="card">        <button onClick={() => setCount((count) => count + 1)}>          count is {count}        </button>        <button onClick={getDataInfo}>结果值为: {dataInfo}</button>        <p>          Edit <code>src/App.tsx</code> and save to test HMR        </p>      </div>      <p className="read-the-docs">        Click on the Vite and React logos to learn more      </p>    </>  )}
export default App  

• 运行项目后效果：

• 点击按钮可获取随机值，React使用Mockjs模拟数据完成。