前言

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

简介

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

准备工作

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>

总结

这样就实现了只要通过数据库表和前端就完成了管理页面的开发 只需要知道表名即可 这边知识部分代码 我是歌谣 放弃很容易 但是坚持一定很酷