Java之品优购课程讲义_day02（3）

品牌列表分页的实现
3.1 需求分析
在品牌管理下方放置分页栏，实现分页功能

3.1 后端代码3.1.1 分页结果封装实体
在 pinyougou-pojo 工程中创建 entity 包，用于存放通用实体类，创建类
PageResult

package  entity;[/size][/font][/align][font=微软雅黑][size=3]

import  java.util.List;

/**

*分页结果封装对象

*@author  Administrator

*

*/

public  class  PageResult  implements  Serializable{

private  long  total;//总记录数

private  List  rows;//当前页结果

public  PageResult(long  total,  List  rows)  {

super();

this.total  =  total;

this.rows  =  rows;

}

//getter    and  setter  .....

}

3.1.1 服务接口层
在 pinyougou-sellergoods-interface 的 BrandService.java 增加方法定义

3.1.1 服务实现层
在 pinyougou-sellergoods-service 的 BrandServiceImpl.java 中实现该方法

@Override

public  PageResult  findPage(int  pageNum,  int  pageSize)  { PageHelper.startPage(pageNum,  pageSize);
Page<TbBrand>  page=  (Page<TbBrand>)  brandMapper.selectByExample(null);

return  new  PageResult(page.getTotal(),  page.getResult());

}
PageHelper 为 MyBatis 分页插件

3.1.1 控制层
在 pinyougou-manager-web 工程的 BrandController.java 新增方法

/**

*返回全部列表

*@return

*/ @RequestMapping("/findPage")
public  PageResult    findPage(int  page,int  rows){

return  brandService.findPage(page,  rows);

}

3.3 前端代码
3.3.1 HTML
在 brand.html 引入分页组件

构建 app 模块时引入 pagination 模块 var app=angular.module('pinyougou',['pagination']);//定义品优购模块 页面的表格下放置分页组件 3.3.1 JS 代码 在 brandController 中添加如下代码 ``` //重新加载列表 数据 $scope.reloadList=function(){ //切换页码 $scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage); } //分页控件配置 $scope.paginationConf = { currentPage: 1, totalItems: 10, itemsPerPage: 10, perPageOptions: [10, 20, 30, 40, 50], onChange: function(){ $scope.reloadList();//重新加载 } }; //分页 $scope.findPage=function(page,rows){ ``` ``` $http.get('../brand/findPage.do?page='+page+'&rows='+rows).success( function(response){ $scope.list=response.rows; $scope.paginationConf.totalItems=response.total;//更新总记录数 } ); } ``` 在页面的 body 元素上去掉 ng-init 指令的调用 paginationConf 变量各属性的意义： currentPage：当前页码 totalItems:总条数itemsPerPage: perPageOptions：页码选项onChange：更改页面时触发事件