npm 包 @turbolent/aor-postgrest-client 使用教程

介绍

@turbolent/aor-postgrest-client 是一个基于 React-admin 和 postgREST 的前端数据请求库。它可以方便地将 postgREST 的 REST API 集成到 React-admin 应用程序中,并提供了丰富的资源操作功能。

安装

首先,确保您的项目已经安装了 React-admin。接着,在项目根目录执行以下命令来安装 @turbolent/aor-postgrest-client:

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

使用

基本用法

第一步是使用 resource 定义一个资源。例如,我们定义一个名称为 posts 的资源:

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

接下来,我们可以使用 React-admin 中的典型方式来定义一个页面:

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

这将创建一个 posts 资源的列表页面。现在,我们可以使用 List 组件来定义列表,并使用 Datagrid 和 TextField 组件来定义列:

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

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

现在,我们可以在浏览器中访问 http://localhost:3000/#/posts 查看 posts 资源的列表页面。

高级用法

除了基本用法之外,@turbolent/aor-postgrest-client 还提供了丰富的资源操作功能,例如过滤、排序、分页等。

过滤

在上面的示例中,List 组件中使用 rowClick="edit" 将行点击操作定义为编辑表单。为了过滤出某个特定资源,我们可以使用 filter 属性:

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

这将过滤出所有标题为 "Hello, World!" 的帖子。

排序

我们可以通过 sort 属性来对数据进行排序。sort 属性接受一个带有字段和顺序的数组:

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

这将按创建时间字段按降序排列数据。

分页

我们可以使用 pagination 属性来进行分页:

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

这将将每页显示 10 条数据。

@turbolent/aor-postgrest-client 还支持更多的其他操作,如资源的添加、编辑、删除等。这里不再赘述。

总结

在本文中,我们介绍了如何使用 @turbolent/aor-postgrest-client 库将 postgREST 的 REST API 集成到 React-admin 应用程序中。通过定义资源、创建页面和使用过滤、排序、分页等高级用法,我们可以更轻松地操作数据。

示例代码见:https://github.com/turbolent/aor-postgrest-client

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600566c181e8991b448e31c2


