npm 包 `manis` 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

manis 是一个基于 react 和 miragejs 的模拟数据库，可以帮助前端开发者在开发过程中模拟后端接口数据，在没有后端接口服务的情况下快速进行开发和测试。

安装

使用 npm 工具安装：

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

使用

初始化

在你的项目中引入 manis 的依赖，并创建一个 src/db.js 文件。

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

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

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

定义模型

在 src/db.js 文件中，我们可以像在 miragejs 中一样，定义我们需要的模型。这里以一个示例为例：

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

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

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

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

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

使用模型

我们可以在我们的组件中使用 manis 提供的 useServer 和 useModel hook 来获取我们定义的模型：

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

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

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

在上面的示例中，我们使用 useServer 和 useModel 将模拟的数据库和我们定义的模型导出，然后在组件中使用。

获取模拟数据

我们可以通过向模拟的数据库中创建模型对象来模拟后端接口返回的数据。例如，在组件中获取模拟的数据：

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

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

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

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

在上面的示例中，我们使用 server.create 来创建一个新的学校对象，并将其添加到模拟的数据库中。

总结

manis 可以帮助前端开发者模拟后端接口数据来快速进行开发和测试，减少了对后端的依赖，同时提高了开发效率。在使用 manis 进行开发时，我们需要先在 src/db.js 中定义我们需要的模型，在组件中通过 useServer 和 useModel 获取模拟的数据库和定义的模型，然后通过 server.create 来模拟后端接口返回的数据。

完整示例代码请参考：https://github.com/hifocus/manis-example

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/70577

阅读全文

猜你喜欢

  • npm 包 node-esp 使用教程

    前言 node-esp 是一个用于控制 Espressif SoC 的 npm 包。Espressif SoC 是一种嵌入式系统，广泛被用于物联网应用中，如智能家居、智能工业等。

    5 年前
  • npm 包 pug-browser 使用教程

    什么是 pug-browser? pug-browser 是一个轻量级的 npm 包，可将 pug 模板编译为浏览器可读的 HTML。pug-browser 非常适合用于前端开发中的模板引擎，使得开发...

    5 年前
  • npm 包 amd-pack 使用教程

    介绍 amd-pack 是一个 npm 模块，用于将 AMD 模块打包成一个文件。这个模块可以方便地将模块组合成一个包，从而在浏览器端更高效地处理模块。在前端开发中，对于使用 AMD 模块的项目，这个...

    5 年前
  • npm 包 axesbuilder 使用教程

    介绍 axesbuilder 是一个方便的 npm 包，可以帮助前端开发者快速构建坐标轴。该包提供的坐标轴包括 x 轴和 y 轴，并且包含各种自定义属性和方法，能够帮助用户自定义坐标轴。

    5 年前
  • npm 包 muffin-builder 使用教程

    前言 前端开发中使用到 npm 包的情况越来越多，而且随着社区的发展，出现了一些很有价值的 npm 包，比如今天要介绍的 muffin-builder。 muffin-builder 是一个快速构建静...

    5 年前
  • npm 包 wooo 使用教程

    如果您正在进行前端开发，并且需要一个用于展示图像和视频的库，那么 wooo 可能是您需要的 npm 包。在本篇文章中，我们将向您介绍 npm 包 wooo 的基本用法、深度使用方法以及一些开发技巧。

    5 年前
  • npm 包 steal-almond 使用教程

    什么是 steal-almond? steal-almond 是一个 JavaScript 模块打包器，可将依赖模块转化为单一文件，支持 AMD、CommonJS 和 ES6 模块。

    5 年前
  • npm 包 eser 使用教程

    npm 包 eser 是一个轻量级的前端使用错误监测工具。它可以帮助开发者在开发过程中找出潜在的错误和代码质量问题。本教程将介绍如何使用 eser，以及如何在项目中集成和配置它。

    5 年前
  • npm 包 sey 使用教程

    在前端开发中，我们经常需要使用各种 npm 包来帮助我们实现一些功能或提高开发效率。在这篇文章中，我将向大家介绍一款名为 sey 的 npm 包，它是一个非常实用的工具，可以帮助我们更好地组织和管理项...

    5 年前
  • npm 包 leap-js 使用教程

    简介 Leap Motion 是一款基于手势的用户输入设备，可以通过手指、手掌、笔等手势进行控制。而 leap-js 就是一款基于 JavaScript 的 Leap Motion 控制库，可以让你方...

    5 年前
  • npm 包 cb-jsfix 使用教程

    在前端开发中，我们经常会遇到各种各样的 bug 和问题。其中一部分问题是由于 JavaScript 在不同浏览器和平台下的兼容性问题导致的。 cb-jsfix 是一个 NPM 包，它提供了一些修复浏览...

    5 年前
  • npm包 webpack-auto-clean-build-plugin 使用教程

    什么是webpack-auto-clean-build-plugin？ webpack-auto-clean-build-plugin 是一个 npm 包，它是一款用于自动清除 webpack 打包生...

    5 年前
  • npm 包 cli-fs 使用教程

    前端开发离不开命令行工具，常常需要在命令行中做一些文件操作。而 cli-fs 是一个 npm 包，为命令行提供了一种简易的方式来进行文件操作。 本文将介绍 cli-fs 的使用方法，包括如何安装、常用...

    5 年前
  • npm 包 cli-rc 使用教程

    简介 cli-rc 是一个能够轻松创建命令行工具的 npm 包，它支持自定义命令行选项以及子命令。使用它，我们可以很方便地将一系列操作封装成一个可执行的命令行工具，并直接在终端中调用。

    5 年前
  • HTTP 关于安全的 Header 全解

    HTTP 关于安全的 Header 全解 HTTP (Hypertext Transfer Protocol) 是互联网上最常用的应用层协议之一。它定义了客户端和服务器端之间进行数据通信的规范。

    5 年前
  • TypeScript 入门教程文档（通俗易懂）

    TypeScript 入门教程文档 TypeScript 是一种由 Microsoft 开发的静态类型的 JavaScript 超集，它提供了更严格的类型检查、更好的代码提示和可读性，以及更好的开发工...

    5 年前
  • npm 包 omni-fetch 使用教程

    前言 在前端开发中，经常需要获取网络上的数据，而使用 fetch 进行 AJAX 请求已成为常见的做法。然而，fetch 在某些场景下仍有不足之处，例如不能取消请求、请求超时等。

    5 年前
  • npm 包 jsonlint-cli 使用教程

    前言 在前端开发中，往往需要处理 JSON 格式的数据。JSON 作为一种轻量级的数据交换格式，使用广泛。如何检验 JSON 格式的合法性是非常重要的，本文介绍一款名为 jsonlint-cli 的 ...

    5 年前
  • npm 包 patternplate-transform-uglify 使用教程

    前端开发中，由于 JavaScript 是一种解释性语言，很多时候需要对代码进行压缩，以便减小文件大小，提升网站性能。在开发过程中，我们经常会使用到一些工具将代码压缩成一行或者缩小变量名。

    5 年前
  • npm 包 cello-loader 使用教程

    在前端工程化过程中，Webpack 已经成为了一个非常流行的打包工具。而对于 Webpack 打包过程中加载样式时，有一个非常好用的插件：cello-loader。

    5 年前

相关推荐

    暂无文章