Mockjs - 前端模拟请求数据生成器

mockjs

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

• 根据数据模板生成模拟数据
• 模拟 Ajax 请求，生成并返回模拟数据
• 基于 HTML 模板生成模拟数据

中文网

github

安装

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 的语法规范包括两部分：

1. 数据模板定义规范（Data Template Definition，DTD）
2. 数据占位符定义规范（Data Placeholder Definition，DPD）

数据模板定义规范

也就是对数据的类型 ，范围等进行规范，限制。

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值

格式是:

’ 属性名|生成规则 '：属性值

注意属性名和生成规则之间通过 | 分隔

如 ：

'num|0-100'：0

// 返回一个 num 属性 ，值是一个数值 ，数值范围是 0-100 .

生成规则

注意：

• 属性名 和 生成规则 之间用竖线 | 分隔。
• 生成规则 是可选的。
• 生成规则有 7 种格式：
  1. 'name|min-max': value
  2. 'name|count': value
  3. 'name|min-max.dmin-dmax': value
  4. 'name|min-max.dcount': value
  5. 'name|count.dmin-dmax': value
  6. '