Vue应用中基于UUID关联关系的数据检索与展示问题

一、方案对比：后端联查 vs 前端处理 #

1. 后端SQL JOIN方案（更推荐） #

• 简便性：一次请求就能获取表A详情+关联的表B步骤数据，前端无需额外处理数据关联，直接拿到嵌套的步骤数据传给子组件渲染即可。
• 可靠性：避免前端加载全量表B数据带来的性能损耗（数据量大时卡顿、带宽浪费），也能规避前端筛选逻辑可能出现的错误（比如UUID匹配规则写错）。
• 实现逻辑：修改后端/api/procesos/${uuid}的查询控制器，通过SQL JOIN关联表A和表B（以ppp_table_a_uuid为关联条件），将匹配的表B数据嵌套在表A的返回结果中，示例返回结构：

  {
    "uuid": "表A的UUID",
    "title": "标题",
    "description": "描述",
    "employee": "员工姓名",
    "steps": [
      {"uuid": "表B的UUID", "content": "步骤内容", ...},
      ...
    ]
  }
  

2. 前端方案的优劣 #

• 方案1（请求单个步骤UUID）：完全不可行，因为你无法提前知晓表B中哪些UUID对应当前表A的UUID，没有办法直接发起单个步骤的请求。
• 方案2（请求全量表B数据）：虽然能实现需求，但缺点突出：
  • 数据量大时，请求耗时久，前端加载慢；
  • 前端需要手动筛选ppp_table_a_uuid与当前页UUID匹配的数据，增加代码量和出错概率；
  • 无意义加载全量数据，浪费服务器和客户端资源。

二、若必须在前端实现（临时妥协方案） #

如果暂时无法修改后端，只能采用请求全量表B数据的方式，实现步骤如下：

1. 在详情页父组件中，同时发起两个Axios请求：一个获取表A详情，另一个获取表B全量数据；
2. 拿到表B数据后，通过数组筛选方法提取匹配数据：

   // 假设tableBData是请求返回的全量表B数据
   const matchedSteps = tableBData.filter(item => item.ppp_table_a_uuid === this.$route.params.uuid)
   

3. 将matchedSteps作为props传递给子组件，子组件直接渲染即可。

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