react mockjs模擬資料請求

直接通過dva new dva-quickstart直接建立專案

首先引入mockjs

npm install mockjs

先實現乙個簡單get請求

在目錄的最外層有乙個mock資料夾，生成隨機資料都放在這裡

建立乙個cs.js和data.js兩個檔案

data.js裡放的是預設資料

data.js
export default[,,
]

cs.js中放的是模擬介面，寫乙個get請求，沒有引數，直接返回所有資料

import data from './data'
export default ,
}

建立乙個簡單顯示js檔案，index.js,我比較喜歡用class元件，在componentwillmount生命週期中，進行請求，獲取資料，然後在return中遍歷資料，顯示 li 。 export default connect匯出元件。

import react,  from 'react'
import  from 'dva';
class index extends component  = this.props
dispatch()
} render()  } = this.props
return (
) }}
export default connect(() => ())(index);

然後在services檔案中建立乙個cs.js檔案

import request from '../utils/request';
export function query() );
}

接著model檔案中建立乙個cs.js檔案

import  from '../services/cs'
export default ,
effects: , )  = res
yield put(});
},reducers: ;
},},};

修改.roadhogrc.mock.js配置檔案

const mock = {}
require('fs').readdirsync(require('path').join(__dirname + '/mock')).foreach(function(file) )
module.exports = mock

最外層的index.js檔案中引入model

這樣簡單的乙個get請求就完成了

再來完成乙個賬號登入的post請求

index.js中的顯示部分，我直接使用antd的form元件

const layout = ,
};const taillayout = ;

在onfinish中，傳送請求

onfinish = (values) =>  = this.props
dispatch(,
success: () => ,
error: () => 
})}

在services檔案中的cs.js檔案加入

export function login(param) );
}

在models檔案中的cs.js檔案加入

*login(,)else
},

在mock檔案中的cs.js檔案加入

'post /api/login': (req, res) =>  = req.body;
if (password === '123' && username === 'admin') );
return;
}res.send();
},

這樣乙個完整的post的模擬登入請求就完成了

上傳專案的node_modules檔案我刪，先npm install一下

PI模擬資料配置

數值模擬範圍 zero 起始值 span 結束值 location1 按照cdt158配置 location2 模擬值每次變動的幅度值為span 0.1 千分之一位置2的值 location3 按照cdt158配置 location4 c program files pipc inte ces r...

Json模擬資料Mockjs

npm install mockjs2.自己設計json結構data.json 3.在相同的路徑下建立mockserver.js 使用mockjs提供mock資料介面 import mock from mockjs import data from data.json 返回goods的介面 mock...

mockjs模擬資料請求

一般專案的方法 vue cli專案中在src目錄裡面建立乙個utils mock.js 相關.vue檔案引用 import utils mock.js import axios from axios 另main.js引入import axios from axios 注意這點,使用 vue.pro...

react mockjs模擬資料請求

PI模擬資料配置

Json模擬資料Mockjs

mockjs模擬資料請求

相關推薦