前端分离开发使用mock.js

前后端分离开发，是目前行业的主流，前面有一篇博客曾经说过这个问题，当时，我推荐使用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/

可以通过不同的编写方式，返回不同的随机数据

前端分离开发使用mock.js

猜你喜欢