前言
身为前端开发，绝大多数都在curd 做重复的增删改查页面，如果简化这些重复的东西，抽象起来去描述，可以怎么去设计呢？
设计
可以通过一份配置领域模型 DSL，来描述一个系统。
文字描述
开发一个后台管理系统，简化一下大部分也就是一个菜单，一个内容区域显示内容，文字描述一下
系统名
系统描述
首页
菜单
内容展示区域
针对菜单再进行细化描述一下
菜单
页面1
页面1名称
页面1地址
页面2
页面2名称
页面2地址
...
我们做过这么多后台管理系统，都知道页面大部分是【带搜索的列表页】【图表页】【报告页】等，一些特殊的页面此处就称为【自定义页面】，那么内容展示区域细化描述一下
内容展示区域
带搜索的列表页
图表页
报告页
...
自定义页面
如果再细化一下页面的描述，用【带搜索的列表页】举例，搜索框、表格、页码
列表页
接口列表
列表查询接口
列表新增接口
列表更新接口
列表删除接口
搜索表单
搜索字段1
参数名
什么形式搜索（输入框、下拉框、日期、单选框等）
搜索字段2
参数名
什么形式搜索（输入框、下拉框、日期、单选框等）
...
表格
展示列1
名称
参数名
展示列2
名称
参数名
...
操作列
更新项
更新弹窗
更新接口
删除项
删除确认弹出层
删除接口
但其实大多数搜索条件的字段和表格列的字段是一致，让接口名遵循 RESRFUL 规范，对上面的描述再进行抽离一下，可以如下
接口名
接口字段映射
参数1
字段类型
字段名称
表格配置
搜索配置
参数2
字段类型
字段名称
表格配置
搜索配置
...
表格配置
操作列
更新
删除项
数据结构
将上面一大堆的文字描述转成数据结构 DSL，那么数据结构可以如下
module.exports = {
name: 'OA管理系统',
desc: '这是一个后台管理系统',
homePage: '/index', // 首页
// 菜单
menu: [{
key: 'department',
name: '部门管理',
type: 'schema', // schema 配置页面
schemaConfig: {
api: '/api/oa/dept', // API （遵循 RESRFUL 规范）
// schema 部分遵循 json-schema 规范
schema: {
type: 'object',
properties: {
dept_id: {
type: 'string',
label: '部门ID',
tableOption: { // 表格配置
width: 200
},
searchOption: { // 搜索配置
comType: 'input', // 输入框
}
},
dept_name: {
type: 'string',
label: '部门名称',
tableOption: {
width: 200
},
searchOption: {
comType: 'dynamicSelect', // 下拉框
api: '/api/oa/dept_enum/list'
}
},
dept_num: {
type: 'number',
label: '部门人员',
tableOption: {
width: 200,
}
},
dept_desc: {
type: 'number',
label: '部门描述',
tableOption: {
width: 200,
}
},
create_time: {
type: 'string',
label: '创建时间',
tableOption: {},
searchOption: {
comType: 'dateRange' // 日期范围
}
}
}
},
tableConfig: {
rowButtons: [
{
label: '修改',
eventKey: 'showComponent',
}, {
label: '删除',
eventKey: 'remove',
}
]
}
}
}, {
key: 'staff',
name: '人员管理',
type: 'custom', // 自定义页面
customConfig: {
path: '/staff',
}
}, {
key: 'hire',
name: '招聘管理',
type: 'iframe', // iframe页面
iframeConfig: {
path: 'https://www.baidu.com',
}
}]
}
引用： 抖音“哲玄前端”《大前端全栈实践》
