Mock接口开发之——Mock介绍

发表于 分类于 ， ， ， 阅读时长 ≈ 1 分钟

一 概述

  • Mock介绍
  • Mock安装及配置
  • Mock的语法规则
  • Mock模拟数据打印到控制台

二 Mock介绍

  • Mock.js 是一款模拟数据生成器
  • Mock能根据数据模板生成模拟数据

三 Mock安装及配置

3.1 Mock地址

  • GitHub地址：https://github.com/nuysoft/Mock
  • 文档地址：mockjs.com

3.2 安装及下载

1-下载后作为文件引入使用

1
<script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"></script>

2-通过npm安装模块

1
2
3
npm install mockjs
// 使用
var Mock = require('mockjs');

三 Mock的语法规则

Mock.js 的语法规范包括两部分：数据模板定义 DTD和数据占位符定义 DPD

3.1 数据模板定义 DTD

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

1
2
3
4
// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

示例('name|min-max': string)

1
"string|1-10": "★"

3.2 数据占位符定义 DPD

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。占位符 的格式为：

1
2
@占位符
@占位符(参数 [, 参数])

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
}
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

3.3 Mock生成模拟数据

1
Mock.mock( template )

四 Mock模拟数据打印到控制台

4.1 新建Mock文件夹，打开文件所在路径终端，执行如下执行

1
2
npm init
npm install mockjs

上述指令执行后，生成package.json文件

4.2 用vscode打开此文件夹，创建src/mock文件夹

4.3 创建mock-console.js文件，并将如下代码copy

1
2
3
var Mock = require('mockjs');//引入mockjs模块
var data = Mock.mock('@first') //模拟生成用户名数据
console.log(JSON.stringify(data)) //将数据打印到控制台上

4.4 运行查看结果(可能data换成示例中其他结果)

依次点击：运行——>启动调试——>选择环境(Node.js)，调试控制台打印如下结果(结果可能不同)

1
"Donna"