本项目是基于 react 和 antd 的 CRUD 应用。
项目使用官方脚手架 create-react-app 搭建,相关指令同理。
本项目详细说明参看博客。
主要目录结构:
|-- api
| |-- sqlData.js # 操作 sqlData 的 ajax 方法
|-- components
| |-- App.jsx # 页面
| |-- Content.jsx # 页面主体内容区
| |-- Factory.jsx # 表单组件工厂
| |-- FormModal.jsx # 弹出的增加或编辑的表单组件
| |-- Search.jsx # 搜索组件
|-- libs
| |-- ajax.js # ajax 实例及公共方法
| |-- util.js # 工具方法
|-- store
| |-- sqlConfig.js # 数据库表单配置项
|-- index.js # 入口文件
|-- style.css # 样式文件
主要组件结构:
|-- App
| |-- Menu # 导航菜单
| |-- Content # 主要内容区
| |-- Search # 搜索组件
| |-- Factory # 表单工厂
| |-- ButtonGroup # 操作按钮群
| |-- Table # 表格组件
| |-- Pagination # 分页组件
| |-- FormModal # 弹出的编辑表单
| |-- Factory # 表单工厂
组件结构图解: