Vaadin 24 中正确使用 $server 调用 Java 方法的完整指南-js教程-PHP中文网

Vaadin 24 中正确使用 $server 调用 Java 方法的完整指南

在 Vaadin 24 中，element.$server 仅对绑定到服务端组件且声明了 @ClientCallable 方法的 DOM 元素有效；直接操作任意元素或未正确关联组件将导致 $server is undefined 错误。

在 vaadin 24 中，`element.$server` 仅对绑定到服务端组件且声明了 `@clientcallable` 方法的 dom 元素有效；直接操作任意元素或未正确关联组件将导致 `$server is undefined` 错误。

要成功从 JavaScript 调用 Java 方法，必须满足三个核心前提：

服务端组件需显式暴露方法：使用 @ClientCallable 注解标记可被前端调用的 public 方法；
前端必须持有对应组件的 DOM 元素引用（即该元素由服务端组件渲染，且其 getElement() 可被传递至 JS）；
调用必须通过 await element.$server.methodName(...) 形式进行，因为所有 @ClientCallable 方法均返回 Promise。

以下是一个可直接运行的完整示例（基于 Vaadin 24.3+）：

✅ 服务端代码（MainView.java）：

@Route("demo")
@JavaScript("./script.js") // 确保路径正确，文件位于 /frontend/script.js
public class MainView extends VerticalLayout {

    public MainView() {
        Button greetBtn = new Button("调用 Java 方法", e -> {
            // 将当前视图的 DOM 元素传给 JS，并附带参数
            getElement().executeJs("window.greet($0, $1)", "Vaadin 用户", getElement());
        });
        add(greetBtn);
    }

    @ClientCallable
    public String getGreeting(String name) {
        System.out.println("Java 端收到调用，name = " + name);
        return "欢迎，" + name + "！当前时间：" + LocalDateTime.now();
    }
}

✅ 前端脚本（/frontend/script.js）：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

// 必须声明为 window 属性，确保全局可访问
window.greet = async function(name, element) {
    try {
        // ✅ 正确：element 来自服务端组件，且已声明 @ClientCallable 方法
        const result = await element.$server.getGreeting(name);
        console.log("✅ 前端收到响应：", result);
        alert(result);
    } catch (error) {
        console.error("❌ 调用失败：", error);
        alert("Java 方法调用失败：" + error.message);
    }
};

⚠️ 关键注意事项：

❌ document.getElementById(...) 或 querySelector(...) 获取的原生 DOM 元素不会自动拥有 $server —— 它们未与服务端组件绑定；
✅ 必须通过 component.getElement()（如 new Button(...).getElement() 或 this.getElement() 在视图中）获取元素，并确保该组件类中定义了 @ClientCallable 方法；
✅ @ClientCallable 方法必须是 public、非静态、非 void（若需无返回值，可返回 void，但 JS 端仍需 await）；
✅ 若 JS 文件通过 @JavaScript 引入，请确认路径相对于 /frontend，且构建时未被忽略（检查 webpack.config.js 或默认配置）；
✅ 浏览器控制台报错 Cannot read properties of undefined (reading '$server') 时，请优先检查：① 方法是否加了 @ClientCallable；② 传入 JS 的 element 是否确实来自服务端组件。

? 进阶提示：若需在任意 DOM 元素上触发调用（如页面级按钮），可将服务端组件的 getElement() 提前注入全局变量（如 UI.getCurrent().getPage().executeJs("window.mainViewElement = $0", this.getElement())），再在 JS 中复用 —— 但本质仍是依赖已绑定的服务端组件实例。

遵循以上规范，$server 将稳定可用，实现安全、类型友好、响应式的客户端–服务端 RPC 通信。