mirror of
https://github.com/nocobase/nocobase
synced 2024-11-15 23:46:02 +00:00
3.6 KiB
3.6 KiB
核心概念
Collection
Collection 是所有种类数据的集合,中文翻译为「数据表」,如订单、商品、用户、评论等都是 Collection。不同 Collection 通过 name 区分,如:
// 订单
{
name: 'orders',
}
// 商品
{
name: 'products',
}
// 用户
{
name: 'users',
}
// 评论
{
name: 'comments',
}
Collection Field
每个 Collection 都有若干 Fields。
// Collection 配置
{
name: 'users',
fields: [
{ type: 'string', name: 'name' },
{ type: 'integer', name: 'age' },
// 其他字段
],
}
// 示例数据
[
{
name: '张三',
age: 20,
},
{
name: '李四',
age: 18,
}
];
在 NocoBase 中 Collection Field 的构成包括:
Field Type
不同字段通过 name 区分,type 表示字段的数据类型,分为 Attribute Type 和 Association Type,如:
属性 - Attribute Type
- string
- text
- date
- boolean
- time
- float
- json
- location
- password
- virtual
- ...
关系 - Association Type
- hasOne
- hasMany
- belongsTo
- belongsToMany
- ...
Field Component
字段有了数据类型,字段值的 IO 没问题了,但是还不够,如果需要将字段展示在界面上,还需要另一个维度的配置 —— uiSchema
,如:
// 邮箱字段,用 Input 组件展示,使用 email 校验规则
{
type: 'string',
name: 'email',
uiSchema: {
'x-component': 'Input',
'x-component-props': { size: 'large' },
'x-validator': 'email',
'x-pattern': 'editable', // 可编辑状态,还有 readonly 不可编辑状态、read-pretty 阅读态
},
}
// 数据示例
{
email: 'admin@nocobase.com',
}
// 组件示例
<Input name={'email'} size={'large'} value={'admin@nocobase.com'} />
uiSchema 用于配置字段展示在界面上的组件,每个字段组件都会对应一个 value,包括几个维护的配置:
- 字段的组件
- 组件的参数
- 字段的校验规则
- 字段的模式(editable、readonly、read-pretty)
- 字段的默认值
- 其他
NocoBase 内置的字段组件有:
- Input
- InputNumber
- Select
- Radio
- Checkbox
- ...
Field Interface
有了 Field Type 和 Field Component 就可以自由组合出若干字段,我们将这种组合之后的模板称之为 Field Interface,如:
// 邮箱字段 string + input,email 校验规则
{
type: 'string',
name: 'email',
uiSchema: {
'x-component': 'Input',
'x-component-props': {},
'x-validator': 'email',
},
}
// 手机字段 string + input,phone 校验规则
{
type: 'string',
name: 'phone',
uiSchema: {
'x-component': 'Input',
'x-component-props': {},
'x-validator': 'phone',
},
}
上面 email 和 phone 每次都需要配置完整的 uiSchema 非常繁琐,为了简化配置,又引申出另一个概念 Field interface,可以将一些参数模板化,如:
// email 字段的模板
interface email {
type: 'string';
uiSchema: {
'x-component': 'Input',
'x-component-props': {},
'x-validator': 'email',
};
}
// phone 字段的模板
interface phone {
type: 'string';
uiSchema: {
'x-component': 'Input',
'x-component-props': {},
'x-validator': 'phone',
};
}
// 简化之后的字段配置
// email
{
interface: 'email',
name: 'email',
}
// phone
{
interface: 'phone',
name: 'phone',
}