在前端开发中，我们经常需要使用一些后端数据，而前后端分离的开发模式越来越流行。为了提高开发效率，我们需要使用合适的工具来处理数据请求与响应。在这篇文章中，我们将介绍一个非常有用的 npm 包 ra-data-prisma2，它可以帮助我们连接 prisma2 服务端，并快速构建出管理系统前端页面。
安装
使用 npm 安装 ra-data-prisma2：
npm install --save ra-data-prisma2
配置
在使用 ra-data-prisma2 之前，我们需要先在项目中配置好 prisma2。
1. 安装 prisma2
使用 npm 安装 prisma2：
npm install -g prisma2
2. 初始化 prisma2
使用以下命令初始化 prisma2：
prisma2 init
3. 创建数据模型
编辑 prisma/schema.prisma，配置数据模型：
-- -------------------- ---- ------- ---------- -- - -------- - ------------ --- - ------------------- - --------- ------ - -------- - ------------------ - ----- ---- - -- --- --- ------------------------- ----- ------ ------- ------- --------- ------- --------------- --------- -------- --------------- --------- -------- ---------- -
4. 生成 prisma-client-js
运行以下命令，生成 prisma-client-js：
prisma2 generate
5. 配置 ra-data-prisma2
在项目中新建文件 src/ra-data-prisma2.js，并配置 ra-data-prisma2：
-- -------------------- ---- -------
------ ------------------- ---- -----------------
------ - ------------ - ---- -----------------
----- ------ - --- ---------------
----- ----------- - ----- -- -
------ --------------- ---------------
--
----- ----------- - ------ -- -
----- --------- - --------------------------------------------------
------ -- -------------- -----
--
----- ------------ - -
-------------
----------
----------
-------------
------------ - ---
- -- -
----- --------- - ------------------
----- --------- - --------- ------------- ------ ------------- ------------ ----------
----- ----------- - --------------------------
----- ------------ - --------- - -------- -------------- - ---
----- -------------- - ---
--------- - ------ ------ - --
-- ----------- -------------
------ -
------------ -
------ ----------------------- ------------------------ -------------- -
---------------------- ------- --------------
---
---------- -------- ------ ------------ -- --
------ -------
----- ------
----------- ------------
---
-------------- -- ---- -- -- -------------------
--
-------------------------- -
------ -------------------------- ------------------------------------ -------------- -
---------------------------------------- --------------
---
---------- ------- ------------ -- --
----- ------
----------- ------------
---
-------------- -- ---- -- -- ------------------------------
--
-------------------------- -
------ -------------------------- ----------------------------- ------------- ------ ------------- ------------ -------- -------------- -
---------------------------- ------- ------------------ --------------
---
---------- -------- ------ ------------ -- --
------ -------
----- ------
----------- ------------
---
-------------- -- ---- -- -- ------------------------------
--
-------------------------- -
------ -------------------------- ----------------------------- ------------- ------------ -------- -------------- -
---------------------------- ------- ----------- ------------ --------------
---
---------- -------- ------------ -- --
------ -------
----------- ------------
---
-------------- -- ---- -- -- ------------------------------
--
--
--
------ ------- ----- -------- -------------------
----------
-
-------
------------ - ---
-------------- - ----- -- ------
- - ---
- -
----- -------------- - ----- --------------------
----------
-
-------
---------------
--
---
--
------ -- -- -
----- ------ - -----------------
------ -
----------
-------- ----- -------------- ------- -- -
----- - ----- ---------- -------- ------------ - - ------------------
----- ---- - --------- - --
----- ------- - -------------
----- - ------ ----- - - ------------
----- ------- - --------------------
----- -------- - -------------
-------------
-----
-------
--------------
-------------
--
----- - ---- - - ----- ----------------
-----------------------------
------------------------------------------------
--
----- ----- - --------------------------
----- ------- - ------------------
----------- - -------- ---- - ------- - --------
------ -- -- ----- --- --------------- ----
------ -
----- --------
------
--
--
------- ----- -------------- - ---- -- -- -
----- -------- - -------------
-------------
-----------------------------
-------
-----
-------------
--
----- ----- - - ------- --
------ ---------
----- - ----- ----------- - - ----- ----------------
----------------------------------------
---------------------------------------------------
--
------ - ----- - --------------- --- ------------------------- - --
--
------- ----- -------------- - --- ---- -- -- -
----- -------- - -------------
-------------
-----------------------------
-------
-----
-------------
--
----- - ----- ----------- - - ----- ----------------
----------------------------------------
---------------------------------------------
------ - --- ------------ --- --
-----
---
--
------ - ----- - --------------- --- ------------------------- - --
--
------- ----- -------------- - -- -- -- -
----- -------- - -------------
-------------
-----
-------
-----
-------------
--
----- - ----- ----------- - - ----- ----------------
----------------------------------------
---------------------------------------------
------ - --- ------------ --- --
---
--
------ - ----- - --------------- --- ------------------------- - --
--
--
--
-使用
到这里，已经完成了 ra-data-prisma2 的配置，我们可以开始使用它来构建我们的管理系统页面了。
例如，我们可以创建一个 Post 的页面：
-- -------------------- ---- -------
------ ----- ---- --------
------ -
-----
---------
----------
------------
----------
-------------
-----
-----------
----------
------------
----------
-------------
-------
- ---- --------------
------ ------------------ ---- ------------------
----- ------ - ------------------------------
----- --------- - -
- ----- ------ --
--
----- ---------- - ----- ---------- -- -
----- ------------ - -
------ ---------------
-------- -----------------
--
----- ------ - ----- ----------------------------- - ------ -----
----- - ---- - - ----- --------------------- - ----- ------------ ---
------ - ---- --
--
----- -------- - ----- -- --- -------- -- -- -
----- ------------ - -
------ ---------------
-------- -----------------
--
----- ------ - ----- ----------------------------- - ------ -----
----- - ---- - - ----- --------------------- - --- ----- ------------ ---
------ - ---- --
--
------ ----- ---------- - ------- -- -
------- ---------- --------------------
------------
---------- -------- ----------- --
---------- -------------- --
---------- ---------------- --
-------------
---------
--
------ ----- -------- - ------- -- -
----- ---------- ----------------
------------
---------- -------- ----------- --
---------- -------------- --
---------- ---------------- --
---------- ------------------ --
---------- ------------------ -------- --
-------------
-------
--
------ ----- -------- - ------- -- -
----- ------------- - ----- -- --
----- ----------------------------- - ------ -----
------ -
----- ---------- ------------ ------- ------ ----- ------ ------ ---
--------- ----------------
------------ ----------- --
---------- -------------- --
------------- ------------------ --
---------- ------------------ --
---------- ------------------ --
-----------
-------
--
--以上代码演示了如何使用 ra-data-prisma2 来实现 CRUD 操作，当然实现的这个页面并不完整，你可以继续优化它。
指导意义
通过本文的学习，我们了解了如何使用 ra-data-prisma2 快速构建出连接 prisma2 服务端的管理系统前端页面。ra-data-prisma2 可以让我们更加快速高效地完成前端页面的开发，提高我们的工作效率，让我们能够更好地实现前后端分离的开发模式。同时，通过对源码的深度分析，我们也能更好地理解如何基于 Apollo Client 来构建出业务组件。这对于我们的前端开发学习和工作都会有重要的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583c43