一、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>;
},
},
另一位大佬的情况, 我贴上地址和截图:
https://blog.csdn.net/lvyuan1234/article/details/86727703
大同小异,简单一弄就好了。
四、后记:
有人可能会有疑问,我其实也有这个疑问,那个多余的前缀我们能不能去掉,我找了半天没找到办法,看到有个帖子说,目前还不支持,所以我就放弃了。如果实在需要,就可以自己写SQL。
不知道未来的版本是否会支持,或者是不是已经存在好的办法,我没搜到,如果有大佬知道,还望不吝赐教!