5.5. Frontend UI

Studio 可以生成 Frontend UI 模块和组件。使用 @cuba-platform/front-generator npm 包生成代码。

5.5.1. 创建 Frontend UI 模块

在 CUBA 项目树右键点击 Project > Modules 然后选择 Manage modules > Create ‘front’ module。

Studio 会在 modules/front/generation 目录开始安装 Frontend Generator ，这里需要花费一点时间。然后您会看到一个预选项界面。根据您将要使用的框架选择合适的预选项。也可以展开 Advanced 部分选择使用特定版本的 Frontend Generator 。

生成的 Frontend UI 应用程序（前端客户端）会在 modules/front 文件夹。

如需删除 front 模块，右键点击 Project > Modules 并选择 Manage modules > Remove ‘front’ module。

5.5.2. 基于 React 的 Frontend UI 组件

如果您使用 React 模板创建了 front 模块，则可以添加 React 组件。在 CUBA 项目树展开 Data Model，右键点击一个实体，选择 New > Frontend Component。

有下列选项：

• Blank component - 空组件

• Entity cards - 实体卡片 - 展示实体列表的组件

• Entity management - 实体管理 - 展示并且可编辑实体的组件

5.5.2.1. 空组件

我们有一个空的 React 基于类的组件。如果您需要一个“干净状态”的组件用来做自定义，则可以使用空组件。

点击 Next 之后，会显示下面的选项界面。

• Directory - 组件生成的目录。

• Add to menu - 为生成的组件设置导航菜单。

• Component class name - 组件类名。

5.5.2.2. 实体卡片

以卡片的形式展示实体的只读列表。

点击 Next 之后，会显示下面的选项界面。

• Directory - 组件生成的目录。

• Add to menu - 为生成的组件设置导航菜单。

• Entity - 显示在该组件的实体。

• Component class name - 组件类名。

• Entity view - 该组件使用的 视图 。

5.5.2.3. 实体管理

指定实体的 CRUD（列表+编辑）界面。如需浏览、添加、删除、编辑实体，则使用该组件。选择该选项可以生成 3 个组件：

• Edit component - 用户可以编辑实体实例

• List component - 用户可以查看实体列表，并可以为选中的实体打开 Edit component。

• CRUD component - 根据路由是否带有 entityId 参数决定渲染成 List component 或 Edit component。

点击 Next 之后，会显示下面的选项界面。

• Directory - 组件生成的目录。

• Add to menu - 为生成的组件设置导航菜单。

• Entity - 该组件的实体。

• CRUD component class name - CRUD component 类名

• List type - list component 可以用下面的类型（我们称之为列表类型）：

  • list

    

  • cards

    

  • table

    

• List component class - List component 类名。

• List view - List component 用到的 视图 。

• Edit component class name - Edit component 类名。

• Edit view - Edit component 用到的 视图 。