|
【郑州校区】传智健康项目讲义第四章 八
3. 体检套餐分页
3.1 完善页面
3.1.1 定义分页相关模型数据
[AppleScript] 纯文本查看 复制代码 pagination: {//分页相关模型数据
currentPage: 1,//当前页码
pageSize:10,//每页显示的记录数
total:0,//总记录数
queryString:null//查询条件
},
dataList: [],//当前页要展示的分页列表数据
3.1.2 定义分页方法
在页面中提供了findPage方法用于分页查询，为了能够在setmeal.html页面加载后直接
可以展示分页数据，可以在VUE提供的钩子函数created中调用findPage方法
[AppleScript] 纯文本查看 复制代码 //钩子函数，VUE对象初始化完成后自动执行
created() {
this.findPage();
}
[AppleScript] 纯文本查看 复制代码 //分页查询
findPage() {
//分页参数
var param = {
currentPage:this.pagination.currentPage,//页码
pageSize:this.pagination.pageSize,//每页显示的记录数
queryString:this.pagination.queryString//查询条件
};
//请求后台
axios.post("/setmeal/findPage.do",param).then((response)=> {
//为模型数据赋值，基于VUE的双向绑定展示到页面
this.dataList = response.data.rows;
this.pagination.total = response.data.total;
});
}
3.1.3 完善分页方法执行时机
除了在created钩子函数中调用findPage方法查询分页数据之外，当用户点击查询按钮或者点击分页条中的页码时也需要调用findPage方法重新发起查询请求。
为查询按钮绑定单击事件，调用findPage方法
[AppleScript] 纯文本查看 复制代码 <el‐button @click="findPage()" class="dalfBut">查询</el‐button>
为分页条组件绑定current-change事件，此事件是分页条组件自己定义的事件，当页码改变时触发，对应的处理函数为handleCurrentChange
[AppleScript] 纯文本查看 复制代码 <el‐pagination
class="pagiantion"
@current‐change="handleCurrentChange"
:current‐page="pagination.currentPage"
:page‐size="pagination.pageSize"
layout="total, prev, pager, next, jumper"
:total="pagination.total">
</el‐pagination>
定义handleCurrentChange方法
[AppleScript] 纯文本查看 复制代码 //切换页码
handleCurrentChange(currentPage) {
//currentPage为切换后的页码
this.pagination.currentPage = currentPage;
this.findPage();
}
3.2 后台代码
3.2.1 Controller
在SetmealController中增加分页查询方法
[AppleScript] 纯文本查看 复制代码 //分页查询
@RequestMapping("/findPage")
public PageResult findPage(@RequestBody QueryPageBean queryPageBean){
PageResult pageResult = setmealService.pageQuery(
queryPageBean.getCurrentPage(),
queryPageBean.getPageSize(),
queryPageBean.getQueryString()
);
return pageResult;
}
3.2.2 服务接口
在SetmealService服务接口中扩展分页查询方法
[AppleScript] 纯文本查看 复制代码 public PageResult pageQuery(Integer currentPage, Integer pageSize, String
queryString);
3.2.3 服务实现类
在SetmealServiceImpl服务实现类中实现分页查询方法，基于Mybatis分页助手插件实现分页
[AppleScript] 纯文本查看 复制代码 public PageResult pageQuery(Integer currentPage, Integer pageSize, String
queryString) {
PageHelper.startPage(currentPage,pageSize);
Page<CheckItem> page = checkGroupDao.selectByCondition(queryString);
return new PageResult(page.getTotal(),page.getResult());
}
3.2.4 Dao接口
在SetmealDao接口中扩展分页查询方法
[AppleScript] 纯文本查看 复制代码 public Page<Setmeal> selectByCondition(String queryString);
3.2.5 Mapper映射文件
在SetmealDao.xml文件中增加SQL定义
[AppleScript] 纯文本查看 复制代码 <!‐‐根据条件查询‐‐>
<select id="selectByCondition" parameterType="string"
resultType="com.itheima.pojo.Setmeal">
select * from t_setmeal
<if test="value != null and value.length > 0">
where code = #{value} or name = #{value} or helpCode = #{value}
</if>
</select>
|
|
收藏
淘帖
踩
