CURD
element框架的tableDate怎么拿id? 查询: 根据前端传来的 searchForm ,后端判断searchForm的参数是否为空(不为空则加入到查询语句条件),进行模糊查询 分页:引入依赖 分页业务逻辑: 不难看出element分页组件 需要 总页数,当前页和当前页展示数量,可由后端查出。 而前端是可以设置初始值的 从前端传入 currentPage和 pageSize 给后端 进行分页查询(查所有,或是 条件模糊查询)。并返回 currentPage,pageSize和 total 绑定展示 查询所有并分页:直接传 currentPage,pageSize , 后端接收直接 pageHelper.start(currentPage,pageSize) 设置 起始页 和 每页条数, currentPage 和 pageSize 变换时,要怎么判断是否是查询所有还是模糊条件查询? 判断带不带 查询条件吧,如果带查询条件就是 条件查询,反正查询所有。
tableDate是一个有序的数组集合
给
scope.row表示当前行,也是tableDate数组的当前元素 scope.row.id
axios发送请求: data方式默认 是 以json传, 而params方式是以在结尾拼接的方式传
axios({
method:"请求方式",
url:"访问地址及接口", //例 "http://localhost:8081/brand/findById"
data: 参数值 json (可以是数组,或是其他对象) // data 和 params 可同时存在,data 传的是json对象,而params是直接在 url后面拼接的key=value&...&&&
params:{ //要传给后端的值 直接在url 后面拼接 "?id=id&...."
id:id // key:value
}
}).then(function(resp){
_this.brandForm = resp.data.data
})修改:流程思路:先根据 scope.row.id 查询 brand 并绑定给 brandForm 回显,然后在保存。
因为 新增和修改操作都是使用 brandForm 表单,所以在点击保存时,要判断 到底是新增操作还是修改操作? 可根据 id 来判断。
若是 id 为空,说明是新增操作。 而修改操作之前是有数据回显的(从后端查过数据),所以有 id
"保存"按钮绑定了 submitForm()方法,直接访问后端,在后端进行逻辑判断删除: 前端传id,后端根据传来的id直接删除,逻辑或物理
单个删除:
delete from tb_brand where id = #{}
批量删除(element+vue):
delete from tb_brand where id in(...);
在
直接定义 checkedBrandsChange 方法
//方法的"形参"是 属性@selection-change 变化时的赋值, 而 this.checkedBrand 的 checkedBrand 是自己定义在 data()的数组
//简单点说就是,
checkedBrandsChange (checkedBrands){
this.checkedBrand = checkedBrands
}
此时,我们可将已赋值的自定义 "复选框数组" 传给 批量删除按钮绑定的方法,传递给后端进行批量删除
注意:此时复选框数组的元素是 对象,而我们只要 对象的 id
element分页工具条组件
<el-pagination
background
@size-change="handleSizeChange" //当每页显示数变化时,传值给 handleSizeChange方法
@current-change="handleCurrentChange" //当 当前页 变化时,传值给 handleCurrentChange 方法
:current-page="currentPage"
:page-sizes="[5, 10,15 , 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
查询起始 :(currentPage- 1)*pageSize
pageHelper的使用:
1.直接pageHelper.startPage(currentPage,pageSize) // 直接调用startPage设置 currentPage 和 pageSize
2.把查询到的数据转为 pageInfo, 或直接把查询到的数据传入 pageInfo对象即可 并返回,简单暴力。 该pageInfo对象
注意: 使用pageHelper时, maper.xml里的 sql 语句 别用分号结尾!
把 查到的所有数据 传给 pageInfo 并返回该 pageInfo 即可;模糊查询并分页:传入查询条件 和 currentPage,pageSize。 后端设置pageHelper.start, 根据查询条件查询数据并传给 pageInfo对象并返回。
前端怎么传 查询条件 和 currentPage,pageSize 呢? axios 的 data:_this.searchForm ,只传了查询条件。 currentPage,pageSize 该怎么传?如果能传的话后端 创建一个PageResult也能接收相关
可直接
data: _this.searchForm,
params:{
currentPage:_this.currentPage,
pageSize:_this.pageSize
}
public Result search(@RequestBody Brand brand,Page page){
、、、
}
前端定义一个方法,传入searchForm 与currentPage,pageSize。不管是钩子函数查询所有还是 "查询"按钮 条件查询,都用该方法。
后端就写一个接口,判断传来的searchForm是否为空,从而 动态 sql 是否是条件查询?