mockjs,mockjs 在react中的使用 模擬資料
阿新 • • 發佈:2020-09-01
mockjs 在react中的使用 1、按照依賴,axios(請求資料)和mockjs(資料) 2、建立一個資料夾mock裡面有一個檔案index.js,在這裡編寫需要獲得的那些資料型別,具體寫法還要依照mockjs 提供的示例寫自己需要的資料import"./mock/index";
3、把mock資料夾中的index檔案引入到src中的入框檔案vue式app.js react一般是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) }) }