elementui+vue分页查询和模糊查询
在官网的组件中找到分页组件的代码。推荐用这个完整的,里面包含更多的属性帮助我们理解练习。vue的data中要加入这几个变量,一般只要属性前带冒号的都要在data中赋值: 需要触发的方法:(1)current-change:页码改变时触发的事件(2)size-page: 当前页面显示的条数发生改变时触发的事件(3)修改页面加载事件,发送异步请求时,需要携带两个参数:pageSize(显示条数)和cu
讲之前,这里有一个如下的整个工程文件,数据库的表也在里面,数据库名为mybatis。需要的自提:
一、分页查询
在官网的组件中找到分页组件的代码。推荐用这个完整的,里面包含更多的属性帮助我们理解练习。
<%-- 分页插件 --%>
<div class="block" id="pageHelper">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
vue的data中要加入这几个变量,一般只要属性前带冒号的都要在data中赋值:
需要触发的方法:
(1)current-change:页码改变时触发的事件
handleCurrentChange(val) {
this.currentPage = val; //val可以获取当前用户选择的页码数
app.initTable();//页面加载触发的查询所有的事件
},
(2)size-page: 当前页面显示的条数发生改变时触发的事件
//每页显示的条数大小改变时触发的方法
handleSizeChange(val) {
this.pageSize = val;//获取用户想要每页显示的条数
app.initTable();
},
(3)修改页面加载事件,发送异步请求时,需要携带两个参数:pageSize(显示条数)和currentPage(当前页码数)
//页面加载事件
initTable(){
axios.post("student/select?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(function (result){
console.log(result.data)
if (result.data.code===2000){
app.tableData = result.data.data.list;
app.total = result.data.data.total;
}else if (result.data.code===5001){
app.$message.error(result.data.msg);
location.href="login.jsp"
}
})
},
后端业务层需要修改的代码:
public CommenResult select(Integer currentPage,Integer pageSize){
try {
PageInfo<Student> pageInfo = studentservice.selectAll(currentPage, pageSize);
return new CommenResult(2000,"查询成功",pageInfo);
} catch (Exception exception) {
exception.printStackTrace();
}
return new CommenResult(5000,"查询失败",null);
}
想要实现分页功能,记得导入分页的jar包并且在配置文件中配置分页:
二、模糊查询
我们只需要在官网上找个表单输入框加一个按钮就行,最后的效果差不多这样就可以:
(1) 首先要在vue的data中为:model里的searchForm赋一个初始值
(2)为查询按钮绑定一个触发模糊查询的点击事件:
//模糊查询方法
onSearch(){
this.currentPage=1//查询之前,要先确保分页查询的当前页面在第一页
this.initTable();
},
这里触发页面加载事件之前一定要让当前页为第一页,不然会和分页查询产生不必要的冲突。如果不理解,可以把这一行代码删掉,然后在前端分页查询之前将页面点到除了第一页的页面再查询,看看效果,然后你就明白了
最重要的是修改页面加载事件:在前面我们传了分页查询需要的参数,这里再加上我们模糊查询的表单数据。
//页面加载事件
initTable(){
axios.post("student/select?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.searchForm).then(function (result){
console.log(result.data)
if (result.data.code===2000){
app.tableData = result.data.data.list;
app.total = result.data.data.total;
}else if (result.data.code===5001){
app.$message.error(result.data.msg);
location.href="login.jsp"
}
})
},
修改业务层传的参数:就比之前分页时多加了一个map,用来封装我们的表单数据。
public CommenResult select(Integer currentPage,Integer pageSize,@RequestBody Map map){
log.info(currentPage+"------"+pageSize);
try {
PageInfo<Student> pageInfo = studentservice.selectAll(currentPage, pageSize,map);
return new CommenResult(2000,"查询成功",pageInfo);
} catch (Exception exception) {
exception.printStackTrace();
}
return new CommenResult(5000,"查询失败",null);
}
修改查询所有的dao方法:
<select id="selectAll" resultMap="BaseResultMap">
select * from tbl_student
<where>
<if test="stuName!=null and stuName!=''"><!--模糊查询根据学生姓名-->
and stu_name like concat('%',#{stuName},'%')
</if>
<if test="stuSex!=null"><!--根据学生性别-->
and stu_sex = #{stuSex}
</if>
<if test="stuMajor!=null"><!--根据学生的专业-->
and stu_major = #{stuMajor}
</if>
</where>
</select>
这里运用了动态sql,如果这三个变量穿过来了参数,就会根据这些参数来查询,如果没有传参,就是普通的查询所有的方法。
如果这部分知识不太了解的话,可以看下面的文章:
更多推荐
所有评论(0)