表关联使用ElemntUI选择下拉框实现的,不懂的去可以去官网查看使用说明。
声明: 这是我自身对一对多的理解,希望大家共同学习,共同进步。

1. 一对多的关系

何为一对多?

就比如基地和地块这种关系,一个基地(base)有多个地块(land),而一个地块只对应一个基地。

数据库的实现: 在“多”的一方加上“一”的id字段。比如:base中的有 base_id ,在 land 中有自己的 land_id,也有关联关系的 base_id 。
xml中的实现: 在“多”的一方的xml中用左外连接拼接相等的关联关系。比如: SELECT * FROM pro_lands l LEFT JOIN pro_bases b ON l.base_id = b.base_id
实现方法: 在多的一方维护一的表。即在"多"的一方中加上"一"的实体类。比如: 有base和land这两个类,在land实体类中加上base类,则land类中有自身的属性,也有base所有的属性。

2. 数据库和实体类的实现

  1. 数据库中做表关联
    在这里插入图片描述
    在这里插入图片描述
  2. 再给地块对象中添加一个基地对象,并生成get,set方法
    在这里插入图片描述

3. xml中的实现

  1. 封装结果集
    association用于一对一的情况,用于封装一个对象。
    collection用于多对一的情况,用于封装一个集合。

比如另外一个例子:user表和dept表以及roles表。
用户和部门是多对一,拆分为一对一分析,使用association关联。
而用户和角色是多对多。多对多一般拆分一对多分析,使用collection关联。

以下用若依开源系统中的代码作为演示:

	<resultMap type="SysUser" id="SysUserResult">
		<id     property="userId"       column="user_id"      />
		<result property="deptId"       column="dept_id"      />
		<result property="userName"     column="user_name"    />
		<result property="nickName"     column="nick_name"    />
		<result property="email"        column="email"        />
		<result property="phonenumber"  column="phonenumber"  />
		<result property="sex"          column="sex"          />
		<result property="avatar"       column="avatar"       />
		<result property="password"     column="password"     />
		<result property="status"       column="status"       />
		<result property="delFlag"      column="del_flag"     />
		<result property="loginIp"      column="login_ip"     />
		<result property="loginDate"    column="login_date"   />
		<result property="createBy"     column="create_by"    />
		<result property="createTime"   column="create_time"  />
		<result property="updateBy"     column="update_by"    />
		<result property="updateTime"   column="update_time"  />
		<result property="remark"       column="remark"       />
		<association property="dept"    column="dept_id" javaType="SysDept" resultMap="deptResult" />
		<collection  property="roles"   javaType="java.util.List"        resultMap="RoleResult" />
	</resultMap>
	
	<resultMap id="deptResult" type="SysDept">
		<id     property="deptId"   column="dept_id"     />
		<result property="parentId" column="parent_id"   />
		<result property="deptName" column="dept_name"   />
		<result property="orderNum" column="order_num"   />
		<result property="leader"   column="leader"      />
		<result property="status"   column="dept_status" />
	</resultMap>
	
	<resultMap id="RoleResult" type="SysRole">
		<id     property="roleId"       column="role_id"        />
		<result property="roleName"     column="role_name"      />
		<result property="roleKey"      column="role_key"       />
		<result property="roleSort"     column="role_sort"      />
		<result property="dataScope"     column="data_scope"    />
		<result property="status"       column="role_status"    />
	</resultMap>
	
	<sql id="selectUserVo">
        select u.user_id, u.dept_id, u.user_name, u.nick_name, u.email, u.avatar, u.phonenumber, u.password, u.sex, u.status, u.del_flag, u.login_ip, u.login_date, u.create_by, u.create_time, u.remark,
        d.dept_id, d.parent_id, d.dept_name, d.order_num, d.leader, d.status as dept_status,
        r.role_id, r.role_name, r.role_key, r.role_sort, r.data_scope, r.status as role_status
        from sys_user u
		    left join sys_dept d on u.dept_id = d.dept_id
		    left join sys_user_role ur on u.user_id = ur.user_id
		    left join sys_role r on r.role_id = ur.role_id
    </sql>

我们采用一对一方式。

在这里插入图片描述
在这里插入图片描述
2. 重写sql语句

原来是单表,现在使用左外连接。
在这里插入图片描述

4. 后台逻辑的实现

  1. 查所有的基地信息
    写一个接口查所有的基地信息

BasesMapper.xml
在这里插入图片描述


basesMapper.java
在这里插入图片描述


IBasesService.java
在这里插入图片描述


BasesServiceImpl.java
在这里插入图片描述
2. 在BasesController层中写一个接口调用刚才的方法

在这里插入图片描述
在这里插入图片描述
接口的请求地址为/asset/bases/basesSelect

5. 前台vue的实现

  1. 为前端的接口写一个新的方法,并导入到页面中
    在这里插入图片描述
    在这里插入图片描述

  2. 在页面初始化和新增修改时调用getBasesSelect()方法,请求接口获取基地的数据,将数据存储到basesOptions中。
    在这里插入图片描述

  3. elementUI下拉框的实现
    在这里插入图片描述
    v-model是本身表单的数据,不用修改。
    选择下拉框的内容从为basesOptions获取,注意value为baseId,这换个参数和前面的v-model中的数据是一致的。

  4. 修改按钮的方法要调整
    修改时选择框没有内容时要进行赋值

在这里插入图片描述

至此,新增,修改没有问题。

Logo

前往低代码交流专区

更多推荐