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. 数据库和实体类的实现

  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. 修改按钮的方法要调整
    修改时选择框没有内容时要进行赋值

在这里插入图片描述

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

  • 5
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue2中配合Element UI实现登录页面,你可以按照以下步骤进行操作: 1. 首先,确保你已经安装好了VueElement UI,可以通过以下命令进行安装: ``` npm install vue npm install element-ui ``` 2. 在Vue项目中引入Element UI的样式和组件,在main.js文件中添加以下代码: ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 创建一个登录页面组件,在组件中使用Element UI的单和按钮组件,例如: ```html <template> <el-form> <el-form-item label="用户名"> <el-input v-model="username"></el-input> </el-form-item> <el-form-item label="密码"> <el-input type="password" v-model="password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="login">登录</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { login() { // 处理登录逻辑 } } } </script> ``` 4. 在你的路由文件中,将登录页面组件与一个路由路径进行关联,例如: ```javascript import Vue from 'vue' import Router from 'vue-router' import LoginPage from './components/LoginPage.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/login', name: 'Login', component: LoginPage } ] }) ``` 5. 最后,在你的入口文件中,将路由和根组件关联起来,例如: ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ router, render: h => h(App) }).$mount('#app') ``` 这样,你就可以在Vue2中使用Element UI来实现一个简单的登录页面了。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值