采用Supabase+Refine快速搭建管理后台

简介

Refine是一个 React 元框架,用于 CRUD 密集型的 Web 应用程序。它适用于广泛的企业用例,包括内部工具、管理面板、仪表板和 B2B 应用程序。

supabase提供一站式后端服务,包括数据库、对象存储、实时realtime,用户认证、通过API即可完成访问操作。

接下来,学习如何创建一个 Supabase 项目,向你的数据库中添加一些示例数据,并从 Refine 应用查询这些数据。

1.创建应用

登录MemFire Cloud,在控制面板中创建一个新项目,如下图所示:

2.创建数据表

在SQL 编辑器中创建一个表。使用以下 SQL 语句来创建一个带有一些示例数据的国家表。

sql 复制代码
 -- Create the table
 CREATE TABLE countries (
   id SERIAL PRIMARY KEY,
   name VARCHAR(255) NOT NULL
 );
 -- Insert some sample data into the table
 INSERT INTO countries (name) VALUES ('United States');
 INSERT INTO countries (name) VALUES ('Canada');
 INSERT INTO countries (name) VALUES ('Mexico');
 INSERT INTO countries (name) VALUES ('China');
 INSERT INTO countries (name) VALUES ('China');

执行完上述命令后,可以在表编辑器中查看结果。

3.创建一个 Refine 应用

使用 create refine-app 命令创建一个 Refine 应用。

refine-supabase 预设会添加 @refinedev/supabase 补充包,该包支持在 Refine 应用中使用 Supabase。@refinedev/supabase 预装了 Supabase 的依赖项:supabase-js

sql 复制代码
npm create refine-app@latest -- --preset refine-supabase my-app

4.在 VS Code 中打开你的 Refine 应用

您将在VS Code中开发您的应用程序,连接到 Supabase后端 ,并运行 refine 应用。

bash 复制代码
cd my-app
code .

5.启动应用程序

执行如下命令,启动应用程序。

arduino 复制代码
npm run dev

在浏览器中访问 http://localhost:5173,然后就会出现 "欢迎使用 refine "页面。

6.更新 supabaseClient

现在,您必须配置supabaseClient中的访问URL和密钥。supabaseClient 用于授权提供者和数据提供者方法,允许 refine 应用程序连接到 Supabase 后端。

您可以在配置-API页面,获取到应用的访问URL 和 KEY。

打开src/utility/supabaseClient.ts文件,进行配置操作。

php 复制代码
import { createClient } from "@refinedev/supabase";
​
const SUPABASE_URL = YOUR_SUPABASE_URL;
const SUPABASE_KEY = YOUR_SUPABASE_KEY
​
export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
  db: {
    schema: "public",
  },
  auth: {
    persistSession: true,
  },
});

7.添加国家资源和页面

接下来,你需要为countries资源配置资源,并为该资源定义页面。使用以下命令,通过 Refine Inferencer 自动添加资源并为countries页面生成代码。

arduino 复制代码
npm run refine create-resource countries

这将在 src/pages/countries/ 目录内定义列表、创建、展示和编辑操作的页面,并使用 <HeadlessInferencer /> 组件。

<HeadlessInferencer /> 组件依赖于 @refinedev/react-table@refinedev/react-hook-form 包。为了避免错误,你应该使用 如下命令将它们作为依赖项安装。

sql 复制代码
npm install @refinedev/react-table @refinedev/react-hook-form 
npm install @refinedev/inferencer

<HeadlessInferencer /> 是一个 Refine Inferencer 组件,它会自动为列表、创建、展示和编辑页面生成必要的代码。有关 Inferencer 工作原理的更多信息可以在官方文档的此处找到。

8.为国家页面添加路由

为列表、创建、展示和编辑页面添加路由。你应该移除使用 <Welcome /> 组件展示的欢迎页面的索引路由.

src/App.tsx

javascript 复制代码
import { Refine, WelcomePage } from "@refinedev/core";
import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
import routerBindings, {
  DocumentTitleHandler,
  NavigateToResource,
  UnsavedChangesNotifier,
} from "@refinedev/react-router-v6";
import { dataProvider, liveProvider } from "@refinedev/supabase";
import { BrowserRouter, Route, Routes } from "react-router-dom";
​
import "./App.css";
import authProvider from "./authProvider";
import { supabaseClient } from "./utility";
import { CountriesCreate, CountriesEdit, CountriesList, CountriesShow } from "./pages/countries";
​
function App() {
  return (
    <BrowserRouter>
      <RefineKbarProvider>
        <Refine
          dataProvider={dataProvider(supabaseClient)}
          liveProvider={liveProvider(supabaseClient)}
          authProvider={authProvider}
          routerProvider={routerBindings}
          options={{
            syncWithLocation: true,
            warnWhenUnsavedChanges: true,
          }}
          resources={[{
            name: "countries",
            list: "/countries",
            create: "/countries/create",
            edit: "/countries/edit/:id",
            show: "/countries/show/:id"
          }]}>
          <Routes>
            <Route index
              element={<NavigateToResource resource="countries" />}
            />
            <Route path="/countries">
              <Route index element={<CountriesList />} />
              <Route path="create" element={<CountriesCreate />} />
              <Route path="edit/:id" element={<CountriesEdit />} />
              <Route path="show/:id" element={<CountriesShow />} />
            </Route>
          </Routes>
          <RefineKbar />
          <UnsavedChangesNotifier />
          <DocumentTitleHandler />
        </Refine>
      </RefineKbarProvider>
    </BrowserRouter>
  );
}
​
export default App;

9.查看国家页面

现在你应该能够看到沿 /countries 路由的国家页面。现在,你可以使用 Inferencer 生成的用户界面编辑和添加新的国家。

Inferencer 自动生成的代码为您提供了一个良好的起点,您可以在此基础上继续建立列表、创建、显示和编辑页面。点击相应页面中的 Show the auto-generated code 按钮即可获得这些代码。

相关推荐
小牛itbull5 分钟前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
FinGet11 小时前
那总结下来,react就是落后了
前端·react.js
阿乾之铭14 小时前
通过Django 与 PostgreSQL 进行WEB开发详细流程
python·postgresql·django
王解15 小时前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
TMDOG66616 小时前
PostgreSQL 学习笔记:PostgreSQL 主从复制
笔记·学习·postgresql
大霸王龙17 小时前
django+postgresql
数据库·后端·python·postgresql·django
AIoT科技物语1 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
初遇你时动了情1 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
番茄小酱0011 天前
ReactNative中实现图片保存到手机相册
react native·react.js·智能手机
王解1 天前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架