### 前言中后台管理类系统基本都是对数据的增删改查、上传下载等，最多也只是展示形式上的差异，一般都是由：一块区域用来输入或选择进行调用接口进行查询，一个表格用于对查询出的数据进行展示以及每条数据的操作，一个或两个表单用于数据的添加或者修改，以及一块功能区域用于批量删除、导入、导出等等。这些功能简单且量大编写的再多也不能提升自生境界，纯粹的浪费生命，可谓是苦不堪言。一般可能想到的是cv大法，但是修改也是很痛苦的，因为经常会少改某些变量，在测试的时候又漏掉总是经常偷偷 fixed 也是一脸尴尬。所以我们决定使用可视化的方案来解决这些重复性的问题。 ### 需求分析如果我们简单的抽象一个CURD的代码大概主要逻辑应该如下（react hook版）： ```js //用于查询 const [searchParams, setSearchParams] = useState({}) //列表数据 const [tableList, setTableList] = useState([]) //查询函数 const loadData = useCallback(() => { service.search(searchParams).then(list => { setTableList(list) }) }, [searchParams]) //loadData 查询函数变化重新调用，因为依赖了 searchParams 所以查询参数变化就会重新查询 useEffect(() => { loadData() }, [loadData]) //... 其它 return (

{/* ... 变化的查询条件 */} {/* 将Search中数据set 到 searchParams 以触发查询 */} {/* setSearchParams({}) */}

{/* openModal() */} ... 以及其它功能

{/* 1. 将分页数据设置到 searchParams 中以分页查询 setSearchParams({...searchParams, pageNo, pageSize }) 2. 将选择的行保存下来用于如批量删除 */} { /* ... 变化的列 */ } {/* 是否确定删除？是: service.delete(row.id).then(() => loadData()) */} {/* 打开 modal 将当前行数据 row 传过去 openModal(row) */} ... 以及其它功能

{/* 将数据保存或更新 service.inserOrUpdate(data).then(() => loadData()) */}

{/*