React中使用Mockjs进行接口数据模拟

React中使用Mockjs进行接口数据模拟

引子

每个改进都是为了解决问题。
现在我在开发中碰到了问题,我先描述下问题:
我们现在做前后端完全分离的应用,前端写前端的,后端写后端的,他们通过API接口连接。
前端同学心理路程:”后端同学接口写的好慢,我都没法调试了。”
是不是有这个问题呢?一般我们怎么解决?
第一种:自己这边随便造点数据,等后端接口写好了之后,再小修改,再调试。
第二种:想想我们之前获得用户信息的dist/api/user.json,我们可以用这种方式来调试。
但是想象下,我们要模拟一个文章列表,就要手动写几十列。oh~no!
并且,后端接口一般都不带.json,到时候对接,是不是还得改代码?
好了,下面介绍下今天的主角Mock.js。
他会做一件事情:拦截AJAX请求,返回需要的数据!
我们写AJAX请求的时候,正常写,Mock.js会自动拦截的。

1.mock是什么?

官方文档

2. 在src 目录下创建我们的mock 文件夹用于存放我们的mock数据

3.写入mock数据

  • 创建一个data2.js 内容如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 使用 Mock
import Mock from 'mockjs'


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': '',
}]
})

4. 关联Mock

  • 模拟数据完成后,我们得在app.js里面挂载我们的数据来进行中间件拦截
1
2
3
4
5
import React from 'react';
import Mock from './components/Mock'
//挂载 Mock
import './mock/data1.js'
import './mock/data2.js'

5. attempt

  • 现在我们写一个组件来展示我们的数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import React from 'react';
import axios from 'axios'


class Mock extends React.Component {
constructor(props) {
super(props);
this.state = {
gData: null,
pData: null
};
}

getDate1 = () =>{
axios.get('/getdata1', {
params:{
id : '123'
}
})
.then((res)=>{
console.log(res.data)
this.setState({
gData: res.data.message
})
})
.catch((err)=>{
console.log(err)
})
}

getDate2 = () => {
axios.post('/postdata1', {
params: {
name: 'jack'
}
})
.then((res)=>{
console.log(res.data)
this.setState({
pData: res.data.message
})
})
.catch((err)=>{
console.log(err)
})
}


render() {
return (
<React.Fragment>
<h3>数据展示</h3>
<p>get:{ this.state.gData == null ? '无' : this.state.gData }</p>
<p>post: { this.state.pData == null ? '无' : this.state.pData } </p>

<button onClick={ this.getDate1}>点击获取(Get)Mock数据</button>
<br /><br />
<button onClick={ this.getDate2 } >点击获取(Post)Mock数据</button>
</React.Fragment>
);
}
}

export default Mock;

6. 展示

Mockjs

本网站作品部分来自于网络,感谢开源社区的诸多开发者 My_Github and My_E-mail

Copyright © 2013 - 2019 Ruoduan's Blog All Rights Reserved.

滇ICP备19003866号 本网站版权归本站作者Ruoduan所有

访客数 : | 访问量 :

{% if theme.fireworks %} {% endif %} {% if theme.canvas_nest %} {% endif %} {% if theme.Background_music %} {% endif %}