Sequelize多表联合查询案例

全栈程序员-用户IM • 2022年5月18日下午8:40 • 未分类

大家好，又见面了，我是你们的朋友全栈君。

一、Table：

现在有两个表，A和B，关联关系：
MATCH表中的job_history_id与JOB_HISTORY表中的id相关联。
在这里插入图片描述

二、需求：

查询Match表中的user_id,report_comment,以及job_history_id所关联的JOB表中的job_link，在前端显示。

三、Code:

1. 后端

首先要建立两个表的关联：

MatchScoreReportModel.belongsTo(JobHistoryModel, { 
   
  foreignKey: 'job_history_id',
  targetKey: 'id',
});

在这里插入图片描述
然后开始查询，中间用include进行连接：

const { 
    rows, count } = await MatchScoreReport.findAndCountAll({ 
   
  attributes: ['user_id', 'report_comment'],
  ...
  include: [
    { 
   
      attributes: ['job_link'],
      model: JobHistoryModel,
    },
  ],
  ...
});
return { 
   
  rows,
  count,
};

中间的…，指的是你的一些其他的条件。核心就是其中的include: []。
这样就能查询出来我们想要的三个字段：user_id,report_comment,job_link。

但是我们看一下拼接出来的SQL，以及查询出来的结果：

SELECT `MATCH_SCORE_REPORT`.`user_id`,
       `MATCH_SCORE_REPORT`.`report_comment`,
       `JOB_HISTORY`.`job_link` AS `JOB_HISTORY.job_link`
FROM `MATCH_SCORE_REPORT` AS `MATCH_SCORE_REPORT`
         LEFT OUTER JOIN `JOB_HISTORY` AS `JOB_HISTORY` ON `MATCH_SCORE_REPORT`.`job_history_id` = `JOB_HISTORY`.`id`;

我们可以看到，它是给job_link起了一个别名，叫做JOB_HISTORY.job_link。
返回的结果部分截图（数据脱敏处理）：
在这里插入图片描述
这样的话，前端得到的也是一个带有JOB_HISTORY.前缀的结果，
所以前端进行结果的遍历和处理的时候，也需要额外多做一些处理：

2. 前端

首先是接口的定义，对应的属性使用''包裹起来。

interface ReportComments { 
   
  user_id: string;
  report_comment: string;
  'JOB_HISTORY.job_link': string;
}

其次是遍历的时候，根据不同的框架可能需要自己调整获取的方式，但是直接xxx.xxx.xxx是会报错的，不过大概就那么几种方式，试试就能试出来：

我的情况：
（注意其中的不同，original.report_comment和original['JOB_HISTORY.job_link']）

{ 
   
  Header: 'Comment',
  Cell({ 
    original }: { 
    original: ReportComments }) { 
   
    return <div className="p-2">{ 
   original.report_comment}</div>;
  },
},
{ 
   
  Header: 'JobURL',
  Cell({ 
    original }: { 
    original: ReportComments }) { 
   
    return <div className="p-2">{ 
   original['JOB_HISTORY.job_link']}</div>;
  },
},