manis 是一个基于 react 和 miragejs 的模拟数据库，可以帮助前端开发者在开发过程中模拟后端接口数据，在没有后端接口服务的情况下快速进行开发和测试。
安装
使用 npm 工具安装：
npm install manis
使用
初始化
在你的项目中引入 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