react mockjs模拟数据请求
2020-08-06 本文已影响0人
浪天林
我使用的是dva框架，通过dva new dva-quickstart直接创建项目
首先引入mockjs
npm install mockjs
先实现一个简单GET请求
在目录的最外层有一个mock文件夹，生成随机数据都放在这里
创建一个cs.js和data.js两个文件
data.js里放的是默认数据
data.js
export default[
{
id:1,
name:'a',
age:13,
type:1,
},
{
id:2,
name:'b',
age:22,
type:1,
},
{
id:3,
name:'c',
age:33,
type:1,
}
]
cs.js中放的是模拟接口，写一个GET请求，没有参数，直接返回所有数据
import data from './data'
export default {
'GET /api/info': {
message: '201',
data,
},
}
创建一个简单显示js文件，index.js,我比较喜欢用class组件，在componentWillMount生命周期中，进行请求，获取数据，然后在return中遍历数据，显示 li 。 export default connect导出组件。
import React, { Component } from 'react'
import { connect } from 'dva';
class index extends Component {
componentWillMount() {
const { dispatch } = this.props
dispatch({
type: 'cs/fetch',
})
}
render() {
const { cs: { list } } = this.props
return (
<div>
<ul>
{list.length > 0 ? list.map(item => (
<li key={item.id}>{item.name + " " + item.age} </li>
)) : ''}
</ul>
</div>
)
}
}
export default connect(({ cs }) => ({
cs,
}))(index);
然后在services文件中创建一个cs.js文件
import request from '../utils/request';
export function query() {
return request('/api/info', {
method: 'GET'
});
}
接着model文件中创建一个cs.js文件
import {query} from '../services/cs'
export default {
namespace: 'cs',
state: {
list: []
},
effects: {
*fetch({ payload }, { call, put }) { // eslint-disable-line
const res = yield call(query,payload)
const {data} = res
yield put({ type: 'save',payload:{data }});
},
reducers: {
save(state, action) {
return { ...state, list: action.payload.data };
},
},
};
修改.roadhogrc.mock.js配置文件
const mock = {}
require('fs').readdirSync(require('path').join(__dirname + '/mock')).forEach(function(file) {
Object.assign(mock, require('./mock/' + file))
})
module.exports = mock
最外层的index.js文件中引入model
app.model(require('./models/cs').default);
这样简单的一个GET请求就完成了
再来完成一个账号登录的POST请求
index.js中的显示部分，我直接使用antd的Form组件
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};
const tailLayout = {
wrapperCol: { offset: 8, span: 16 },
};
<Form
{...layout}
name="basic"
onFinish={this.onFinish}
>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
在onFinish中，发送请求
onFinish = (values) => {
const { dispatch } = this.props
dispatch({
type: 'cs/login',
payload: {
...values
},
success: () => {
message.success("登录成功")
},
error: () => {
message.error("登录失败")
}
})
}
在services文件中的cs.js文件加入
export function login(param) {
return request('/api/login', {
method: 'POST',
body:param
});
}
在models文件中的cs.js文件加入
*login({payload,success,error},{call}){
const res = yield call(login,payload)
if(res.message == 500){
error && error()
}else{
success && success()
}
},
在mock文件中的cs.js文件加入
'POST /api/login': (req, res) => {
const { password, username } = req.body;
if (password === '123' && username === 'admin') {
res.send({
message: '201',
data:'登录成功'
});
return;
}
res.send({
message: '500',
data:'登录失败'
});
},
这样一个完整的POST的模拟登录请求就完成了
完整项目下载路径如下
https://download.csdn.net/download/qq_40492771/12682918
上传项目的node_modules文件我删，先npm install一下
