如何基于Vert.X实现嵌套HTML页面操作后刷新父页面导航栏

一、前端交互核心逻辑 #

由于嵌套页面通过<object>嵌入，只要与父页面同域，就可以直接通过parent对象访问父页面的DOM或预定义方法：

1. 父页面定义刷新导航栏的函数

// 父页面JS代码
function refreshItemList() {
  const navContainer = document.querySelector('.item_list');
  // 发起请求获取最新导航数据并替换DOM
  fetch('/api/item-list')
    .then(res => res.text())
    .then(html => {
      navContainer.innerHTML = html;
    });
}

2. 嵌套页面触发父页面刷新
   在嵌套页面的新增/删除按钮点击事件中，先完成业务请求，再调用父页面的刷新函数：

// 嵌套页面JS代码（删除按钮示例）
document.getElementById('delete-btn').addEventListener('click', () => {
  const formData = new FormData(document.getElementById('delete-form'));
  fetch('/api/delete-item', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(data => {
    if (data.success) {
      // 调用父页面的刷新方法
      parent.refreshItemList();
      // 可选：更新嵌套页面自身内容或关闭弹窗
    }
  });
});

如果是跨域场景，可改用postMessage通信，但同域下直接调用更简洁。

二、基于Vert.X的后端配合实现 #

Vert.X主要负责提供导航数据接口、处理业务逻辑，确保数据更新后前端能获取最新内容：

1. 配置路由 #

Router router = Router.router(vertx);

// 获取最新导航列表接口
router.get("/api/item-list").handler(ctx -> {
  // 从数据库/缓存获取最新项目列表
  List<Item> itemList = itemService.getAllItems();
  
  // 使用Vert.X模板引擎渲染导航栏HTML片段（以Handlebars为例）
  TemplateEngine engine = HandlebarsTemplateEngine.create(vertx);
  engine.render(Json.obj("items", itemList), "templates/item-nav.hbs", (err, html) -> {
    if (err != null) {
      ctx.fail(err);
      return;
    }
    ctx.response()
      .putHeader("Content-Type", "text/html")
      .end(html);
  });
});

// 处理删除项目接口
router.post("/api/delete-item").handler(ctx -> {
  String itemKey = ctx.request().getParam("key");
  itemService.deleteItem(itemKey)
    .onSuccess(v -> {
      ctx.response()
        .putHeader("Content-Type", "application/json")
        .end(Json.obj("success", true).encode());
    })
    .onFailure(err -> {
      ctx.response()
        .setStatusCode(500)
        .putHeader("Content-Type", "application/json")
        .end(Json.obj("success", false, "msg", err.getMessage()).encode());
    });
});

// 新增项目接口逻辑类似，此处省略

2. 导航栏模板（item-nav.hbs） #

<ul class="nav-items">
  {{#each items}}
    <li><a href="detailsPage?key={{this.key}}">{{this.name}}</a></li>
  {{/each}}
</ul>

3. 额外注意点 #

• 确保父页面与嵌套页面域名、端口一致，避免跨域限制；
• 可结合Vert.X的缓存机制（如Caffeine）优化导航列表的获取性能；
• 若需要实时同步多用户操作，可基于Vert.X EventBus实现WebSocket推送，但简单场景下AJAX刷新已足够。

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