一个vue开发者,初次接触基于schema的react后台管理系统

1,119 阅读2分钟

招聘面试vue,入职接手了一个React的后台管理系统,需求是改个表单字段的传值,title改成purchaseTitle。

image.png 我心想后台管理能有多难,我vue全家桶都会,React的JSX略知一二,有什么是我搞不定的? 我就咔咔一顿,全局搜索,顺着路由找表单页面代码。

image.png 啊,这,怎么短短几行代码,竟生成了一个表单界面。
更诡异的事情是页面中一顿搜索“采购标题”,愣是没找到。 这不科学啊。 于是,我全局搜索,采购标题,定位到了,一个schema文件。

image.png 我心想不对啊,这写的啥,这个文件我愣是看不懂,这个项目用的不是antd吗?

image.png

这才是antd该有的样子,input就是input,默认值,回调函数,该有都有啊。
antd组件库也没见过这个schema东西。
除了中文,这些属性我是一个也看不懂。心想这应该是配置from表单中组件的位置和组件侧边文字的吧。
心想上一个写这个项目的大佬,可真牛,组件封装得真好,配置一下就行了,我只是来维护的,膜拜一下。
我点击提交按钮,搞清楚表单里返回的title是从哪来的就行了,于是我就不管,直接魔改

image.png 简直机智如我,赶紧交差。
接下来几个维护任务,我都是这样浑水摸鱼。 我接到一个增加单选框并设置默认值的任务,

image.png

还是绕不开这个schema文件,百度了一下。
这个schema是一种自带数据类型的JSON数据。

image.png

我就顿悟了所以这个schema就是表单的描述文件。
即使项目没有文档,我不能准确了解某些属性的含义,通过这个系统沉淀的这么多代码我照猫画虎,还不行?

image.png

改一改,就成了。

这个schema非常好用,直接复制粘贴其他页面的form表单schema文件,我就用现成的表单界面,我按照业务需求,改改,就行了。

你在表单点击提交的时候,获取相应表单数值,你可以设置默认值,校验形式。
但是复杂一点,我的表单项需要联动,显示隐藏,增加一下业务处理,又或者是改个输入项,配置特殊的自定义组件,我就难以下手了。
原谅我能力有限,学了学蹩脚的react函数式组件,使用最简单的antd的from的案例代码,来实现业务。(๑•̀ㅂ•́)و✧

image.png