在VS-Code中实现多表联查的方法

骑猪看日落 2023-10-11 17:54 39阅读 0赞

在项目中，我们经常会有多张表一起查看的情况，比如，点击软件的时候，查询设备的名称，这样不仅大大减少了代码的重复率，而且也让程序变得更为简单，那么我们该如何实现这一功能呢？

首先，我们先说一下需要的软件。

后端：IDEA，前端：VS-Code

一、我们先在实体类添加一个设备名称的属性，并将其进行封装，代码如下。

private  String devName;//设备名称
    
    
    
    //进行封装
    public void setDevName(String devName) {
            this.devName = devName;
        }public String getDevName() {
            return devName;
        }

二、我们在mapper.xml文件中修改sql语句，代码如下。

//将实体类和数据库一一对应，需要加上devName
    <resultMap id="SoftWareResult" type="SoftWare">
            <result property="id" column="id"></result>
            <result property="editionNumber" column="edition_number"></result>
            <result property="editionUpdate" column="edition_update"></result>
            <result property="editionTime" column="edition_time"></result>
            <result property="deviceId" column="device_id"></result>
            <result property="devName" column="dev_name"></result>
        </resultMap>
        <sql id="selectSoftWareVO">
            SELECT id ,edition_number,edition_update,edition_time, device_id FROM yy_software
        </sql>
    //双表联查的sql语句    
    <select id="selectSoftWareList" parameterType="SoftWare" resultMap="SoftWareResult">
            SELECT s.id ,s.edition_number,s.edition_update,s.edition_time,s.device_id,d.dev_name FROM yy_software s left join yy_device d on s.device_id=d.id
            <where>
                <if test="editionNumber!=null and editionNumber!=''">and edition_number like concat('%',#{editionNumber},'%')</if>
                <if test="editionTime!=null and editionTime!=''">and edition_time like concat('%',#{editionTime},'%')</if>
                <if test="deviceId!=null and deviceId!=''">and device_id like concat('%',#{deviceId},'%')</if>
            </where>
        </select>

三、我们打开VS-Code中的index文件。

1、将设备id的prop改为devName。

<el-table-column label="设备id" prop="devName" align="center" ></el-table-column>

2、下拉列表中的：label改为devName。

<el-form-item label="设备id" prop="deviceId">
                   
                  <el-select v-model="form.deviceId" placeholder="请选择" size="mini">
                      <el-option v-for="s  in listDevice" :label="s.devName" :value="s.id" :key="s.id">
                      </el-option>
                  </el-select>
                </el-form-item>

3、导入listDevice。

import {listDevice} from '@/api/basic/device';

4、将其进行声明。

listDevice:[],

5、将其放入表单。

form:{
             id:null,
             editionNumber:null, 
             editionUpdate:null,//更新说明
             editionTime:null,  //更新时间
             devName:null,//设别名称
             deviceId:null//设备类型
          },

6、查询设备列表。

/*查询列表*/
        getDevice(){
          listDevice(this.queryParam).then(response=>{
            console.log(response);
            this.listDevice=response.rows;
          });
        },

7、接收这个列表。

created(){
        this.getDevice();
      },

四、进行测试。

1、我们先查看一下所有的设备名称。

![6840d1c4e6fb470a928e7e3f8259cb9c.png][]

2、我们再点开软件，在软件中查看所有设备，和软件中显示的设备一模一样。

![5aac0e7faeaf4573821140ba644cbc4c.png][]

如此，我们便实现了多表联查的情况，以此类推，几张都是一样的，只要sql语句写对，就能出来。

[6840d1c4e6fb470a928e7e3f8259cb9c.png]: https://img-blog.csdnimg.cn/6840d1c4e6fb470a928e7e3f8259cb9c.png
[5aac0e7faeaf4573821140ba644cbc4c.png]: https://img-blog.csdnimg.cn/5aac0e7faeaf4573821140ba644cbc4c.png