nocobase/docs/en-US/development/server/collections/index.md
chenos 98259e88a1
feat: update docs (#1006)
* feat: update docs

* feat: update docs

* feat: update docs
2022-11-02 11:33:07 +08:00

194 lines
3.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 核心概念
## Collection
Collection 是所有种类数据的集合,中文翻译为「数据表」,如订单、商品、用户、评论等都是 Collection不同 Collection 通过 name 区分,如:
```ts
// 订单
{
name: 'orders',
}
// 商品
{
name: 'products',
}
// 用户
{
name: 'users',
}
// 评论
{
name: 'comments',
}
```
## Collection Field
每个 Collection 都有若干 Fields。
```ts
// Collection 配置
{
name: 'users',
fields: [
{ type: 'string', name: 'name' },
{ type: 'integer', name: 'age' },
// 其他字段
],
}
// 示例数据
[
{
name: '张三',
age: 20,
},
{
name: '李四',
age: 18,
}
];
```
在 NocoBase 中 Collection Field 的构成包括:
<img src="./collection-field.svg" />
### 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`,如:
```tsx | pure
// 邮箱字段,用 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
- 字段的默认值
- 其他
[更多信息查看 UI Schema 章节](/development/client/ui-schema-designer/what-is-ui-schema)。
NocoBase 内置的字段组件有:
- Input
- InputNumber
- Select
- Radio
- Checkbox
- ...
### Field Interface
有了 Field Type 和 Field Component 就可以自由组合出若干字段,我们将这种组合之后的模板称之为 Field Interface
```ts
// 邮箱字段 string + inputemail 校验规则
{
type: 'string',
name: 'email',
uiSchema: {
'x-component': 'Input',
'x-component-props': {},
'x-validator': 'email',
},
}
// 手机字段 string + inputphone 校验规则
{
type: 'string',
name: 'phone',
uiSchema: {
'x-component': 'Input',
'x-component-props': {},
'x-validator': 'phone',
},
}
```
上面 email 和 phone 每次都需要配置完整的 uiSchema 非常繁琐,为了简化配置,又引申出另一个概念 Field interface可以将一些参数模板化
```ts
// 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',
}
```
[更多 Field Interface 点此查看](https://github.com/nocobase/nocobase/tree/main/packages/core/client/src/collection-manager/interfaces)