前言

大家好我是歌谣微信公众号关注前端小歌谣带你加入前端巅峰人才交流群

简介

最近准备用一个新的技术框架去开发页面据说能又很快的效果

准备工作

postgrest数据库

在这里插入图片描述

react-admin

github.com/marmelab/re…

新建

import React from 'react'





import { Create, SimpleForm, TextInput, DateInput } from 'react-admin'






const OrderCreate = (props: any) => {
    return (

        <Create title="创建订单" {...props}>
            <SimpleForm>

                <TextInput source='orderid'></TextInput>
                <TextInput source='clientname'></TextInput>
                <TextInput source='clientaddr'></TextInput>
                <TextInput source='clientcontact'></TextInput>
            </SimpleForm>
        </Create>
    )
}



export default OrderCreate

编辑

import React from 'react'





import { Edit, SimpleForm, TextInput, DateInput } from 'react-admin'






const OrderEdit = (props: any) => {
    return (

        <Edit title="修改订单" {...props}>
            <SimpleForm>

                <TextInput disabled source='id'></TextInput>
                <TextInput source='orderid'></TextInput>
                <TextInput source='clientname'></TextInput>
                <TextInput source='clientaddr'></TextInput>
                <TextInput source='clientcontact'></TextInput>
            </SimpleForm>
        </Edit>
    )



}




export default OrderEdit

查询

import React from 'react'





import { List,Datagrid,TextField,EditButton,DeleteButton} from 'react-admin'






const OrderList = (props: any) => {
    return <List {...props}>
         <Datagrid>
            <TextField source='id'></TextField>
            <TextField source='orderid'></TextField>
            <TextField source='clientname'></TextField>
            <TextField source='clientaddr'></TextField>
            <TextField source='clientcontact'></TextField>
            <EditButton></EditButton>
            <DeleteButton></DeleteButton>
         </Datagrid>
    </List>



}




export default OrderList

结果

在这里插入图片描述

主体

 <Admin
            dataProvider={dataProvider}
          >
            <Resource name = 't_order' list = {OrderList} create={OrderCreate} edit = {OrderEdit}/>
          </Admin>