在创建内部工具时,低代码平台是要走的路。使用基于 React 的低代码平台 Refine,您可以快速构建数据密集型应用程序,而无需担心可扩展性或易用性。其他低代码平台可能允许您开发应用程序,但它们通常在灵活性和可定制性方面受到限制。使用 Refine,您可以完全控制您的应用程序,并且可以添加您需要的任何业务逻辑。因此,如果您正在寻找一个可以让您快速轻松地构建内部工具的平台,那么 Refine 是正确的选择!

什么是精炼?

Refine 是一个基于 React 的无头框架,可让您快速轻松地构建数据密集型应用程序。快速发展和无头同时是怎么回事?好吧,Refine 支持Ant Design快速简便的解决方案。此外,它允许您使用您的设计系统,或与其他流行的设计框架集成。

有关详细信息,请参阅Refine。

为什么要使用 Refine?

• 它是在 MIT 许可下开源的。

• 易于使用,易于学习。有许多示例可以帮助您入门,还有文档。

• 是一个不需要你使用任何 UI 库或框架的框架。

• 支持Ant Design,快速简单的解决方案。

• 后端不可知,因此您可以连接到任何您想要的后端。

• 可定制,这意味着您可以根据需要进行更改。

• Refine 与Next.js的服务器端渲染完全兼容。

Refine的特点

Refine 的一些主要功能包括:

• 数据获取和状态管理

• 路由

• 认证

• 授权

• 国际化

• 实时

• 具有乐观和悲观模式和不可行模式的突变模式

Refine 是如何工作的?

Refine 是完全不可知的;只需使用 Refine 组件包装您的应用程序并传递您需要的属性。例如,它需要诸如dataProvider之类的属性来与 API 通信,而需要authProvider来进行身份验证。然后你就有了可以在整个应用程序中使用的钩子。这些钩子与React Query兼容。

要了解 Refine 的工作原理,让我们探索以下标题:

与API通信

dataProvider允许与 API 通信。所有的数据获取和突变都是通过这个属性完成的。

数据提供者必须具有以下属性:

const dataProvider = {
  create: ({ resource, variables, metaData }) => Promise,
  createMany: ({ resource, variables, metaData }) => Promise,
  deleteOne: ({ resource, id, metaData }) => Promise,
  deleteMany: ({ resource, ids, metaData }) => Promise,
  getList: ({ resource, pagination, sort, filters, metaData }) => Promise,
  getMany: ({ resource, ids, metaData }) => Promise,
  getOne: ({ resource, id, metaData }) => Promise,
  update: ({ resource, id, variables, metaData }) => Promise,
  updateMany: ({ resource, ids, variables, metaData }) => Promise,
};

进入全屏模式 退出全屏模式

Refine 提供了钩子来帮助您使用数据提供者的属性进行数据获取和突变。例如,当您使用useTable或useList挂钩时,它会在底层调用getList方法。

有关详细信息,请参阅useTable和数据挂钩。

例如,让我们看看调用useTable时会发生什么。

import { List, Table, TextField, useTable } from "@pankod/refine-antd";

interface IPost {
  id: string;
  title: string;
  content: string;
  status: "published" | "draft" | "rejected";
}

export const PostList: React.FC = () => {
  const { tableProps } = useTable({
    resource: "posts",
    initialSorter: [
      {
        field: "title",
        order: "asc",
      },
    ],
    initialFilter: [
      {
        field: "status",
        operator: "eq",
        value: "draft",
      },
    ],
  });

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column dataIndex="title" title="Title" />
        <Table.Column dataIndex="content" title="Content" />
      </Table>
    </List>
  );
};

进入全屏模式 退出全屏模式

示例中的useTable调用具有以下属性的数据提供者的getList方法:

getList({
  resource: "posts",
  pagination: {
    page: 1,
    perPage: 10,
  },
  sort: [
    {
      field: "title",
      order: "asc",
    },
  ],
  filters: [
    {
      field: "status",
      operator: "eq",
      value: "draft",
    },
  ],
});

进入全屏模式 退出全屏模式

使用metaData,您可以将所需的任何参数传递给数据提供者。您可以在数据提供程序中处理它。

所有使用数据提供者方法(例如useTable)的钩子都与React Query一起使用。所以你可以使用 React Query 的所有功能。

有关详细信息,请参阅dataProvider。

开箱即用的数据提供程序

Refine 包括许多开箱即用的数据提供程序,可在您的项目中使用,例如:

• 简单的 REST API

• GraphQL

• NestJS CRUD

• 空气桌

• 肩带-肩带

• Strapi GraphQL

• 斯帕基地

• 邂逅

• 应用程序写入

• Altogic

给应用添加路由

Refine 需要一些路由功能来创建资源页面、导航等。它使用routerProvider属性将路由器功能传递给 Refine。通过这种方式,它允许您使用任何您想要的路由器库。

如果您不需要对路由器进行任何自定义,我们不建议您创建此提供程序。相反,为您的 Next.js 项目尝试nextjs-router,为您的 React 项目尝试react-router或react-location。

有关详细信息,请参阅routerProvider。

开箱即用的路由器提供商

Refine 包括许多开箱即用的数据提供程序,可在您的项目中使用,例如:

• 反应路由器

• 反应位置

• Next.js 路由器

通过resources创建页面

