npm 包 dummy-json 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 dummy-json 使用教程

前言

在前端开发过程中，我们经常会遇到需要使用假数据来测试业务逻辑和展示效果的情况。手动编写一些假数据无疑是费时费力的，而 dummy-json 可以帮助我们快速生成符合规则的假数据，提高开发效率。

本文将介绍如何使用 npm 包 dummy-json，在项目中快速生成假数据。

安装

npm install dummy-json

使用方法

基本语法

dummy-json 的基础语法很简单，通过定义模板文件来生成假数据。模板文件是一个 JSON 数据结构，我们可以在其中使用变量，函数和条件等语法来生成符合要求的假数据。

下面是一个简单的模板文件样例：

-- -------------------- ---- -------
-
    -------- -------- -----
    ---------- -------- ------
    --------- -
        ------- -------------- --------------
        -------- ------------
        --------- ------------
    -
-

通过使用 {{}} 包裹的变量或函数，我们可以在模板文件中定义需要生成的数据格式。在这个样例中，我们定义了一个带有标题，内容和作者字段的数据结构。

支持的模板方法

dummy-json 内置了多个模板方法，可以帮助我们生成特定规则的数据。下面列出了一些最常用的模板方法：

boolean：生成一个随机的布尔类型值
guid：生成一个 guid 字符串
int(min,max)：生成一个随机整数，范围为 [min, max]
float(min,max,precision)：生成一个随机浮点数，范围为 [min, max]，保留 precision 位小数
date(format,min,max)：生成一个随机日期，格式为 format，范围为 [min, max]，默认的格式为 YYYY-MM-DD
time(format)：生成一个随机时间，格式为 format，例如 HH:mm:ss
firstName：生成一个随机名字
lastName：生成一个随机姓氏
email：生成一个随机 email 地址
avatar(size,seed)：生成一个随机头像 url，size 为尺寸，seed 为种子

下面是一个使用了多个模板方法的模板样例：

{
    "id": "{{guid}}",
    "name": "{{firstName}} {{lastName}}",
    "age": {{int 18 30}},
    "gender": "{{boolean '?' '男' '女'}}",
    "email": "{{email}}",
    "avatar": "{{avatar 200 'dummy'}}"
}

自定义函数

有时我们需要自定义一些函数来生成符合需求的数据。dummy-json 提供了 fn 方法来支持自定义函数的使用。

下面是一个简单的自定义函数样例：

{
    "fullName": "{{fn fullName}}",
    "age": {{int 18 30}}
}

在这个样例中，我们定义了一个名为 fullName 的自定义函数。在使用 {{}} 包裹变量名时，dummy-json 会自动调用对应的函数。在函数体内，我们可以通过返回一个值来达到自定义的目的，比如在这个样例中，我们通过调用 fullName 函数来生成全名。

下面是这个函数的实现方式：

const getRandomItem = array => array[Math.floor(Math.random() * array.length)];
const firstNames = ['张', '李', '王', '赵', '钱', '孙', '杨', '罗', '陈', '马', '胡', '郑'];
const lastNames = ['磊', '亮', '涛', '超', '芳', '丽', '阳', '文', '英', '明', '敏', '飞'];
const fullName = () => `${getRandomItem(firstNames)}${getRandomItem(lastNames)}`;

module.exports = {
    fullName
}

在上面的代码中，我们定义了一个其中 fullName 函数，该函数会从一个预设的数组中随机选择一个姓和一个名，然后将它们合并成一个全名字符串。

使用继承

有时候我们需要在一个模板文件中引用另外一个模板文件的数据，这时候子模板可以使用继承模式来获取其父模板的数据。

下面是一个简单的模板继承样例：

-- -------------------- ---- -------
-
  --------- -
    -------- ----- ----------
    -------- ------------
    ------- ---------
  --
  ---------- -
    -------- -------- -----
    ---------- -------- ------
    --------- ----- ---------
  -
-

在这个样例中，我们定义了一个基础模板（父模板），为子模板提供了 {{style}} 和 {{fn author}} 等一些基础数据。子模板只需要在顶部定义 extends 参数来引用其父模板，然后再定义自己的数据即可。

下面是一个子模板样例：

 {
  "extends": "base-template",
  "header": {
    "style": "white",
    "type": "normal"
  }
}

在这个样例中，我们定义了一个以 base-template 为基础的子模板。在定义数据时，我们只需要提供 header.style 就可以覆盖基础模板中的默认值了。

示例代码

下面是一个简单的示例代码，通过命令行参数控制生成的假数据条数，将数据输出到一个指定的文件中：

-- -------------------- ---- -------
----- -- - --------------
----- --------- - ----------------------

----- ----- - ----------------
----- ---- - -------------------------------------------------------------- -
    -------- --------------------
---

------------------------------- ---------------------------------------------- -- --------
----------------- -------- -------

在上面的代码中，我们接收了命令行参数 count，然后将其转化为一个假数据的数量。使用 dummyjson.parse 方法来解析模板文件，同时加载了一个名为 helpers.js 的自定义函数文件。最后使用 Array.from(Array(count)).map(() => data) 生成数组，用于放置 data 假数据。假数据生成完成后，我们将其写入到一个名为 data.json 的文件中，导出当前生成的假数据数量。

总结

本文介绍了 npm 包 dummy-json 的使用方法，包括基本语法，常用模板方法及自定义函数，以及模板继承等高级应用。希望本文能够帮助读者更好地理解 dummy-json 的使用方式，提高前端开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65008