Vaadin 24 UI嵌入网页方案求助：原Vaadin 8嵌入方法失效

Vaadin 24 基于 Jakarta EE 和 Lit 组件体系，不再使用旧版的 Bootstrap JS，以下是两种可行的嵌入方案：

方案一：手动渲染 Lit 组件（适合单个组件嵌入） #

1. 后端创建带可调用方法的 Vaadin 视图，用于提供组件数据或逻辑：

   @Route(value = "embedded-comp", layout = RootLayout.class)
   public class EmbeddedCompView extends VerticalLayout {
       public EmbeddedCompView() {
           // 示例：创建一个带初始数据的表格
           Grid<User> userGrid = new Grid<>(User.class);
           userGrid.setItems(new User("张三"), new User("李四"));
           add(userGrid);
       }
   
       @ClientCallable
       public JsonArray getUserData() {
           // 返回组件需要的数据，供前端调用
           JsonArray arr = Json.createArray();
           arr.add(Json.createObject().put("name", "张三"));
           arr.add(Json.createObject().put("name", "李四"));
           return arr;
       }
   }
   

2. Thymeleaf 模板中通过前端代码加载并渲染组件：

   <div id="vaadin-comp-container"></div>
   
   <script type="module">
       import { render } from 'lit';
       import '@vaadin/grid';
       import { Vaadin } from '@vaadin/common-frontend/vaadin.js';
   
       // 初始化Vaadin客户端环境
       Vaadin.init();
   
       // 获取容器并渲染Vaadin表格组件
       const container = document.getElementById('vaadin-comp-container');
       render('<vaadin-grid id="user-grid"></vaadin-grid>', container);
   
       // 从后端拉取数据并绑定到组件
       const grid = document.getElementById('user-grid');
       fetch('/embedded-comp/callable/getUserData')
           .then(res => res.json())
           .then(data => {
               grid.items = data;
           });
   </script>
   

   注意：需确保项目 package.json 中已引入对应组件依赖（如 "@vaadin/grid": "^24.x.x"）。

方案二：嵌入独立 Vaadin 视图（推荐，适合复杂组件集合） #

1. 创建无布局的独立 Vaadin 视图：

   @Route(value = "standalone-view")
   @NoLayout
   public class StandaloneComponentView extends VerticalLayout {
       public StandaloneComponentView() {
           TextField input = new TextField("输入内容");
           Button submitBtn = new Button("提交", e -> Notification.show("你输入了：" + input.getValue()));
           add(input, submitBtn);
           setPadding(true);
           setSpacing(true);
       }
   }
   

2. 在 Thymeleaf 模板中通过 iframe 嵌入该视图：

   <iframe src="/standalone-view" 
           width="100%" 
           height="150px" 
           frameborder="0"
           title="嵌入的Vaadin组件"></iframe>
   

   这种方式无需手动处理组件渲染，Vaadin 会自动管理视图的生命周期和交互逻辑。

额外注意点 #

• 确保 Thymeleaf 页面与 Vaadin 应用共享同一会话，避免状态或权限异常。
• 若需在 Thymeleaf 和 Vaadin 组件间传递数据，可通过 URL 参数、会话存储或后端接口实现。
• 复杂场景下可将 Vaadin 组件打包为独立 Web Component，直接在 Thymeleaf 中当作普通 HTML 标签使用。

内容的提问来源于stack exchange，提问作者ropo