数据表

Collection

Collection 是所有种类数据的集合,中文翻译为「数据表」,如订单、商品、用户、评论等都是 Collection。不同 Collection 通过 name 区分,如:

1// 订单
2{
3  name: 'orders',
4}
5// 商品
6{
7  name: 'products',
8}
9// 用户
10{
11  name: 'users',
12}
13// 评论
14{
15  name: 'comments',
16}

Collection Field

每个 Collection 都有若干 Fields。

1// Collection 配置
2{
3  name: 'users',
4  fields: [
5    { type: 'string', name: 'name' },
6    { type: 'integer', name: 'age' },
7    // 其他字段
8  ],
9}
10// 示例数据
11[
12  {
13    name: '张三',
14    age: 20,
15  },
16  {
17    name: '李四',
18    age: 18,
19  }
20];

在 Tachybase 中 Collection Field 的构成包括:Field Component 和 Field Interface

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,如:

1// 邮箱字段,用 Input 组件展示,使用 email 校验规则
2{
3  type: 'string',
4  name: 'email',
5  uiSchema: {
6    'x-component': 'Input',
7    'x-component-props': { size: 'large' },
8    'x-validator': 'email',
9    'x-pattern': 'editable', // 可编辑状态,还有 readonly 不可编辑状态、read-pretty 阅读态
10  },
11}
12
13// 数据示例
14{
15  email: '[email protected]',
16}
17
18// 组件示例
19<Input name={'email'} size={'large'} value={'[email protected]'} />

uiSchema 用于配置字段展示在界面上的组件,每个字段组件都会对应一个 value,包括几个维度的配置:

  • 字段的组件
  • 组件的参数
  • 字段的校验规则
  • 字段的模式(editable、readonly、read-pretty)
  • 字段的默认值
  • 其他

Tachybase 内置的字段组件有:

  • Input
  • InputNumber
  • Select
  • Radio
  • Checkbox
  • ...

Field Interface

有了 Field Type 和 Field Component 就可以自由组合出若干字段,我们将这种组合之后的模板称之为 Field Interface,如:

1// 邮箱字段 string + input,email 校验规则
2{
3  type: 'string',
4  name: 'email',
5  uiSchema: {
6    'x-component': 'Input',
7    'x-component-props': {},
8    'x-validator': 'email',
9  },
10}
11
12// 手机字段 string + input,phone 校验规则
13{
14  type: 'string',
15  name: 'phone',
16  uiSchema: {
17    'x-component': 'Input',
18    'x-component-props': {},
19    'x-validator': 'phone',
20  },
21}

上面 email 和 phone 每次都需要配置完整的 uiSchema 非常繁琐,为了简化配置,又引申出另一个概念 Field interface,可以将一些参数模板化,如:

1// email 字段的模板
2interface email {
3  type: 'string';
4  uiSchema: {
5    'x-component': 'Input',
6    'x-component-props': {},
7    'x-validator': 'email',
8  };
9}
10
11// phone 字段的模板
12interface phone {
13  type: 'string';
14  uiSchema: {
15    'x-component': 'Input',
16    'x-component-props': {},
17    'x-validator': 'phone',
18  };
19}
20
21// 简化之后的字段配置
22// email
23{
24  interface: 'email',
25  name: 'email',
26}
27
28// phone
29{
30  interface: 'phone',
31  name: 'phone',
32}