vue+ElementUI实现表关联
vue+ElementUI实现表关联1. 一对多的关系2. 数据库和实体类的实现3. xml中的实现4. 后台逻辑的实现5. 前台vue的实现表关联使用ElemntUI选择下拉框实现的,不懂的去可以去官网查看使用说明。声明: 这是我自身对一对多的理解,希望大家共同学习,共同进步。1. 一对多的关系何为一对多?就比如基地和地块这种关系,一个基地(base)有多个地块(land),而一个地块...
vue+ElementUI实现表关联
表关联使用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. 数据库和实体类的实现
- 数据库中做表关联
- 再给地块对象中添加一个基地对象,并生成get,set方法
3. xml中的实现
- 封装结果集
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. 后台逻辑的实现
- 查所有的基地信息
写一个接口查所有的基地信息
BasesMapper.xml
basesMapper.java
IBasesService.java
BasesServiceImpl.java
2. 在BasesController层中写一个接口调用刚才的方法
接口的请求地址为/asset/bases/basesSelect
5. 前台vue的实现
-
为前端的接口写一个新的方法,并导入到页面中
-
在页面初始化和新增修改时调用getBasesSelect()方法,请求接口获取基地的数据,将数据存储到basesOptions中。
-
elementUI下拉框的实现
v-model是本身表单的数据,不用修改。
选择下拉框的内容从为basesOptions获取,注意value为baseId,这换个参数和前面的v-model中的数据是一致的。 -
修改按钮的方法要调整
修改时选择框没有内容时要进行赋值
至此,新增,修改没有问题。
更多推荐
所有评论(0)