前言
在前端开发中，操作后端数据是必不可少的一部分，而 @appril/crudle 则是一个非常方便且易用的 npm 包，可以帮助我们快速地实现数据的创建、读取、更新和删除，下面将对该包的使用教程进行详细介绍。
安装
使用 npm 进行安装：
npm install @appril/crudle
使用方法
初始化
在使用 @appril/crudle 之前，需要先初始化，通过以下代码进行初始化：
-- -------------------- ---- -------
------ - ------ - ---- -----------------
----- ------ - --- --------
--------- ----------------------
-------- -
-------------- ------- -----
--
----- ---------
---其中，endpoint 是 API 的地址，headers 是请求头部信息，path 是操作的数据路径。如果需要对请求的参数进行附加操作，可以通过 beforeRequest 进行设置，如下所示：
-- -------------------- ---- -------
----- ------ - --- --------
--------- ----------------------
-------- -
-------------- ------- -----
--
----- ---------
-------------- ----- -------- -- -
----- - ---- - - -------
----------- - -
--------
---------- --- -------
--
------ -------
--
---创建数据
通过以下代码进行数据创建：
const res = await crudle.create({ name: 'Evan' });
console.log(res);其中，create() 方法的参数为需要创建的数据，返回结果为创建的数据。如果需要对请求的参数进行附加操作，可以通过 beforeCreate 进行设置，afterCreate 则是对返回结果进行附加操作，如下所示：
-- -------------------- ---- -------
----- ------ - --- --------
--------- ----------------------
-------- -
-------------- ------- -----
--
----- ---------
------------- ----- ------ -- -
------ -
--------
---------- --- -------
--
--
------------ ----- ----- -- -
------ -
--- -------
----- ---------
----------- --- -----------------------------------------
--
--
---
----- --- - ----- --------------- ----- ------ ---
-----------------读取数据
通过以下代码进行数据读取：
const res = await crudle.read(); console.log(res);
其中，read() 方法的参数为查询条件，返回结果为查到的数据。如果需要对请求的参数进行附加操作，可以通过 beforeRead 进行设置，afterRead 则是对返回结果进行附加操作，如下所示：
-- -------------------- ---- -------
----- ------ - --- --------
--------- ----------------------
-------- -
-------------- ------- -----
--
----- ---------
----------- ----- -------- -- -
------ -
----------
------ ---
--
--
---------- ----- ----- -- -
------ -------------- -- -
------ -
--- --------
----- ----------
---- ---------
---- ----------- --- ------ - --- - ----
--
---
--
---
----- --- - ----- ------------- ------- ------ ---
-----------------更新数据
通过以下代码进行数据更新：
const res = await crudle.update(1, { name: 'Evan Li' });
console.log(res);其中，update() 方法的第一个参数为需要更新数据的 ID，第二个参数为需要更新的数据，返回结果为更新后的数据。如果需要对请求的参数进行附加操作，可以通过 beforeUpdate 进行设置，afterUpdate 则是对返回结果进行附加操作，如下所示：
-- -------------------- ---- -------
----- ------ - --- --------
--------- ----------------------
-------- -
-------------- ------- -----
--
----- ---------
------------- ----- ---- ----- -- -
------ -
---
--------
---------- --- -------
--
--
------------ ----- ----- -- -
------ -
--- -------
----- ---------
----------- --- -----------------------------------------
--
--
---
----- --- - ----- ---------------- - ----- ----- --- ---
-----------------删除数据
通过以下代码进行数据删除：
const res = await crudle.delete(1); console.log(res);
其中，delete() 方法的参数为需要删除数据的 ID，返回结果为删除后的数据。如果需要对请求的参数进行附加操作，可以通过 beforeDelete 进行设置，afterDelete 则是对返回结果进行附加操作，如下所示：
-- -------------------- ---- -------
----- ------ - --- --------
--------- ----------------------
-------- -
-------------- ------- -----
--
----- ---------
------------- ----- ---- -- -
------ -
---
---------- --- -------
--
--
------------ ----- ----- -- -
------ -
--- -------
----- ---------
----------- --- -----------------------------------------
--
--
---
----- --- - ----- -----------------
-----------------示例代码
以下为一个简单的示例代码，实现了一个基本的用户管理界面：
-- -------------------- ---- -------
------ - ------ - ---- -----------------
----- ------ - --- --------
--------- ----------------------
-------- -
-------------- ------- -----
--
----- ---------
---
----- -------- - -------------------------------------
----- --------- - --------------------------------
----- -------- - -------------------------------
----- ----------- - ----------------------------------
----- --------- - ----------------------------------
----- -------- -------- -
----- --- - ----- --------------
------------------ - ---
------------------ -- -
----- -- - -----------------------------
------------ - -
----------------------------
---------------------------
---------------------- --- ------ - --- - -----------
------- -------------------- ------------------------
------- -------------------- --------------------------
--
-------------------------
---
-
---------------------------------- ----- ------- -- -
----- - ------ - - ------
-- ----------------------------------- -
----- -- - -------------------------------
----- --- - ----- ------------- -- ---
--------------- - ------------
-------------- - -----------
----------------- - --------------
--------------------------------- ----
-
-- ------------------------------------- -
----- -- - -------------------------------
----- --- - ----- ------------------
---------
-
---
----------------------------------- ----- -- -- -
----- ---- - ----------------
----- --- - ---------------
----- ------ - ------------------
----- -- - ----------------------------------
-- ---- -
----- ----------------- - ----- ---- ------ ---
-------------------------------------
- ---- -
----- --------------- ----- ---- ------ ---
-
--------------- - ---
-------------- - ---
----------------- - ---
---------
---
---------小结
通过以上 @appril/crudle 的使用教程，我们可以方便地进行数据的增删改查操作，同时实现了一个简单的用户管理界面，并可以应用到实际的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1081e8991b448daa46