轻量级web应用开发（无限制地构建用它就够了）
轻量级web应用开发（无限制地构建用它就够了）npx superplate-cli -o refine-mui tutorial数据提供者是精炼的组件，可以方便地使用不同的 API 和数据服务。要使用我们的Fake REST API，我们将使用“Simple REST Dataprovider”。首先，使用以下命令运行superplate ：代码： import { Refine useMany } from "@pankod/refine-core"; import { useTable List Table DateField Layout ReadyPage notificationProvider ErrorComponent } from "@pankod/refine-antd"; import routerP
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的、无头的 Web 应用程序框架，在开发时考虑了灵活性。
- 使用单个 CLI 命令进行零配置、一分钟设置
- 用于15 多种后端服务的连接器，包括REST API、GraphQL、NestJs CRUD、Airtable、Strapi、Strapi v4、Strapi GraphQL、Supabase、Hasura、Nhost、Appwrite、Firebase、Directus和Altogic
- Next.js或Remix支持SSR
- 使用React Query完善状态管理和突变
- 使用您选择的任何路由器库的高级路由
- 身份验证和访问控制流程的提供商
- 对实时/实时应用程序的开箱即用支持
- 轻松的审核日志和文档版本控制
- 面向未来的稳健架构
- 完整的测试覆盖
开始使用细化的最快方法是使用superplate项目启动工具。运行以下命令来创建一个新的以Ant Design System配置为默认 UI 框架的细化项目 ：
npx superplate-cli --preset refine-antd my-project
设置完成后，导航到项目文件夹并使用以下命令启动项目：
npm run dev
您可以通过http://localhost:3000访问您的优化应用程序：
代码：
import { Refine useMany } from "@pankod/refine-core";
import {
useTable
List
Table
DateField
Layout
ReadyPage
notificationProvider
ErrorComponent
} from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import "@pankod/refine-antd/dist/styles.min.css";
const App: React.FC = () => {
return (
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
resources={[{ name: "posts" list: PostList }]}
Layout={Layout}
ReadyPage={ReadyPage}
notificationProvider={notificationProvider}
catchAll={<ErrorComponent />}
/>
);
};
export const PostList: React.FC = () => {
const { tableProps } = useTable<IPost>();
const categoryIds =
tableProps?.dataSource?.map((item) => item.category.id) ?? [];
const { data isLoading } = useMany<ICategory>({
resource: "categories"
ids: categoryIds
queryOptions: {
enabled: categoryIds.length > 0
}
});
return (
<List>
<Table<IPost> {...tableProps} rowKey="id">
<Table.Column dataIndex="title" title="title" />
<Table.Column
dataIndex={["category" "id"]}
title="category"
render={(value: number) => {
if (isLoading) {
return "loading...";
}
return data?.data.find(
(item: ICategory) => item.id === value
)?.title;
}}
/>
<Table.Column
dataIndex="createdAt"
title="createdAt"
render={(value) => <DateField format="LLL" value={value} />}
/>
</Table>
</List>
);
};
export default App;
interface IPost {
title: string;
createdAt: string;
category: { id: number };
}
interface ICategory {
id: number;
title: string;
}
现在，您应该看到输出为一个填充了post&category数据的表：
第一个使用 Material UI 的应用
首先，使用以下命令运行superplate ：
npx superplate-cli -o refine-mui tutorial
数据提供者是精炼的组件，可以方便地使用不同的 API 和数据服务。要使用我们的Fake REST API，我们将使用“Simple REST Dataprovider”。
接下来，导航到项目文件夹并运行以下命令来安装所需的包：
npm i @pankod/refine-simple-rest
将内容替换为App.tsx以下代码：
import { Refine } from "@pankod/refine-core";
import {
Layout
ErrorComponent
ReadyPage
LightTheme
CssBaseline
ThemeProvider
GlobalStyles
RefineSnackbarProvider
notificationProvider
} from "@pankod/refine-mui";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
const App: React.FC = () => {
return (
<ThemeProvider theme={LightTheme}>
<CssBaseline />
<GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
<RefineSnackbarProvider>
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider(
"https://api.fake-rest.refine.dev"
)}
notificationProvider={notificationProvider}
Layout={Layout}
ReadyPage={ReadyPage}
catchAll={<ErrorComponent />}
/>
</RefineSnackbarProvider>
</ThemeProvider>
);
};
export default App;
运行以下命令以在开发模式下启动应用程序：
npm run dev
-END-
开源协议：MIT license
开源地址：https://github.com/refinedev/refine
