本篇目标在于先简单了解mock.js,然后可以简单使用,运行出第一个Mock.js的“HelloWorld”。
首先我们使用的编译器是vscode,然后在终端输入:
npm install mockjs
静静地等待安装成功。
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': '',
}],
//产生一个数组对象,出现一次
'user|1':[{
'CustomerID|1000-9000':1000,
'customerName':'@ctitle'
}]
})
import React from 'react';
import axios from 'axios';
//请求mock假数据,demo
class Mock extends React.Component {
constructor(props) {
super(props);
this.state = {
gData: null,
pData: null,
agData: null
};
}
//axios请求
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>post: {this.state.pData == null ? '无' : this.state.pData} </p>
<button onClick={this.getDate2} >点击获取(Post)Mock数据</button>
</React.Fragment>
);
}
待更新。