黑马程序员技术交流社区

标题: 【郑州校区】传智健康项目讲义第二章五 [打印本页]

---

作者: 我是楠楠    时间: 2019-10-23 16:00
标题: 【郑州校区】传智健康项目讲义第二章五

【郑州校区】传智健康项目讲义第二章预约管理-检查项管理五

4. 检查项分页
本项目所有分页功能都是基于ajax的异步请求来完成的，请求参数和后台响应数据格式都使用json数据格式。
请求参数包括页码、每页显示记录数、查询条件。
请求参数的json格式为：{currentPage:1,pageSize:10,queryString:''itcast''}
后台响应数据包括总记录数、当前页需要展示的数据集合。
响应数据的json格式为：{total:1000,rows:[]}

4.1 完善页面
4.1.1 定义分页相关模型数据

[AppleScript] 纯文本查看 复制代码

pagination: {//分页相关模型数据

currentPage: 1,//当前页码

pageSize:10,//每页显示的记录数

total:0,//总记录数

queryString:null//查询条件

},

dataList: [],//当前页要展示的分页列表数据

4.1.2 定义分页方法
在页面中提供了findPage方法用于分页查询，为了能够在checkitem.html页面加载后直接可以展示分页数据，可以在VUE提供的钩子函数created中调用findPage方法

[AppleScript] 纯文本查看 复制代码

//钩子函数，VUE对象初始化完成后自动执行

created() {

this.findPage();

}//分页查询

findPage() {

//分页参数

var param = {

currentPage:this.pagination.currentPage,//页码

pageSize:this.pagination.pageSize,//每页显示的记录数

queryString:this.pagination.queryString//查询条件

};

//请求后台

axios.post("/checkitem/findPage.do",param).then((response)=> {

//为模型数据赋值，基于VUE的双向绑定展示到页面

this.dataList = response.data.rows;

this.pagination.total = response.data.total;

});

}

4.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();

} 

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2