Vaadin框架通过$server对象打通了前端模板与后端Java逻辑，开发者可以在模板中直接调用标注了@ClientCallable的方法。合理使用这一机制，能避免大量冗余的REST接口与事件绑定代码。
什么是$server对象
在Vaadin的Lit模板或旧版HTML模板中，$server是一个自动注入的代理对象。它指向当前视图或模板对应的Java类实例，用于调用被@ClientCallable注解标记的方法。注意这里提到的<input>等原生标签与$server无关，仅是前端展示控件。
后端方法如何暴露
只有使用@ClientCallable标注的public方法才能被前端通过$server调用。方法参数应为可序列化的简单类型，例如String、int、boolean等。
import com.vaadin.flow.component.Template;
import com.vaadin.flow.templatemodel.ClientCallable;
public class UserView extends Template {
// 可被前端$server调用的方法
@ClientCallable
public void saveUserName(String name) {
System.out.println("收到前端用户名：" + name);
// 这里写业务逻辑，比如存入数据库
}
}
前端模板中的调用方式
在Lit模板里，可以通过事件绑定直接访问$server。下面示例展示点击按钮时调用后端saveUserName方法。
<!-- Lit模板示例 -->
<button @click="${e => $server.saveUserName('张三')}">保存</button>
如果是旧版HTML模板，写法如下：
<!-- HTML模板示例 -->
<button on-click="$server.saveUserName('李四')">保存</button>
参数传递与类型匹配
前端传入的参数必须与后端方法签名一致。若后端需要int，前端就不要传字符串。复杂对象建议拆分为基本字段或使用中间DTO。
| 后端参数类型 | 前端传值示例 |
|---|---|
| String | 'hello' |
| int | 10 |
| boolean | true |
常见错误与排查
- 忘记加@ClientCallable注解，导致前端报方法不存在。
- 方法非public，代理无法访问。
- 参数类型不匹配，控制台出现序列化错误。
- 在模板中误将$server写成server，丢失了Vaadin的绑定前缀。
小结
掌握Vaadin中$server的正确调用，核心在于后端用@ClientCallable暴露方法、前端通过$server前缀触发、并保证参数类型一致。遵循这些实践，前后端通信会更简洁且易于维护。