react-admin+postgrest实现增删改查功能(摆脱接口开发)

前言

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

简介

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

准备工作

postgrest数据库

在这里插入图片描述

react-admin

https://github.com/marmelab/react-admin

新建

``` import React from 'react'

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

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

export default OrderCreate

```

编辑

``` import React from 'react'

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

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

}

export default OrderEdit

```

查询

``` import React from 'react'

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

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

}

export default OrderList

```

结果

在这里插入图片描述

主体

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

总结

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

posted @   前端导师歌谣  阅读(15)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
点击右上角即可分享
微信分享提示