Alfresco Share站点仪表板多Dashlet复用API请求结果方案咨询

当然可以实现只调用一次API就把数据共享给三个Dashlet！你遇到的Surf根对象不可变的问题确实常见，下面给你几个靠谱的实现方案：

方案1：使用Surf的Shared Model #

Surf其实提供了**共享模型（Shared Model）**机制，允许在页面级别共享数据，所有组件（Dashlet）都能访问。步骤如下：

1. 创建一个页面级别的WebScript（比如dashboard-data.get.js），专门负责调用REST API获取数据，然后把数据存入model.shared对象：

   // dashboard-data.get.js
   var connector = remote.connect("alfresco");
   var response = connector.get("/api/your-endpoint");
   if (response.status == 200) {
       var data = JSON.parse(response);
       // 存入共享模型，所有Dashlet都能访问
       model.shared.dashboardSharedData = data;
   } else {
       model.shared.dashboardSharedData = {}; // 处理错误情况
   }
   

2. 在你的站点仪表板页面配置中，把这个WebScript设为页面前置处理器（preprocessor），确保它在所有Dashlet之前执行。
3. 然后在三个Dashlet的WebScript（webscript1/2/3.get.js）里直接从共享模型取数据：

   // webscript1.get.js
   var sharedData = model.shared.dashboardSharedData;
   // 用sharedData渲染你的视图
   model.data = sharedData;
   

   这样三个Dashlet就不用各自调用API了，直接复用共享模型里的数据。

方案2：创建一个父WebScript作为数据源 #

另一种方式是把数据获取逻辑封装成一个独立的WebScript，然后三个Dashlet通过remote.call调用这个本地WebScript，而不是直接调用外部API：

1. 先写一个获取数据的WebScript（比如shared-data.get.js）：

   // shared-data.get.js
   var connector = remote.connect("alfresco");
   var response = connector.get("/api/your-endpoint");
   status.code = response.status;
   status.message = response.message;
   status.redirect = response.redirect;
   if (response.status == 200) {
       var data = JSON.parse(response);
       model.data = data;
   }
   

2. 在三个Dashlet的WebScript里调用这个本地WebScript，而不是直接调用外部API：

   // webscript1.get.js
   var response = remote.call("/your-webscript-path/shared-data");
   if (response.status == 200) {
       var sharedData = JSON.parse(response);
       model.data = sharedData;
   }
   

   这里可以结合Surf的缓存机制，给shared-data.get.js配置缓存，这样多次调用本地WebScript也不会重复请求外部API，缓存会返回之前的结果。

方案3：客户端层面共享数据 #

如果更倾向于前端处理，可以在页面加载时用JavaScript先获取一次数据，存在全局变量里，然后三个Dashlet的前端脚本直接读取这个全局变量：

1. 在仪表板的页面模板里添加一个脚本，提前获取数据：

   <script>
       // 页面加载时获取数据
       window.dashboardSharedData = {};
       fetch("/api/your-endpoint")
           .then(response => response.json())
           .then(data => {
               window.dashboardSharedData = data;
               // 通知Dashlet数据已就绪，比如触发自定义事件
               document.dispatchEvent(new CustomEvent('dashboardDataReady'));
           })
           .catch(err => console.error(err));
   </script>
   

2. 三个Dashlet的前端代码监听dashboardDataReady事件，然后使用全局变量的数据：

   // Dashlet1的前端脚本
   document.addEventListener('dashboardDataReady', function() {
       var sharedData = window.dashboardSharedData;
       // 渲染Dashlet视图
       renderDashlet(sharedData);
   });
   

   这种方式适合前端渲染为主的Dashlet，避免了服务器端的多次调用。

注意事项 #

• 使用共享模型时，要确保页面前置处理器在所有Dashlet之前执行，不然Dashlet可能拿到空数据。
• 如果API数据会频繁变化，要注意缓存策略，避免展示过期数据。
• 处理错误情况：比如API调用失败时，要给共享数据设置默认值，防止Dashlet渲染出错。

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