关于react-admin+postgrest小案例

爱学习的前端歌谣

发布于 2023-10-18 11:10:37

4190

文章被收录于专栏：前端小歌谣前端小歌谣

前言

大家好我是歌谣今天继续给大家带来新的技术栈的实践利用的原理是我们的react-admin 创建一个项目文件在react-admin-version

技术栈

postgrest数据库前端react-admin materiel ui+作为组件库

数据库部署

本次的数据库是利用腾讯云创建一个postgrest数据库进行数据库的直连操作即可

数据库设计部分(ER图)

建立学校班级和学生的关系

配置文件

db-uri = "postgres://datames:xxxx@xxxxx/datames"
db-schema = "public"
#db-schema = "clouddb"
#db-anon-role = "yjg"
#db-anon-role = "anon"
db-anon-role = "datames"
#server-host = "0.0.0.0"
server-host = "localhost"
server-port = 4001
#server-port = 3001
#jwt-secret="reallyreallyreallyreallyverysafe"

注意要开启云服务器的监听端口等信息

后台启动

前端部分局部代码

 <Admin
            dataProvider={dataProvider}
            layout={appLayout}
            i18nProvider={i18nProvider}
          >
            <Resource name='t_geyao_school' recordRepresentation="school_name" create={SchoolCreate} list={ListGuesser} edit={SchoolEdit} />
            <Resource name='t_geyao_class' recordRepresentation="class_name" create={ClassCreate} list={ListGuesser} />
            <Resource name='t_geyao_teacher' create={TeacherAdd} list={ListGuesser} />
            <CustomRoutes>
              <Route path="schgeyao/*" element={<SchoolList />} />
              <Route path="classgeyao/*" element={<ClassList />} />
              <Route path="teachergeyao/*" element={<TeacherList />} />
            </CustomRoutes>
          </Admin>

增加

import * as React from 'react';
import { Create, ReferenceInput, SelectInput, SimpleForm, TextInput, UpdateParams, useDataProvider, useResourceContext } from 'react-admin';
import { useNavigate } from "react-router-dom";
export const SchoolCreate = (props: any) => {
    const navigate = useNavigate()
    const onSuccess = (data: any) => {
        navigate(-1)
    };
    return (
        <Create mutationOptions={{ onSuccess }}
        >
            <SimpleForm>
                <TextInput source="school_name" />
            </SimpleForm>
        </Create>
    )
}

编辑

import * as React from 'react';
import { Create, ReferenceInput, SelectInput, SimpleForm, TextInput, Edit, UpdateParams, useDataProvider, useResourceContext } from 'react-admin';
import { useNavigate } from "react-router-dom";
export const SchoolEdit = (props: any) => {
    const navigate = useNavigate()
    const dataprovider = useDataProvider();
    const resource = useResourceContext();
    const onSuccess = (data: any) => {
        const { id, ...res } = data;
        const params: UpdateParams = { id: id, data: res } as UpdateParams;
        dataprovider.update(resource, params);
        navigate(-1)
    };
    return (
        <Edit mutationOptions={{ onSuccess }}
        >
            <SimpleForm>
                <TextInput source="school_name" />
            </SimpleForm>
        </Edit>
    )


}

查看

import { Box, Button, Typography } from "@mui/material";
import { Datagrid, EditButton, List, TextField, ReferenceManyCount } from "react-admin"
import { useNavigate, useParams } from "react-router-dom";
const Empty = () => {
    const { id: plant_id } = useParams();
    const navigate = useNavigate();


    const handleClick = () => {
        navigate(`/t_geyao_school/create`);
    }
    return (
        <Box textAlign={'center'} m={1}>
            <Typography variant="h4" paragraph>
                当前没有学校
            </Typography>
            <Typography variant="body1">
                新加入一个学校信息
            </Typography>
            <Button onClick={handleClick}>新建学校</Button>
        </Box>
    )
}
const SchoolList = () => {
    return (
        <List empty={<Empty />} exporter={false} hasCreate={true} resource="t_geyao_school"
        >
            <Datagrid >
              
                <TextField source='id' />
                <TextField source='school_name' />
                <EditButton></EditButton>
            </Datagrid>
        </List>
    )
}
export default SchoolList

运行结果

新增