vue+ElementUI实现表关联

女爷i 2023-07-14 08:09 43阅读 0赞

### vue+ElementUI实现表关联 ###

*   *  1. 一对多的关系
     *  2. 数据库和实体类的实现
     *  3. xml中的实现
     *  4. 后台逻辑的实现
     *  5. 前台vue的实现

表关联使用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.  数据库中做表关联  
    ![在这里插入图片描述][20200313210647167.png]  
    ![在这里插入图片描述][20200313210742379.png]
2.  再给地块对象中添加一个基地对象，并生成get,set方法  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70]

## 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>

我们采用一对一方式。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 2]  
2. 重写sql语句

原来是单表，现在使用左外连接。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 3]

## 4. 后台逻辑的实现 ##

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

BasesMapper.xml  
![在这里插入图片描述][20200313212829379.png]

--------------------

basesMapper.java  
![在这里插入图片描述][20200313212912464.png]

--------------------

IBasesService.java  
![在这里插入图片描述][20200313212957789.png]

--------------------

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

![在这里插入图片描述][20200313213318604.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 5]  
接口的请求地址为`/asset/bases/basesSelect`

## 5. 前台vue的实现 ##

1.  为前端的接口写一个新的方法，并导入到页面中  
    ![在这里插入图片描述][20200313214332890.png]  
    ![在这里插入图片描述][20200313214257669.png]
2.  在页面初始化和新增修改时调用getBasesSelect()方法，请求接口获取基地的数据，将数据存储到basesOptions中。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 6]
3.  elementUI下拉框的实现  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 7]  
    v-model是本身表单的数据，不用修改。  
    选择下拉框的内容从为basesOptions获取，注意value为baseId，这换个参数和前面的v-model中的数据是一致的。
4.  修改按钮的方法要调整  
    修改时选择框没有内容时要进行赋值

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 8]

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

[20200313210647167.png]: /images/20230529/8e6c8da0e04b4cbfa3e09da2ac1dcc2a.png
[20200313210742379.png]: /images/20230529/d2df655b39b94a3db121ce42e7d73d92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70]: /images/20230529/0d7bfaf2b6bc42c6a13ff51df8c5763b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 1]: /images/20230529/416e1d0e3e6a421192d73fcd97b5a9a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 2]: /images/20230529/3c3e0e1149bf415786d6a002674382e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 3]: /images/20230529/46d40e45cf1e41fca2a7a937677ee0aa.png
[20200313212829379.png]: /images/20230529/89750582fb594196a1df45124522929a.png
[20200313212912464.png]: /images/20230529/69842c3460be4d92b206264d95ab8b5a.png
[20200313212957789.png]: /images/20230529/2531a838bc4e4a929c6469b7a2fb2508.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 4]: /images/20230529/235e3f5da51444babffb8514da73acf3.png
[20200313213318604.png]: /images/20230529/6d0f90e2632b44919b906af4d4ad4c40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 5]: /images/20230529/2d3da60b31544dc59a4c5538f06369d4.png
[20200313214332890.png]: /images/20230529/1e3c52807cda472a9aa75df4b57ee081.png
[20200313214257669.png]: /images/20230529/9c28aed05c7040c7a16515a403c126bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 6]: /images/20230529/eebf57b1c7d944fabffdb70a858067f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 7]: /images/20230529/a1fa748354074304ac33359bbd66bcab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 8]: /images/20230529/ea6c2646b662468bac624fe0ed82e107.png