前后端分离开发,是目前行业的主流,前面有一篇博客曾经说过这个问题,当时,我推荐使用yapi模拟数据。
然后使用yapi是需要成本,公司是否有yapi账户,开通yapi账户的花费,yapi模拟的数据不在前端项目中,等等问题。
可以安装mock.js,导出配置好的接口和数据,在项目的最顶层引入,当发送ajax请求时,可以将请求拦截,返回mock数据。
安装
npm install mockjs --save
或
yarn add mockjs
在src目录下创建mock文件夹,文件夹创建mock.js
import Mock from "mockjs";
// eslint-disable-next-line
Mock.mock('http://test123.com', {
//这里的url地址其实可以换成一个字段,比如msg,下边请求时候对应就可以
'name': '@cname',
'age|1-10': 10
})
Mock.mock('http://myname.com','post', {
//这里的url地址其实可以换成一个字段,比如msg,下边请求时候对应就可以
'data|1-2':[{
'title':'@title',
'article':'@csentence'
}]
})
在项目最顶层的引入创建好的mock.js
react项目为例,项目最顶层就是index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
// 导入mock.js文件
import './mock/mock'
import './index.less';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
在组件或者页面中请求接口
axios.get("http://test123.com").then((res) => {
console.log(res);
//结果是随机的,也有可能是其他值
});
发现并没有请求这个接口
因为请求被mock.js拦截了,但返回了我们想要的数据
mockjs官网:http://mockjs.com/
可以通过不同的编写方式,返回不同的随机数据