Refine 应用程序的主要构建块是resources。资源是 API 端点中的一个实体(例如,https://api.fake-rest.refine.dev/posts)。它将来自 API 的数据与页面组件连接起来,允许页面访问来自 API 的数据。

import { Refine } from "@pankod/refine-core";
import dataProvider from "@pankod/refine-json-server";
import "@pankod/refine-antd/dist/styles.min.css";

import { PostList, PostCreate, PostEdit, PostShow } from "pages/posts";

const App: React.FC = () => {
  return (
    <Refine
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
      resources={[
        {
          name: "posts",
          list: PostList,
          create: PostCreate,
          edit: PostEdit,
          show: PostShow,
        },
      ]}
    />
  );
};

export default App;

进入全屏模式 退出全屏模式

每个资源组件都由 Refine 分配一个路由。例如/posts路由显示posts资源的列表页面,该资源是使用PostList组件实现的。PostCreate组件是posts资源的创建页面,由/posts/create路由渲染。PostEdit组件是posts资源的编辑页面,由/posts/edit/:id路由渲染。PostShow组件是posts资源的展示页面,由/posts/show/:id路由渲染。

这些页面中使用的优化钩子默认从路由中读取一些值。例如,useForm挂钩默认从路由中获取resource、action和id。

认证

authProvider允许您在应用程序中添加身份验证。您可以使用任何您想要的身份验证库。您的所有身份验证逻辑都由这个authProvider管理。

身份验证提供程序必须具有以下属性:

const authProvider = {
  login: () => Promise,
  logout: () => Promise,
  checkAuth: () => Promise,
  checkError: () => Promise,
  getPermissions: () => Promise,
  getUserIdentity: () => Promise,
};

进入全屏模式 退出全屏模式

Refine 通过授权钩子使用这些方法。身份验证和授权过程,例如登录、注销、检查用户凭据和捕获 HTTP 错误,都使用授权钩子处理。例如,当用户尝试访问需要身份验证的页面时调用checkAuth。

有关详细信息,请参阅authProvider。

开箱即用的路由器提供商

• Auth0 -源代码-演示

• 谷歌 -源代码-演示

• OTP 登录 -源代码-演示

授权

Refine 提供了accessControlProvider,您可以使用它来控制谁可以访问您的应用程序中的内容。您可以使用任何您想要的访问控制库。此外,您可以选择最适合您的访问控制模型(RBAC、ABAC、ACL 等)。

accessControlProvider必须有一个称为can的异步方法来检查是否允许请求访问的人拥有它。

type CanParams = {
    resource: string;
    action: string;
    params?: any;
};

type CanReturnType = {
    can: boolean;
    reason?: string;
}

const accessControlProvider = {
    can: ({ resource, action, params }: CanParams) => Promise<CanReturnType>;
}

进入全屏模式 退出全屏模式

useCan和<CanAccess>组件使用此方法检查是否允许用户访问。

例如,我们可以阻止非管理员用户编辑帖子资源。

const App: React.FC = () => {
  <Refine
    accessControlProvider={{
      can: async ({ resource, action, params }) => {
        if (resource === "posts" && action === "edit") {
          const userRole = getUserRole();

          if (userRole === "admin") {
            return { can: true };
          }

          return Promise.resolve({
            can: false,
            reason: "Unauthorized",
          });
        }

        return Promise.resolve({ can: true });
      },
    }}
  />;
};

进入全屏模式 退出全屏模式

有关详细信息,请参阅accessControlProvider。

开箱即用的访问控制提供商

• Casbin -源代码-演示

• Cerbos -源代码-演示

国际化

i18nProvider用于为您的应用程序提供本地化功能。这将允许您将应用程序中的文本更改为不同的语言。

i18n 提供程序必须具有以下属性:

const i18nProvider = {
  translate: (key: string, params: object) => string,
  changeLocale: (lang: string) => Promise,
  getLocale: () => string,
};

进入全屏模式 退出全屏模式

Refine 通过翻译挂钩使用这些方法。

有关更多详细信息以及如何使用react-i18next包,请参阅Refine i18nProvider。

实时支持

liveProvider用于为您的应用程序添加实时支持。您可以使用任何您想要的实时库或工具。

实时提供者必须具有以下属性:

const liveProvider = {
    subscribe: ({ channel, params: { ids }, types, callback }) => any,
    unsubscribe: (subscription) => void,
    publish?: (event) => void,
};

进入全屏模式 退出全屏模式

使用实时提供者提供的 subscribe 方法订阅 Refine 数据挂钩。 subscribe 方法返回一个订阅对象,可以用来取消订阅。 unsubscribe 方法用于取消订阅。 publish 方法用于将事件发布到客户端的通道。

如果您在服务器上进行相关操作后发送事件,Refine 将使相关查询无效。如果liveMode为manual,则相关资源的查询不会实时失效;相反,当订阅中的新事件到达时,onLiveEvent与事件一起运行。

开箱即用的访问控制提供商

• Ably -源代码-演示

• Supabase -源代码

• Appwrite -源代码

Refine 的其他功能

notificationProvider

notificationProvider用于在执行突变时向用户显示通知。您可以使用任何您想要的通知库。

mutationMode

mutationMode用于确定如何处理突变。您可以使用pessimistic``optimistic或undoable模式。使用悲观模式时,UI 更新会延迟,直到服务器确认突变。使用乐观模式时,UI 更新会立即更新。使用 undoable 模式时,UI 更新会立即更新,但您可以撤消突变。

syncWithLocation

如果syncWithLocation开启,可以通过直接在 URL 中编辑来手动修改查询参数列表。

/posts?current=1&pageSize=8&sort[]=createdAt&order[]=desc

进入全屏模式 退出全屏模式

查看 Refine 的所有功能了解更多信息。

结论

如果您正在寻找一种在不牺牲定制的情况下快速轻松地创建内部工具的方法,那么 Refine 值得一试。它允许您根据需要选择所需的任何库。此外,如果您需要帮助或有反馈,Refine 的团队会积极响应并乐于提供帮助。如果您喜欢,请在 GitHub 上给Refine打个星 - 您的支持将帮助我们继续让这个工具变得更棒!