猜你喜欢

  • npm 包 gen-pdf 使用教程

    在前端开发中,我们经常需要将页面内容转换成 PDF 文件,而这时候我们可以使用 gen-pdf 这个 npm 包来简化这个过程。本教程将会介绍如何使用 gen-pdf 这个 npm 包,并带来一些例子...

    3 年前
  • npm包ae-libreria-form-builder使用教程

    在前端开发中,表单是我们经常使用的一个组件。而ae-libreria-form-builder就是一个可以帮助我们快速构建表单的npm包。本文将详细介绍如何使用这个npm包。

    3 年前
  • npm 包 node-angular-http-client 使用教程

    介绍 在前端开发中,我们经常会需要与后端进行数据的交互。而 Http 客户端就是帮助我们实现与后端交互的工具之一。node-angular-http-client 就是一个非常好用的 Http 客户端...

    3 年前
  • npm 包 topic-extraction 使用教程

    随着互联网信息的不断增多,如何从文本中提取出有意义的主题信息成为了一个重要的研究问题。为了解决这一问题,前端开发人员开发了一个名为 topic-extraction 的 npm 包,可以方便地进行文本...

    3 年前
  • NPM包@priotas/angular-motion使用教程

    前言 在前端开发中,动画对于提升用户体验至关重要,而Angular框架本身并没有提供太多动画效果的支持。但好在社区有很多开源的第三方包可供选择,本文就向大家介绍其中的一个——@priotas/angu...

    3 年前
  • npm 包 diffestim 使用教程

    在前端开发中,常常需要进行页面或代码的修改,然后及时对修改后代码进行测试、联调或上线。使用版本管理工具 git 可以很轻松地进行代码管理,并能及时找到修改。但如果需要对两个代码版本进行比较,则需要用到...

    3 年前
  • npm 包 jswrap-brunch 使用教程

    jswrap-brunch 是一个能够将 CommonJS 模块转换为 JavaScript 包装器的 npm 包。它可以帮助前端开发者更好地组织代码。 安装 使用 jswrap-brunch 很容易...

    3 年前
  • npm 包 react-native-touch-id-android 使用教程

    在移动应用程序的开发中,安全性是至关重要的。在 Android 平台上,开发者可以使用指纹识别来保护用户数据的安全性。如果你正在进行 React Native 开发,并想在 Android 机型上使用...

    3 年前
  • npm 包 copldots 使用教程

    copldots 是一个优秀的 npm 包,它提供了一套简单易用的方法来实现轻松的可视化输入。它能够帮助前端开发者快速地实现各种实用的交互功能。在本文中,我们将介绍如何使用 copldots,详细阐述...

    3 年前
  • npm 包 cup-test 使用教程

    前言 在前端开发中,我们经常会使用第三方的库或框架,用来提高开发效率和代码质量。npm 是一个常用的包管理器,通过 npm 可以方便地安装、更新和管理第三方库或工具。

    3 年前
  • npm 包 lacymorrow-omdb-client 使用教程

    前言 在现代的前端开发中,使用第三方 npm 包已经成为了常态,它们往往具有高质量、易用性强、功能丰富等特点。本文将以 lacymorrow-omdb-client 为例,详细介绍如何使用它来获取电影...

    3 年前
  • npm 包 generator-electron-react 使用教程

    在前端开发中,我们经常会使用到 Electron 和 React。generator-electron-react 就是一个开源的 npm 包,它可以帮助我们快速生成一个 Electron 和 Rea...

    3 年前
  • npm 包 react-native-mba 使用教程

    为了快速构建跨平台的移动应用程序,React Native 的出现为前端开发工程师带来了很大的便利。而在 React Native 中,react-native-mba 作为一个非常受欢迎的 npm ...

    3 年前
  • npm包 sf-muni-vue的使用教程

    前言 npm是一个开放的包管理系统,通过npm我们可以轻松地安装和分享包,其中sf-muni-vue是一个针对前端开发的包,它可以为我们提供San Francisco Muni公交路线信息和实时车辆数...

    3 年前
  • npm 包 vue-dividing-rule 使用教程

    前言 在前端开发中,我们常常需要在页面中添加水平或竖直的分割线来美化页面或对页面进行分块。而手动添加分割线固然可行,但却无法保证各个分割线样式的统一性,不利于维护和后期修改。

    3 年前
  • npm 包 analytics-api-fb 使用教程

    介绍 analytics-api-fb 是一个 Node.js 包,可以用于获取 Facebook 广告的数据分析。该包用于向 Facebook 广告数据 API 发出请求并返回响应。

    3 年前
  • npm 包 hastypes 使用教程

    本文将介绍一个前端开发中常用的 npm 包 hastypes,它可以在 TypeScript 中强制实现指定的数据类型结构。 简介 在前端开发中,我们需要保证数据的类型正确,往往使用 TypeScri...

    3 年前
  • npm 包 generator-nmlib 使用教程

    若你是一名前端开发工程师,你一定知道 npm 包这个概念。npm 包是 JavaScript 的包管理器,它可以帮助你在项目中管理依赖,节约时间和精力。 在 npm 包的世界里,有些包能够让我们开发更...

    3 年前
  • npm 包 eazyfront 使用教程

    在前端开发中,我们经常需要使用各种库和框架来提高开发效率和代码质量。而 npm 是一个非常受欢迎的包管理器,可以轻松地安装和管理各种前端包。在众多 npm 包中,eazyfront 是一个非常优秀的工...

    3 年前
  • npm 包 import-kibana-dashboard 使用教程

    Kibana Dashboard 是 ELK Stack 的重要组成部分之一。它可以帮助我们实时监控日志数据并快速定位异常问题。但是如果要手动创建一个完整的 Dashboard 是非常困难的,很多公司...

    3 年前

相关推荐

    暂无文章