Mock.js 的语法规范

原创已于 2025-03-11 14:31:35 修改 · 934 阅读

53 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #mock

于 2024-06-11 00:30:00 首次发布

Javascript理论与实践专栏收录该内容

127 篇文章

订阅专栏

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；优快云知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

在这里插入图片描述

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	`Openlayers` 【入门教程】 - 【源代码+示例 300+】
2	`Leaflet` 【入门教程】 - 【源代码+图文示例 150+】
3	`MapboxGL`【入门教程】 - 【源代码+图文示例150+】
4	`Cesium` 【入门教程】 - 【源代码+综合教程 200+】
5	`threejs`【中文API】 - 【源代码+图文示例200+】
6	Shader 编程【图文示例 100+】
7	Geoserver 【配置教程 100+】
8	卫星应用开发教程【配置+应用教程 100+】
9	GIS数字孪生与大模型【应用实战 100+】
10	报表与数字大屏【Echarts 实战示例】 - 【D3 综合教程】 - 【其他大屏】

文章目录

Mock.js 是一个用于生成随机数据的 JavaScript 类库，主要用于前端开发的 mock 数据测试。它提供了一种简单的方式来模拟 API 返回的数据，非常适合在没有后端接口或接口尚未开发完成的情况下进行前端开发和测试。

Mock.js 的基本使用

安装 Mock.js:
如果你使用的是 Node.js 环境，可以通过 npm 安装：
```
npm install mockjs --save
```
然后在你的代码中导入：
```
const Mock = require('mockjs');
```

创建模拟数据:
使用 Mock.Random 对象生成各种类型的随机数据。

const data = {
  'list|1-10': [{ // 生成 1 到 10 个随机对象
    'id|+1': 1, // 自增 ID
    title: '@ctitle(5, 10)', // 5 到 10 字的中文标题
    content: '@cparagraph(1, 3)', // 1 到 3 段的中文段落
    date: '@datetime', // 随机日期时间
  }]
};
const result = Mock.mock(data);
console.log(result);

模拟 HTTP 请求:
使用 Mock.mock 方法结合 URL 模式来拦截和模拟 HTTP 请求。

Mock.mock(/\/api\/users/, 'get', options => {
  return {
    code: 200,
    msg: 'success',
    data: [
      { id: 1, name: 'John' },
      { id: 2, name: 'Jane' }
    ]
  };
});

Mock.js 的语法规范

Mock.js 使用一种特殊的模板语法来定义数据结构和生成规则。以下是几个关键概念：

占位符 (|): 用于定义数据的数量或范围。
字段定义 ({...}): 用于定义单个数据字段的生成规则。
数据类型:
- @integer(min, max): 生成一个介于 min 和 max 之间的整数。
- @float(min, max, precision): 生成一个介于 min 和 max 之间的浮点数，精度为 precision。
- @string(type, length): 生成一个指定类型的字符串，长度为 length。
- @boolean(): 生成一个布尔值。
- @date(format): 生成一个符合指定格式的日期字符串。
- @ctitle(min, max): 生成一个中文标题，长度在 min 和 max 之间。
- @cparagraph(min, max): 生成一段中文段落，段落数量在 min 和 max 之间。
- 更多数据类型和规则，可以参考 Mock.js 的官方文档。
函数调用:
- 函数调用语法为 @functionName(args...)。
- 函数可以接收任意数量的参数，参数可以是数字、字符串或表达式。

示例

const template = {
  'name': '@cname', // 生成一个中文姓名
  'age|18-60': '@integer', // 生成一个 18 到 60 之间的年龄
  'gender|1': ['male', 'female'], // 随机选择性别
  'email': '@email', // 生成一个电子邮件地址
  'address': '@county(true)' // 生成一个详细的地址
};

const data = Mock.mock(template);
console.log(data);