黑马程序员技术交流社区

标题: 【郑州校区】品优购电商系统开发第 2 章 品牌管理 四 [打印本页]

---

作者: 我是楠楠    时间: 2020-5-7 13:51
标题: 【郑州校区】品优购电商系统开发第 2 章 品牌管理 四

【郑州校区】品优购电商系统开发第 2 章 品牌管理 四

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

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

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

package entity;

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.2.2 服务接口层
在 pinyougou-sellergoods-interface 的 BrandService.java 增加方法定义

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

/**

* 返回分页列表

* @return

*/

public PageResult findPage(int pageNum,int pageSize); 

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

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

@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.2.4 控制层
在 pinyougou-manager-web 工程的 BrandController.java 新增方法

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

 /**

* 返回全部列表

* @return

*/

@RequestMapping("/findPage")

public PageResult findPage(int page,int rows){

return brandService.findPage(page, rows);

}

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

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

 <!-- 分页组件开始 -->

<script src="../plugins/angularjs/pagination.js"></script>

<link rel="stylesheet" href="../plugins/angularjs/pagination.css">

<!-- 分页组件结束 --> 

构建 app 模块时引入 pagination 模块

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

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

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

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

<!-- 分页 -->

<tm-pagination conf="paginationConf"></tm-pagination>

3.3.2 JS 代码
在 brandController 中添加如下代码

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

//重新加载列表 数据

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

---

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

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