mockjs
Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能:
- 根据数据模板生成模拟数据
- 模拟 Ajax 请求,生成并返回模拟数据
- 基于 HTML 模板生成模拟数据
安装
npm install mockjs --save--dev
一般是开发时依赖 。
简单使用
这里我使用 vue 来演示
1.创建模拟服务
根目录下创建一个 mock 文件夹 。同一存放 Mock 相关文件
// mock/mock.js
// 引入 mockjs
import Mock from 'mockjs'
// 简单的使用 mockjs 模拟数据
// 调用 mock 方法
Mock.mock('/getInfo',{
// 拦截 路由为 /getInfo 的请求。
data:{
name:"@cname", // 生成数据中文名字
id:"@id" // 生成随机 ID
}
})
// mock 方法调用后会生成一次数据并且返回,此数据是不会变的 。但每次请求都会生成新数据。
2. 使用
// 在 main.js 里执行
import '../mock/index'
new Vue({
render: h => h(App),
}).$mount('#app')
发送请求
<template>
<div><button @click="send">请求</button></div>
</template>
<script>
// 使用 aixos 方法请求
import axios from "axios";
export default {
methods: {
send() {
axios
.get("/getInfo")
.then((e) => {
console.log(e);
})
.catch((err) => {
console.log(err);
});
},
},
};
</script>
结果
取消拦截
只需要把 main.js 里的引入的 mock.js 文件部分注释即可
// import '../mock/index'
mock 文件夹可以不删 ,因为可能还有需要 。而打包上传时是不会把它打包上去的 ,因为没有引入。
语法规范
Mock.js 的语法规范包括两部分:
- 数据模板定义规范(Data Template Definition,DTD)
- 数据占位符定义规范(Data Placeholder Definition,DPD)
数据模板定义规范
也就是对数据的类型 ,范围等进行规范,限制。
数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值
格式是:
’ 属性名|生成规则 ':属性值
注意属性名和生成规则之间通过 | 分隔
如 :
'num|0-100':0
// 返回一个 num 属性 ,值是一个数值 ,数值范围是 0-100 .
生成规则
注意:
- 属性名 和 生成规则 之间用竖线
|
分隔。 - 生成规则 是可选的。
- 生成规则有 7 种格式:
'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'