npm 包 ez-mock 使用教程

阅读时长 5 分钟读完

ez-mock 是一个简单易用的 Node.js 模拟数据工具,可以帮助前端开发者快速创建本地 Mock 数据。

安装

要使用 ez-mock,需要先安装 Node.js,然后使用 npm 或者 yarn 安装 ez-mock:

使用

安装完成后,在项目根目录下创建一个 mock 目录,然后在该目录下创建一个 index.js 文件,用来编写 Mock 数据。

示例 index.js 文件:

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

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

创建完成后,在 package.json 文件中新增以下代码,用于启动 ez-mock:

在终端中执行 npm run mock 或者 yarn mock 命令即可启动 ez-mock。

启动成功后,可以在浏览器中访问 http://localhost:3000/api/userhttp://localhost:3000/api/menu,即可看到对应的 Mock 数据。

功能介绍

编写 Mock 数据

mock/index.js 文件中,可以使用 JavaScript 对象、数组或者函数来表示 Mock 数据。

JavaScript 对象和数组的书写方式和普通 JavaScript 对象和数组一致。

函数接收两个参数:reqres,分别表示请求对象和响应对象,可以通过这两个参数动态生成 Mock 数据。例如:

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

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

自定义请求方法和路由前缀

默认情况下,ez-mock 会自动处理 GET、POST、PUT、DELETE 等 HTTP 请求方法和路由前缀为 /api 的请求。如果需要自定义请求方法和路由前缀,可以在 package.json 文件中进行配置,例如:

自定义响应时间和状态码

默认情况下,ez-mock 会自动设置响应时间为 500ms,状态码为 200。如果需要自定义响应时间和状态码,可以在 Mock 数据中进行配置,例如:

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

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

Mock 数据模板

在 Mock 数据中,可以使用 Mock.js 提供的模板语法,生成符合规范的 Mock 数据。例如:

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

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

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

总结

通过本文学习,你已经了解了 npm 包 ez-mock 的基本使用方法和功能。ez-mock 简单易用,可以帮助前端开发者快速创建本地 Mock 数据,提高开发效率,降低开发成本。当然,ez-mock 还有很多高级功能和用法,欢迎进一步探索。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005678a81e8991b448e3eaa

纠错
反馈