Menu
Docs
Documentation versions (currently viewingVaadin 24)
V24
Vaadin 25 (prerelease)
Vaadin 24
Vaadin 23
Vaadin 14
Vaadin 10
Vaadin 8
Vaadin 7
Documentation translations (currently viewingChinese)
Chinese
Chinese
English
Finnish
German
Spanish
Search
Change to dark theme
此页面是从官方文档
http://vaadin.com/docs
进行的机器翻译。可能存在错误、不准确或误述的内容。Vaadin 不保证翻译的准确性、可靠性或时效性。
Dismiss banner
Docs
Expand top-level sections
Show sub-pages of 入门指南
入门指南
先决条件
Show sub-pages of 启动项目
启动项目
替代方案
导入项目
运行项目
构建项目
部署项目
下一步
Show sub-pages of 构建应用程序
构建应用程序
Show sub-pages of 视图与导航
视图与导航
添加视图
导航到视图
Show sub-pages of 将数据传递到视图
将数据传递到视图
路由参数
路由模板
查询参数
添加路由布局
Show sub-pages of 表单与数据
表单与数据
Show sub-pages of 添加表单
添加表单
字段与绑定
表单验证
加载与保存
对话框和抽屉
添加 Flyway
替换 H2
Show sub-pages of 业务逻辑
业务逻辑
添加一个服务
Show sub-pages of 安全
安全
添加登录
添加登出
保护视图
Protect Services
Show sub-pages of 深入探讨
深入探讨
Spring Boot
Show sub-pages of 架构
架构
设计
系统组件
概念层
Monoliths
Microservices
Show sub-pages of Project Structure
Project Structure
单模块项目
多模块项目
Show sub-pages of 表现层
表现层
Show sub-pages of 服务器推送
服务器推送
推送
线程
回调
Futures
Hilla Services
消费响应式流
Show sub-pages of 应用层
应用层
应用服务
Show sub-pages of 后台任务
后台任务
实现作业
触发作业
Show sub-pages of 用户界面交互
用户界面交互
回调
Futures
生成响应式流
Show sub-pages of 数据一致性
数据一致性
强一致性
Show sub-pages of 事务
事务
声明式事务
编程式事务
验证
乐观锁
悲观锁定
最终一致性
领域原语
Show sub-pages of 持久化
持久化
Show sub-pages of 存储库
存储库
JPA Repositories
jOOQ Repositories
Cookbook
Show sub-pages of AI 与 LLM
AI 与 LLM
Show sub-pages of 技术设置
技术设置
为您的 IDE 设置 API 密钥
快速入门指南
Hide sub-pages of Flow 参考
Flow 参考
什么是Flow?
Show sub-pages of 应用程序基础
应用程序基础
构建用户界面
事件处理
创建主视图
基本路由 & 导航
图像 & 图标
Styling
Show sub-pages of Routing & Navigation
Routing & Navigation
定义路由
在路由之间导航
菜单配置
路由参数
无需导航更新URL参数
导航生命周期
Router Layouts & Nested Router Targets
获取路由
获取已注册的路由
导航时更新页面标题
动态注册路由
Show sub-pages of 附加指南
附加指南
查询参数
路由模板
Show sub-pages of 创建UI
创建UI
基本功能
启用状态
键盘快捷键
Show sub-pages of Creating Components
Creating Components
单一元素
多个元素
使用API助手定义组件属性
扩展组件
使用事件
组件容器
生命周期回调
使用 Vaadin Mixin 接口
Show sub-pages of 集成 Web Components
集成 Web Components
创建Java API
调试
项目内组件
Web Components Intro
Show sub-pages of 元素 API
元素 API
属性 & 特性
监听用户事件
远程过程调用
使用Element API获取用户输入
动态样式
Show sub-pages of 拖放
拖放
拖拽源
放置目标
Show sub-pages of 模板
模板
基于模板
与 Binder 结合使用
子模板
添加服务器端组件
样式设置
检测组件映射
限制条件
Show sub-pages of Polymer模板(已弃用)
Polymer模板(已弃用)
使用模板 API 创建简单组件
模板与Binder的结合使用
动态向模板中添加服务器端组件
处理用户事件
绑定模型数据
使用模型Bean
使用模型编码器
从列表动态创建内容
使用父布局
Show sub-pages of 表单与数据绑定
表单与数据绑定
加载 & 保存到业务对象
将Bean绑定到表单
绑定数据到组件
创建一个具有值的组件
Show sub-pages of Security
Security
Vaadin Security Configurer
Show sub-pages of 高级安全主题
高级安全主题
安全架构
Vaadin的安全实践
常见漏洞
经常报告的问题
保护纯Java应用程序
导航访问控制
存储敏感数据
内容安全策略
启用安全性
Hide sub-pages of 测试
测试
Show sub-pages of UI单元测试
UI单元测试
入门
查询组件
UI快照
基于 Spring 的项目
基于 Quarkus 的项目
Show sub-pages of 端到端测试
端到端测试
入门指南
安装 WebDrivers
创建测试
使用页面对象的测试
低级别元素交互
截取 & 比较屏幕截图
高级测试方法
使测试可靠
行为驱动开发
使用 Maven 运行测试
在CI服务器上运行测试
在多个浏览器上运行测试
测试网格设置
使用 Playwright 进行测试
使用 Selenium 进行测试
基于浏览器的测试
Low-Level Element Interactions
Selenium 测试
使测试可靠
使用Maven运行测试
使用页面对象创建可维护的测试
入门指南
创建测试
在CI服务器上运行测试
在网格中于多个浏览器上运行测试
安装 WebDrivers
拍摄并比较屏幕截图
行为驱动开发
设置您自己的测试 Grid
高级测试概念
无浏览器测试
Screenshots in Browser-less Testing
入门指南
搜索组件
无浏览器的Spring Framework测试
Show sub-pages of 集成
集成
Hilla
React
Show sub-pages of CDI
CDI
Vaadin CDI 作用域
可观察的Vaadin事件
Vaadin 服务接口作为 CDI Bean
Show sub-pages of 嵌入
嵌入
Tutorial
应用程序属性
主题设置
配置Push
安全性
刷新时的状态保存
限制
Quarkus
OSGi
Apache Karaf
使用服务与Vaadin
Portlet Support
Inter-Portlet Communication
Multi-Module Portlet Project
创建 Vaadin Portlets
处理Portlet阶段
添加 Vaadin Portlet 模块至 Maven 多模块项目
附录 A - 地址簿示例项目演示
Show sub-pages of spring
spring
Spring Boot
Spring MVC
路由
作用域
Spring Events
OAuth2 认证
Show sub-pages of 配置
配置
Show sub-pages of 开发模式
开发模式
Node.js
npm/pnpm/bun
Show sub-pages of 开发工具
开发工具
Component Locator
開發工具插件支持
Hot Deploy & Live Reload
PWA
Web Push
Maven
Show sub-pages of 许可证
许可证
每日活跃用户
功能开关
Show sub-pages of 部署到生产环境
部署到生产环境
Servlet Container
Spring Boot
本地镜像编译
Show sub-pages of 云提供商
云提供商
Amazon Web Services
Azure
Google Cloud
Heroku
Docker 部署
反向代理
分布式部署架构
Show sub-pages of 高级主题
高级主题
应用程序生命周期
经典组件
加载指示器
使用DependencyFilter修改依赖项的加载方式
Service Init Listener
下载
History API
会话和UI监听器
自定义错误处理
自定义系统消息
刷新时保留状态
Servlet-Container Authentication
处理长时间运行的任务
Vaadin Executor
浏览器访问
CSS 加载顺序
服务器推送
服务端模态
自定义Instantiator
Web Storage API
服务器到客户端通信
文件上传
本地化
运行时修改 Bootstrap 页面
为 V8 升级自动化做准备
API Reference
Knowledge Base
Show sub-pages of Hilla 参考
Hilla 参考
教程
FAQ
Show sub-pages of Guides
Guides
Endpoints
响应式端点
客户端中间件
路由
数据网格
Show sub-pages of 表单
表单
将数据绑定到表单
加载 & 保存表单数据
验证用户输入
响应表单状态变化
将数据绑定到输入字段
绑定数组
表单中的图片字段
表单绑定
上传 & 下载
客户端数据缓存
样式
Show sub-pages of 安全性
安全性
简介
控制端点访问
使用 Spring Security 进行身份验证
访问认证数据
无状态认证
离线身份验证
最佳实践
测试
Show sub-pages of 部署到生产环境
部署到生产环境
生产构建
Servlet Container
Spring Boot
本机镜像编译
Show sub-pages of 云服务提供商
云服务提供商
Amazon Web Services
Azure
Google Cloud
Heroku
Troubleshooting
面向Java开发者的React
国际化(I18n)
Flow Integration
升级指南
Flow components in Hilla view
Show sub-pages of Reference
Reference
Gradle
React Router
TypeScript Generator
TypeScript 客户端
类型的可空性
类型转换
配置
Show sub-pages of Lit
Lit
Show sub-pages of 入门指南
入门指南
快速入门
基础教程
FAQ
Show sub-pages of Guides
Guides
应用程序架构
Routing & Navigation
端点
响应式端点
事件处理
状态管理
客户端中间件
Show sub-pages of 表单
表单
将数据绑定到表单
验证用户输入
响应表单状态变化
绑定数组
将数据绑定到输入字段
将数据绑定到自定义组件
表单中的图像字段
Form Binding
客户端数据缓存
样式
Show sub-pages of 安全性
安全性
Introduction
控制Endpoint访问
访问认证数据
基于角色的访问控制
无状态身份验证
离线认证
会话过期
常见漏洞
最佳实践
使用 Spring Security 进行身份验证
Show sub-pages of 部署到生产环境
部署到生产环境
生产构建
Servlet Container
Spring Boot
Native Image Compilation
Show sub-pages of 云服务提供商
云服务提供商
Amazon Web Services
Azure
Google Cloud
Heroku
Troubleshooting
升级早期 Hilla 版本
Show sub-pages of Components
Components
使用组件
创建组件
Integrating Components
类型定义
Show sub-pages of Reference
Reference
Connection Indicator
Gradle
TypeScript Client
TypeScript Generator
类型可空性
类型转换
配置
Show sub-pages of 工具
工具
Show sub-pages of Copilot
Copilot
国际化
Show sub-pages of Start
Start
可编辑视图
Show sub-pages of AppSec Kit
AppSec Kit
入门指南
Advanced Topics
Show sub-pages of Azure Cloud Kit
Azure Cloud Kit
自动扩展
Transport Layer Security
Multiple Environments
快速入门
Show sub-pages of Collaboration Kit
Collaboration Kit
概述
快速入门指南
Show sub-pages of Binder 与组件
Binder 与组件
Binder
头像组
消息列表
Show sub-pages of Collaboration Managers
Collaboration Managers
Presence Manager
消息管理器
表单管理器
Show sub-pages of Advanced
Advanced
Connection Context
Topic API
协作列表
外部Servlet
集群支持
Kubernetes Kit 会话复制
授权模式
生产环境
Show sub-pages of Kubernetes Kit
Kubernetes Kit
入门指南
滚动更新
会话复制
会话复制调试工具
配置
Show sub-pages of Observability Kit
Observability Kit
Configuration
Customization
Show sub-pages of Integrations
Integrations
Datadog
Grafana
Jaeger & Prometheus
New Relic
参考
Show sub-pages of SSO Kit
SSO Kit
入门指南
主题
Show sub-pages of 集成
集成
Azure Active Directory
Keycloak
Okta
Show sub-pages of Swing Kit
Swing Kit
开始使用
添加视图
跨通信
异常处理
Show sub-pages of AI Form Filler
AI Form Filler
开始使用
AI Models
API Reference
Advanced Example
最佳实践 & 限制
Show sub-pages of Design System Publisher
Design System Publisher
概述
入门指南
开发服务器
网站内容
网站定制
自定义主题
Configuration
生产环境设置
更新
UI 示例
故障排除
Show sub-pages of Multiplatform Runtime
Multiplatform Runtime
Overview
Show sub-pages of 逐步指南
逐步指南
为Vaadin 7配置pom.xml
为 Vaadin 8 配置 pom.xml
移除旧版Servlet
转换旧版UI
带有MPR & Flow的Vaadin旧版CDI应用程序
使用 Navigator 进行导航
不使用其他框架转换UI
转换UI参数
将传统组件添加到Flow布局
Show sub-pages of 配置 & 高级主题
配置 & 高级主题
在Flow布局中添加传统组件
MPR中的旧版主题
自定义 Widget Set & MPR
设置生产模式
Push & MPR
使用 MPR 管理会话
自定义传统UI类
V7 & V14+ CDI Applications Side-by-Side
Show sub-pages of Designer
Designer
概述
Show sub-pages of Tutorial
Tutorial
快速入门
构建主视图
构建联系人表单
运行应用程序
将主视图连接到Java
将联系表单连接到Java
总结
Show sub-pages of 使用 Designer
使用 Designer
Designing
连接到Java
预览
布局视图
主题设置
常见问题
Show sub-pages of 现代化工具包
现代化工具包
Dragonfly Transpiler
Classic Components
功能包
Vaadin Modernization Toolkit Analyzer for Eclipse
Show sub-pages of 控制中心
控制中心
Show sub-pages of 入门
入门
在本地环境中入门
配置 安装
自动 DNS 记录和证书
Docker Desktop 上的 Kubernetes
Azure 上的 Kubernetes
在 Digital Ocean 上部署 Kubernetes
卸载
Show sub-pages of 应用程序部署
应用程序部署
主机名指南
本地开发模式
安全注意事项
Show sub-pages of 身份管理
身份管理
登录和登出
本地化
Show sub-pages of 数据库
数据库
Flyway 迁移
备份
故障排查
Show sub-pages of 应用设计
应用设计
颜色
排版
大小与间距
响应性
升级指南
Upgrading from Vaadin 23 (removed)
Show sub-pages of 贡献
贡献
编辑器设置
Pull Requests
创建测试
Show sub-pages of 文档
文档
文档类型
Vale
风格指南
单词列表
贡献到 Vaadin 项目
Show sub-pages of components
components
自动 CRUD
Auto Grid
Auto Form
Figma Libraries
Accordion
App Layout
Avatar
Board
Button
CRUD
Card
Show sub-pages of Charts
Charts
为 Vaadin Flow 安装 Charts
基本使用
图表类型
图表样式
图表数据
从早期版本迁移
时间轴
甘特图
导出图表为SVG
使用 React
在 Lit 中的使用
Elements API
Figma Library
Combo Box
Confirm Dialog
Context Menu
Cookie Consent
Custom Field
Date Time Picker
Dialog
Email Field
Grid
Grid Pro
Horizontal Layout
List Box
Markdown
Menu Bar
Message Input
Multi-Select Combo Box
Number Field
Password Field
Popover
Rich Text Editor
Scroller
Select
Split Layout
Spreadsheet
Tree Grid
Vertical Layout
Virtual List
Show sub-pages of dashboard
dashboard
样式
Show sub-pages of tooltip
tooltip
Styling
Show sub-pages of upload
upload
Styling
文件处理
主-明细布局
侧边导航
单选按钮
图标
地图
基本布局
复选框
文本区域
文本字段
日期选择器
时间选择器
标签页
消息列表
登录
表单布局
详情
进度条
通知(Notification)
Show sub-pages of styling
styling
Show sub-pages of Lumo
Lumo
Show sub-pages of Lumo Style Properties
Lumo Style Properties
颜色
排版
大小 & 间距
形状
Elevation
Interaction
Lumo变体
实用工具类
应用主题
为其他UI元素设置样式
Show sub-pages of