mockjs,mockjs 在react中的使用 模擬數據

 

mockjs 在react中的使用

1、按照依賴，axios（請求數據）和mockjs(數據)

2、創建一個文件夾mock里面有一個文件index.js,在這里編寫需要獲得的那些數據類型，具體寫法還要依照mockjs 提供的示例寫自己需要的數據
　　　　

3、把mock文件夾中的index文件引入到src中的入框文件vue式app.js  react一般是index
　　　　

　　　　　　import "./mock/index";

4、在需要引入的組件中，引入請求數據的axios，填寫請求的數據

	import axios from "axios";

　　

1、按照依賴，axios（請求數據）和mockjs(數據)

yarn add mockjs
yarn add axios
或者
cnpm install mockjs

cnpm install axios

　

2、創建一個文件夾mock里面有一個文件index.js,在這里編寫需要獲得的那些數據類型，具體寫法還要依照mockjs 提供的示例寫自己需要的數據

import Mock from 'mockjs'
import url from 'url'
/*
mock.mock()
參數1：請求地址 選填  url
參數2: 請求類型 選填  type
參數3：數據模板 | 函數    
*/
var data = Mock.mock({
    "data|100":[   //意思是data數組中有100條數據
        {  //這個對象是用來寫數據模板的
          "id|+1":0,   //初始值是0每次id都+1
          "goodsName":"@ctitle(3, 5)",   //看官網，這個名字是3-5之間的
          "goodsPrice|+1":100,   //這個類似上面的id一個，只是初始值是從100開始的
          "address":"@county(true)",   //這個是地址，@county(true)  對象的屬性值都是mock.mock()提供的方法，直接拿過來用就可以了
          "tel":/^1(3|5|7|8|9)\d{9}$/,   //正則寫的電話后面1開頭，正則不懂自己去學！！！！！！！！！！！很重要
          "goodsImg":"@image('200x100', '#894FC4', '#FFF', 'alley')", // 圖片
          "date":'@date("yyyy-MM-dd M:dd:d")',  //時間
		  "email":"@email()",  //郵箱
		  "name":"@ctitle(10, 30)", //10-30
		  "text":"@cparagraph(1, 3)", //備注用
		  "img":"@dataImage('200x100', 'Hello')", //圖片200*100
		  "datetime":'@datetime("yyyy-MM-dd A HH:mm:ss")', //"1974-01-08 PM 23:54:57"
		  "string":'@string("lower", 5)', //"string5"
		  "array|1-10": [
			{
			  "name|+1": [
				"Hello",
				"Mock.js",
				"!"
			  ]
			}
		  ],//數組中含有數組的
		 
		  'dds':'caiyufu'
        }
	],
	code:200,
	message:'請求數據成功'
})

console.log(data,'ddw');//打印這Mock.mock() 賦值的內容，直接在終端運行就 可以了

//  .........這個是通過get  攔截的AJAX
Mock.mock(/\goods\/goodsList/,"get",function(options){
    let {limit,page} = url.parse(options.url,true).query;// 解構賦值，結合上面看就懂了
    // return data.data.slice(0,4);//獲取0-4條的數據，
    return data.data.slice((page-1)*limit,(limit*page)-1)  //data.data是上面的數據，這里獲取的是
})


export default Mock.mock('/postdata1','post',{
    success: true,
    message: '@cparagraph',
    // 屬性 list 的值是一個數組，其中含有 1 到 5 個元素
    'list|1-5': [{
        // 屬性 sid 是一個自增數，起始值為 1，每次增 1
        'sid|+1': 1,
        // 屬性 userId 是一個5位的隨機碼
        'userId|5': '',
    }]
})

　　

3、把mock文件夾中的index文件引入到src中的入框文件vue式app.js  react一般是index

import React from 'react';
import { render } from 'react-dom';
import { ConfigProvider } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';
import { Router, Route, Switch, Redirect } from "react-router-dom";
import { history } from '@/utils';
import Loader from './component/Loader';
import '@/resource/css/global.css';
import "./mock/index";

render(
	<ConfigProvider locale={zh_CN}>
		<Router history={history}>
			<Switch>
				<Route path="/" exact={true} render={() => <Redirect to="/login"/>} />
				<Route path="/login" component={Loader(() => import('./page/login/Index'))} />
				<Route path="/register" component={Loader(() => import('./page/register/Index'))} />
				<Route path="/apps" component={Loader(() => import('./page/application/Index'))} />
				<Route render={() => <div>404</div>}/>
			</Switch>
		</Router>
	</ConfigProvider>
, document.getElementById('root'));

　　

 

4、在需要引入的組件中，引入請求數據的axios，填寫請求的數據

import axios from "axios"; //直接引用就行

componentDidMount() {
		axios.get("/goods/goodsList", {   //這個是通過get發送的
			params: {
			  limit: 5,  //一頁有5條數據
			  page: 1   //第幾頁
			}
		  }).then((data) => {
		  console.log(data);
		  });
		  
		  axios.post('/postdata1', {
            params: {
                name: 'jack'
            }
        })
        .then((res)=>{
            console.log(res.data)
        })
        .catch((err)=>{
            console.log(err)
        })

	}