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

品牌列表分页的实现

3.1 需求分析

在品牌管理下方放置分页栏，实现分页功能

3.1 后端代码3.1.1 分页结果封装实体

在 pinyougou-pojo 工程中创建 entity 包，用于存放通用实体类，创建类

PageResult

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

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

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

 

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

?

01 02 03 04 05 06 07 08 09 10 11 12 13

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 中实现该方法

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

?

1 2 3 4 5 6 7 8

@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 新增方法

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

?

01 02 03 04 05 06 07 08 09 10 11 12

/**   *返回全部列表   *@return   */ @RequestMapping("/findPage") public  PageResult    findPage(int  page,int  rows){   return  brandService.findPage(page,  rows);   }

3.3 前端代码3.3.1 HTML

在 brand.html 引入分页组件

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

?

1 2 3 4 5 6 7

<!-- 分页组件开始 -->   <script  src="../plugins/angularjs/pagination.js"></script>   <link  rel="stylesheet"  href="../plugins/angularjs/pagination.css">   <!-- 分页组件结束 -->

构建 app 模块时引入 pagination 模块

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

?

1	var  app=angular.module('pinyougou',['pagination']);//定义品优购模块

页面的表格下放置分页组件

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

?

1 2 3

<!-- 分 页 -->   <tm-pagination  conf="paginationConf"></tm-pagination>

3.3.1 JS 代码

在 brandController 中添加如下代码

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

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

//重新加载列表 数据   $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){

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

?

01 02 03 04 05 06 07 08 09 10 11 12 13

$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：更改页面时触发事件