快速上手 #

环境要求 #

• Java: 8+
• Maven: 3.6.0+
• NodeJs: 14+

搭建一个 Fastball 项目 #

使用 Maven Archetype 初始化模板项目 #

在 Terminal 中通过 Mavem Archetype 初始化项目, 记得修改 Maven 的 GAV:

# 初始化项目
mvn archetype:generate \
-DarchetypeGroupId=dev.fastball \
-DarchetypeArtifactId=fastball-ui-archetype \
-DarchetypeVersion=0.2.0 \
-DgroupId=com.example \
-DartifactId=example-project \
-Dversion=1.0-SNAPSHOT

# 进入项目目录
cd example-project

# 运行项目
mvn package spring-boot:run

初始化项目中会内置一个简单的表格示例, 并且配置了菜单, 用于展示, 默认可以通过 http://127.0.0.1:8080/ 访问. 点击菜单后我们应该能看到类似如下界面:

编写一个组件 #

我们以表单组件为例, 在相应 Package 下, 新建一个 Java Class 文件, 并且实现 dev.fastball.ui.components.form.Form<T> 接口, 泛型使用我们要提交的模型, 这里我们以初始化生成的 ShowCaseModel 做示例, 同时增加 @UIComponent 的注解, 用来声明这是一个界面组件.

示例代码如下:

@UIComponent
public class ShowCaseForm implements Form<ShowCaseModel> {}

保存之后, 我们就可以通过 Idea 插件中的预览功能, 来查看组件, 如下图:

关于更多的组件类型, 可以参见 组件列表.

为组件增加操作 #

这时一个表单组件已经完成了, 该组件具有模型相应的字段, 但是目前还没有任何数据操作能力, 仅有一个默认的重置按钮.

我们可以编写一个提交数据的接口, 用来接收表单传递的数据, 入参就是泛型对应的类型, 同时给该方法增加一个 @RecordAction 注解, 整体代码示例如下:

import dev.fastball.core.annotation.RecordAction;
import dev.fastball.core.annotation.UIComponent;
import dev.fastball.ui.components.form.Form;

@UIComponent
public class ShowCaseForm implements Form<ShowCaseModel> {

    @RecordAction(name = "提交")
    public void submit(ShowCaseModel data) {
        // do somethings, like save to DB
    }
}

这时重新编译之后, 我们就会发现表单增加了一个提交按钮, 表单内填写内容在点击按钮, 就会将表单内数据提交至我们刚写的 submit 方法中, 作为入参传递进来, 从而可以进行相应的操作.

关于操作的更多信息, 可以参见 操作(Action).

增加组件联动 #

这时默认生成的表格, 以及我们刚增加的表单还是两个独立的组件, 但是业务场景不可能以独立组件的形式存在, 所以我们需要给组件之间增加联动, .

我们就以刚增加的表单, 以弹窗的方式, 作为数据表格的新增表单使用来做示例, 代码其实也非常简单, 在数据表格的类上, 增加一个 @ViewActions, 类型设置为 Popup, 并且声明 @Popup 即可, 代码如下:

@UIComponent
// 这段代码的含义就是给当前组件增加操作, 而操作的类型是弹窗, 弹窗的组件是 ShowCaseForm.
@ViewActions(@ViewAction(key = "add", name = "新增", popup = @Popup(@RefComponent(ShowCaseForm.class))))
public class ShowCaseTable implements Table<ShowCaseModel> {
    @Override
    public DataResult<ShowCaseModel> loadData() {
        // return data;
    }
}

这时我们编译重新运行, 再次访问数据表格的菜单, 就会发现多了一个新增按钮, 点击之后弹窗内就是我们刚增加的表单, 点写完内容后提交就会触发表单的 submit 方法, 如果执行成功, 还会自动关闭弹窗同时刷新数据列表. 如下图:

关于联动的更多信息, 可以参见 联动.

其他 #

至此我们就完成了一个简单的功能, 上述示例也简单展示了 Fastball 的基本使用方式, 至于更多的组件以及使用方式, 可以查看相关扩展文档.

如果你还未阅读 简介 , 我们强烈推荐你在阅读其他文档之前, 先阅读一下.