MybatisPlus多表联查-分页关联查询+根据id获取多表联查后的单行数据

news2025/5/22 4:25:59

分页关联查询

需求分析

有两张表w以及d，需要w的一些字段以及d的一些字段在前端显示
此时就需要用到关联查询，查询到的数据放入视图类，显示在前端

项目结构

在这里插入图片描述

视图类

package com.wedu.modules.tain.entity.vo;

import lombok.Data;

import java.util.Date;

@Data
public class WarnVo {
    //传输给前端展示
    //id
    private Long id;
    //车间
    private String workshops;
    //设备编号
    private String deviceNumber;
    //设备名称
    private String deviceName;
    //设备型号
    private String deviceModel;
    //维保到期时间
    private Date tainEndTime;
    //预警时间
    private Date warnTime;
    //状态（是否生成预警信息 是否被保养）
    private int status;
}

定义关联查询分页方法

首先在mapper接口中再定义分页的关联查询方法，复用分页类page，querywrapper组装where条件

@Mapper
public interface TainWarnMapper extends BaseMapper<TainWarn> {
    IPage<WarnVo> selectWarnPage(IPage<WarnVo> page, @Param(Constants.WRAPPER) QueryWrapper<WarnVo> wrapper);
}

在对应xml内创建对应的关联查询

TainWarnMapper.xml

<select id="selectWarnPage" resultType="com.wedu.modules.tain.entity.vo.WarnVo">
        select w.id,d.workshops,d.device_number,d.device_name,d.device_model,w.warn_time,w.tain_end_time,d.status
        from tain_warn w left join device d
                                   on d.id=w.device_id
            ${ew.customSqlSegment}
    </select>

${ew.customSqlSegment}是MyBatis Plus提供的动态SQL语句拼接功能。
在使用MyBatis Plus进行数据库操作时，可以通过Wrapper对象来构建查询条件。Wrapper对象可以通过链式调用的方式动态添加查询条件，包括等于、大于、小于等各种条件。而${ew.customSqlSegment}就是Wrapper对象中自定义的SQL片段，可以灵活地根据业务需求进行动态拼接。

service层

在service内写一个接口方法在impl内实现，先新建一个查询每页显示10条，再手动关闭sql优化避免查询总数的时候只查询主表，再创建querywrapper对象写查询条件，最后调用mapper接口的分页关联查询方法，传入分页的查询和查询条件，最后返回对象

ITainWarnService

public interface ITainWarnService extends IService<TainWarn> {
    PageUtils queryWarnPage(Map<String, Object> params);
}

TainWarnServiceImpl

    @Autowired
    private TainWarnMapper tainWarnMapper;

    @Override
    public PageUtils queryWarnPage(Map<String, Object> params) {
        // 从参数中获取当前页码和每页大小
        //.toString() 从 params 集合中检索到的值转换为字符串格式
        //Integer.parseInt()将字符串解析为整数
        int current = Integer.parseInt(params.get("page").toString());
        int pageSize = Integer.parseInt(params.get("limit").toString());
        // 设置分页参数
        Page<WarnVo> page = new Page<>(current,pageSize);
        //一定要手动关闭 SQL 优化，不然查询总数的时候只会查询主表
        page.setOptimizeCountSql(false);
        QueryWrapper<WarnVo> qw = new QueryWrapper<>();
        //组装查询条件 where status = 1
        qw.eq("status","1");
        IPage<WarnVo> wp = tainWarnMapper.selectWarnPage(page,qw);
        return new PageUtils(wp);
    }

TainWarnController实现分页查询

和之前写的分页查询一模一样，查询过程变了，但最后和前端的交互是一样的

    @Autowired
    private ITainWarnService iTainWarnService;

    @GetMapping("/queryWarnMessage")
    public R queryWarnMessage(@RequestParam Map<String,Object> params){
        PageUtils page = iTainWarnService.queryWarnPage(params);
        return R.ok().put("page",page);
    }

前端显示如图，分页关联查询成功
在这里插入图片描述

根据id获取当前一行数据

在前端点击添加保养记录的时候获取这条数据的id，根据当前点击数据的id查询warnVo实体类找到该条数据，warnVo是w和d两张表关联查询的结果

TainWarnMapper

首先写一个接口，传入id获取单行数据的实体类，@Param("id")写别名

@Mapper
public interface TainWarnMapper extends BaseMapper<TainWarn> {
    WarnVo selectById(@Param("id") Long id);
}

在xml内写查询语句，这里明确根据id查找可以直接写where，不用高级查询querywrapper再拼接

<select id="selectById" resultType="com.wedu.modules.tain.entity.vo.WarnVo" parameterType="java.lang.Long">
        select w.id,d.workshops,d.device_number,d.device_name,d.device_model,w.warn_time,w.tain_end_time,d.status
        from tain_warn w left join device d
                                   on d.id=w.device_id
        where w.id = #{id}
    </select>

ITainWarnService

public interface ITainWarnService extends IService<TainWarn> {
    WarnVo selectById(Long id);
}

TainWarnServiceImpl

    @Override
    public WarnVo selectById(Long id) {
        return tainWarnMapper.selectById(id);
    }

TainWarnController

    //根据id拿出用户信息
    @GetMapping("/info/{id}")
    public R info(@PathVariable("id") Long id){
        WarnVo warnVo = iTainWarnService.selectById(id);
        return R.ok().put("warnVo",warnVo);
    }

根据id查询结果可在network的response内看到
在这里插入图片描述

部分前端代码

<script>
export default {
  data() {
    return {
      dataForm: {
        id: 0,
        workshops: "",
        deviceNumber: "",
        deviceName: "",
        deviceModel: "",
        tainEndTime: "",
        warnTime: "",
        status: "",
      },
      dialogVisible: false,
    };
  },
  methods: {
    init(id) {
        this.dataForm.id=id;
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
      });
      if (this.dataForm.id) {
        this.$http({
          url: this.$http.adornUrl(`/tain/warn/info/${this.dataForm.id}`),
          method: "get",
        }).then(({ data }) => {
          if (data && data.code === 0) {
            (this.dataForm.workshops = data.warnVo.workshops),
              (this.dataForm.deviceNumber = data.warnVo.deviceNumber),
              (this.dataForm.deviceName = data.warnVo.deviceName),
              (this.dataForm.deviceModel = data.warnVo.deviceModel),
              (this.dataForm.tainEndTime = data.warnVo.tainEndTime),
              (this.dataForm.warnTime = data.warnVo.warnTime),
              (this.dataForm.status = data.warnVo.status);
          }
        });
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>