从零实现一套低代码（保姆级教程）【后端服务】 --- 【22】实现数据库管理的前端页面

最新推荐文章于 2024-07-21 09:18:44 发布

搞前端的小菜

最新推荐文章于 2024-07-21 09:18:44 发布

阅读量482

点赞数 6

文章标签：低代码数据库前端

本文链接：https://blog.csdn.net/weixin_46726346/article/details/136288248

版权

摘要

在上一篇中，我们实现了三个接口：

新增实体的接口
删除实体的接口
获取实体列表的接口

其实复杂的地方在于，我们创建一个实体，是在数据库中创建了一张表。而这张表中的数据，是要根据低代码平台中的操作进行更改。

现在，我们有了接口之后，要将这个实体创建，删除等过程，进行可视化。所以我们需要来到AppBuilder项目中。

1.创建数据库管理路由页面

和之前的图片管理一样，我们只需要再添加一个路由页面：

在这里插入图片描述

这里比较简单，我们添加好路由之后，点击事件直接跳转就行了。

  const toDataBase = () => {
    window.open(`http://localhost:3001/#/dataBase`)
  }

2.对接口进行适配的页面效果

我们要实现的页面效果，只需要具备对应的三个接口的功能，先来看一下页面。

在这里插入图片描述
可以看到

左侧展示的是实体列表，也就是获取实体列表的接口。
新增实体的按钮是用来触发，新增实体的接口。
右侧的表格展示的是当前选中实体的schema。
删除按钮是删除当前实体的接口。

读者可能会发现，我这个页面是有数据的，有两个实体。读者也可以先用swaager文档，去新增两个实体：

在这里插入图片描述

3.获取实体列表

这里面我只贴上比较重要的代码，具体的代码可以在github上进行查看（地址在最下面）。当然，其实接口有了，页面上面也给了。读者完全也可以自己去实现页面了。

	interface Entity {
	  entityCode: string,
	  entityName: string,
	  entitySchema: EntitySchema
	}
	
	interface EntitySchema {
	  [key: string]: string
	}
	
	const [entityList, setEntityList] = useState<Entity []>([])
	useEffect(() => {
	  getEntityList()
	}, [])
	
	const getEntityList = () => {
	  axios.post('http://localhost:4000/entity/getEntityList')
	  .then(res => {
	    if(res.data.data) {
	      setEntityList(res.data.data)
	    }
	  })
	}

4.删除实体

  const deleteEntity = (entity: Entity) => {
    return () => {
      axios.post('http://localhost:4000/entity/delEntityItem', {
        entityCode: entity.entityCode
      })
      .then(res => {
        if(res.data.code == 200) {
          message.success('删除成功');
          getEntityList()
        }
      })
    }
  }

5.新增实体

新增实体，接口需要接受三个参数，实体名称，实体编码，实体schema。而schema是一个对象，所以当我们点击新增实体的时候，我需要有一个弹窗，让用户去配置这些信息。

在这里插入图片描述
配置好后，点击确定按钮之后，调用接口。

const handleOk = () => {
    if(entityName === '' || entityCode === '') {
      message.error('请输入实体名称或编码')
      return;
    }
    const entitySchema: EntitySchema = {};
    schemaList.forEach(item => {
      if(item && item.code) {
        entitySchema[item.code] = item.type
      }
    })
    axios.post('http://localhost:4000/entity/addEntity', {
      entitySchema,
      entityCode,
      entityName
    })
    .then(res => {
      if(res.data.code = 200) {
        message.success('新建成功');
        getEntityList()
        setEntityName('')
        setEntityCode('')
        setSchemaList([])
        setShowEntityModal(false)
      }
    })
    
  }