什么是MockJS
在前后端分离的开发环境中,前端同学需要等待后端同学给出接口及接口文档之后,才能继续开发。而MockJS可以让前端同学独立于后端同学进行开发,前端同学可以根据业务先梳理出接口文档并使用MockJS模拟后端接口。那么MockJS是如何模拟后端接口的呢?MockJS通过拦截特定的AJAX请求,并生成给定的数据类型的随机数,以此来模拟后端同学提供的接口。
准备工作
写在最前面:有的小伙伴可能不太会部署前端环境,这里我将代码上传到github中,有需要的小伙伴可以把代码下载下来,对照着代码看下面的教程。
首先安装MockJS,安装axios是为了发送AJAX请求测试模拟的接口,使用其他方式如原生AJAX请求或$.ajax都是可以的,使用其他方式发送AJAX请求无需安装axios。
npm install mockjs --save
npm install axios --save
使用webpack打包工具打包vue单文件。
首先安装css-loader、style-loader、vue、vue-loader、vue-template-compiler。
npm install css-loader style-loader --save-dev
npm install vue vue-loader vue-template-compiler --save-dev
然后在webpack.config.js配置文件中添加对应的loader,完整的配置图如下。
const path = require("path");
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
entry: './webapp/App.js',
output: {
filename: 'App.js',
path: path.resolve(__dirname, './dist')
},
module: {
rules: [
{
test: /\.css/,
use: ['style-loader', 'css-loader']
},
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
],
mode: "production"
}
创建一个mock.js文件,接着在入口文件中(main.js)引入。
require('./mock.js');
在mock.js文件中引入MockJS。
import Mock from 'mockjs';
后面我们将在mock.js中编写模拟接口。
目录结构如下:
index.html是主页文件,main.js是入口文件,mock.js是模拟接口文件,webpack.config.js是webpack配置文件,./dist/main.js是打包后的入口文件,./src/axios/api.js是封装axios请求的文件。
正式开始
MockJS有两种方式定义模拟接口返回的数据,一种是使用数据模板定义,这种方式自由度大,可以自定义各种随机的数据类型,一种是使用MockJS的Random工具类的方法定义,这种方式自由度小,只能随机出MockJS提供的数据类型。赶时间的小伙伴可以直接跳到2.使用Rndom工具类定义模拟接口返回值。
1.数据模板定义模拟接口返回值
先举一个例子
//mock.js数据模板
{
'string|1-10':'string'
}
//接口返回的生成的数据===>
{
'string':'stringstringstring'
}
数据模板的格式为 ‘属性名|生成规则’:‘属性值’ ,生成规则决定了生成的数据的属性值。
生成规则一共有7种,分别是:
- ‘name|min-max’: value
- ‘name|count’: value
- ‘name|min-max.dmin-dmax’: value
- ‘name|min-max.dcount’: value
- ‘name|count.dmin-dmax’: value
- ‘name|count.dcount’: value
- ‘name|+step’: value
对于不同的数据类型,可以使用的生成规则是不同的,属性值的数据类型可以是Number、Boolean、String、Object、Array、Function、Null,不可以是Undefined,下面我将对每一种数据类型分别使用7种生成规则,以此来观察每一种数据类型可以使用哪些生成规则,想要直接看结论的同学直接拉至1.8的表格中。
1.1’name|min-max’: value
在开始之前大家可以去我的github把项目下载运行起来,结合项目更加直观,通过刷新了解每一个生成规则具体随机出了什么样的数据。