①后端要给前端怎样的数据
在没有分页的时候,后端给前端的数据是:[{...},{...},{...},...{...}]当前所有页的所有记录,但是分页后端传给前端这样的数据则不行。
在分页的时候,后端给前端的数据,除了当前一页的所有记录[{...},{...},{...},...{...}]外,还有总页数记录数total。
所以,在分页的时候,后端给前端的数据是对象形式{},
对象里面的内容为:{total:总页数如100,rows:当前一页的所有记录如[{...},{...}...{...}]}
实现方法有两种:
一、Map map = new HashMap();
map.put("total",总页数如100);
map.put("rows",list如[{...},{...},...{...}]);
return map;//return map集合,fastjson会自动转换这种集合
二、创建类,包含total总页数记录数如100和rows当前一页的所有记录如[{...},{...},...{...}]
这个类相当于一个实体类,放在pojo工程模块,但不放在com.pinyougou.pojo包下,因为这个包里面是自动生成的实体类。这个类是通用类,放在entity包下。
pinyougou02-pojo->src/main/java左键点击一下,再右键->New->Package
输入:entity
entity->New->Class
PageResult.java里面的内容为:
这个分页结果也是需要在网络上传输的,所以必然要实现序列化接口,即implements Serializable
package entity;
import java.io.Serializable;
import java.util.List;
/**
* 分页结果类(鼠标放在
* public class PageResult implements Serializable{
* 这一行,然后按Shift+Alt+J出现这个注释)
* @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;
}
public long getTotal() {
return total;
}
public void setTotal(long total) {
this.total = total;
}
public List getRows() {
return rows;
}
public void setRows(List rows) {
this.rows = rows;
}
}
在分页的时候,前端给后端的数据,当前页数记录数和[{...},{...},{...},...{...}]。
②再写服务接口(service的interface层)层、服务实现层(service实现层)和控制层(web层)
一、在pojo层写一个类,PageAndSize.java
PageAndSize.java的内容为:
package entity;
import java.io.Serializable;
public class PageAndSize implements Serializable{
private int pageNum;//将所有页数分为几页
private int sizeNum;//所有页数值
public PageAndSize() {
super();
}
public PageAndSize(int pageNum, int sizeNum) {
super();
this.pageNum = pageNum;
this.sizeNum = sizeNum;
}
public int getPageNum() {
return pageNum;
}
public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}
public int getSizeNum() {
return sizeNum;
}
public void setSizeNum(int sizeNum) {
this.sizeNum = sizeNum;
}
}
二、写服务接口层(service的interface层)
BrandService.java接口层内容为:
package com.pinyougou.sellergoods.service;
import java.util.List;
import com.pinyougou.pojo.TbBrand;
import entity.PageAndSize;
import entity.PageResult;
/**
* 品牌接口
* @author Administrator
*
*/
public interface BrandService {
public List<TbBrand> findAll();
/**
* 品牌分页
* @param pageAndSize
* @return
*/
public PageResult findPage(PageAndSize pageAndSize);
}
三、写服务实现层(service的implements实现层)
要在服务实现层用到分页插件,这个分页插件在dao层的配置文件已经提及。
SqlMapConfig.xml的内容为:
pom.xml文件的内容为:
BrandServiceImpl.java的内容为:
package com.pinyougou.sellergoods.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import com.alibaba.dubbo.config.annotation.Service;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.pinyougou.mapper.TbBrandMapper;
import com.pinyougou.pojo.TbBrand;
import com.pinyougou.sellergoods.service.BrandService;
import entity.PageAndSize;
import entity.PageResult;
@Service
public class BrandServiceImpl implements BrandService {
@Autowired
private TbBrandMapper brandMapper;
@Override
public List<TbBrand> findAll() {
//返回全部列表
return brandMapper.selectByExample(null);
}
@Override
public PageResult findPage(PageAndSize pageAndSize) {
PageHelper.startPage(pageAndSize.getPageNum(), pageAndSize.getSizeNum());
Page<TbBrand> page = (Page<TbBrand>) brandMapper.selectByExample(null);
return new PageResult(page.getTotal(),page.getResult());
}
}
在没有写PageHelper.startPage(pageAndSize.getPageNum(), pageAndSize.getSizeNum()); 的时候,
brandMapper.selectByExample(null); 查出来的是全部的TbBrand。用syso打印出来,可以看到。
控制台输出显示的是全部的TbBrand。
但是,如果写上PageHelper.startPage(pageAndSize.getPageNum(), pageAndSize.getSizeNum()); 的时候,
brandMapper.selectByExample(null); 控制台查出来的不是全部的TbBrand。用syso打印出来,可以看到,是当前页的TbBrand。随着页数的改变,brandMapper.selectByExample(null); 查出来的当前页内容也不一样。
刚开始默认为第1页,每页显示10条数据。用syso打印出来。
所以要加:PageHelper.startPage(pageAndSize.getPageNum(), pageAndSize.getSizeNum());
四、写控制层(web层)
BrandController.java的内容为:
package com.pinyougou.manager.controller;
import java.util.List;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.alibaba.dubbo.config.annotation.Reference;
import com.pinyougou.pojo.TbBrand;
import com.pinyougou.sellergoods.service.BrandService;
import entity.PageAndSize;
import entity.PageResult;
@RestController
@RequestMapping("/brand")
public class BrandController {
@Reference
private BrandService brandService;
@RequestMapping("/findAll")
public List<TbBrand> findAll(){
return brandService.findAll();
}
@RequestMapping("/findPage")
public PageResult findPage(@RequestBody PageAndSize pageAndSize) {
return brandService.findPage(pageAndSize);
}
}
使用@RequestBody获取参数时,还是老老实实的选择POST方法比较合适,至于原因,跟大众,随主流,跟着大家的习惯走比较好。本人做了实验:
url请求方式
接下来直接换成url的请求方式,看是否直接支持get请求
http://localhost:9101/brand/findPage.do?{"pageNum":1,"sizeNum":10}
浏览器中输入时,服务器400,也就是说,将json串拼接到url中貌似不行(也有可能是我的使用不对。)
总之在@RequestBody获取参数时,还是用POST方法较好。GET方法貌似得不到参数。
③后端写完,写前端代码
一、如果完全自己写会比较头疼,所以通过别人写好的分页插件来完成。
这两个文件引入.html文件,分页就能使用。
<!-- 分页组件开始 -->
<script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" htef="../plugins/angularjs/pagination.css"></link>
<!-- 分页组件结束 -->
其中 ../ 表示,从brand.html文件返回其上一级目录,即文件夹admin所在目录。然后找到plugins文件夹目录,再依序找到所要文件。
二、pagination.js文件,本身内容就引入了angularjs
可以看看pagination.js文件内容:
var app = angular.module('pinyougou',['pagination']);//在js里可以用单引也可以用双引
三、放置分页控件
<tm-pagination conf="paginationConf" ></tm-pagination>
四、设置分页配置值
<script type="text/javascript">
var app = angular.module('pinyougou',['pagination']);//在js里可以用单引也可以用双引
app.controller('brandController',function($scope,$http){
//查询品牌列表数据
$scope.findAll = function(){
//之前的访问json的路径是http://localhost:9101/brand/findAll.do
//则现在,在brand.html文件../返回根目录,webapp根目录,再寻找/brand/findAll.do
$http.get('../brand/findAll.do').success(
function(response){
$scope.list = response;
}
);
}
$scope.paginationConf = {
//当前页
currentPage : 1,
//总记录数
totalItems : 10,
//每页记录数
itemsPerPage : 10,
//分页选项,下拉菜单
perPageOptions : [ 10, 20, 30, 40, 50 ],
//当页码重新变更后自动触发的方法
onChange : function() {
}};
})
</script>
五、在前端的.html文件中写一个分页方法,请求后端数据。而且前端的.html文件中的方法名称不一定要和后端的方法名称一样。
//这个前端的方法名称findPage不一定要和后端的findPage方法名称一样,可以随意取
//只不过去一样的名称好辨别一些。
$scope.findPage = function(){
$scope.entity02 = {
pageNum: $scope.paginationConf.currentPage,
sizeNum: $scope.paginationConf.itemsPerPage
};
$http.post('../brand/findPage.do',$scope.entity02).success(
function(response){
//显示当前一页的[{},{},...{}]内容
$scope.list = response.rows;
//更改更新总记录数,更改此变量值,前端分页控件
//自动获得值
$scope.paginationConf.totalItems = response.total;
}
);
}
六、如何调用分页方法
<script type="text/javascript">
var app = angular.module('pinyougou',['pagination']);//在js里可以用单引也可以用双引
app.controller('brandController',function($scope,$http){
//查询品牌列表数据
$scope.findAll = function(){
//之前的访问json的路径是http://localhost:9101/brand/findAll.do
//则现在,在brand.html文件../返回根目录,webapp根目录,再寻找/brand/findAll.do
$http.get('../brand/findAll.do').success(
function(response){
$scope.list = response;
}
);
}
$scope.paginationConf = {
//当前页
currentPage : 1,
//总记录数
totalItems : 10,
//每页记录数
itemsPerPage : 10,
//分页选项,下拉菜单
perPageOptions : [ 10, 20, 30, 40, 50 ],
//当页码重新变更后自动触发的方法
onChange : function() {
$scope.findPage();
}};
//这个前端的方法名称findPage不一定要和后端的findPage方法名称一样,可以随意取
//只不过去一样的名称好辨别一些。
$scope.findPage = function(){
$scope.entity02 = {
pageNum: $scope.paginationConf.currentPage,
sizeNum: $scope.paginationConf.itemsPerPage
};
$http.post('../brand/findPage.do',$scope.entity02).success(
function(response){
//显示当前一页的[{},{},...{}]内容
$scope.list = response.rows;
//更改更新总记录数,更改此变量值,前端分页控件
//自动获得值
$scope.paginationConf.totalItems = response.total;
}
);
}
})
</script>
七、目前brand.html文件的全部内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>品牌管理</title>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<!-- 分页组件开始 -->
<script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" htef="../plugins/angularjs/pagination.css"></link>
<!-- 分页组件结束 -->
<script type="text/javascript">
var app = angular.module('pinyougou',['pagination']);//在js里可以用单引也可以用双引
app.controller('brandController',function($scope,$http){
//查询品牌列表数据
$scope.findAll = function(){
//之前的访问json的路径是http://localhost:9101/brand/findAll.do
//则现在,在brand.html文件../返回根目录,webapp根目录,再寻找/brand/findAll.do
$http.get('../brand/findAll.do').success(
function(response){
$scope.list = response;
}
);
}
$scope.paginationConf = {
//当前页
currentPage : 1,
//总记录数
totalItems : 10,
//每页记录数
itemsPerPage : 10,
//分页选项,下拉菜单
perPageOptions : [ 10, 20, 30, 40, 50 ],
//当页码重新变更后自动触发的方法
onChange : function() {
$scope.findPage();
}};
//这个前端的方法名称findPage不一定要和后端的findPage方法名称一样,可以随意取
//只不过去一样的名称好辨别一些。
$scope.findPage = function(){
$scope.entity02 = {
pageNum: $scope.paginationConf.currentPage,
sizeNum: $scope.paginationConf.itemsPerPage
};
$http.post('../brand/findPage.do',$scope.entity02).success(
function(response){
//显示当前一页的[{},{},...{}]内容
$scope.list = response.rows;
//更改更新总记录数,更改此变量值,前端分页控件
//自动获得值
$scope.paginationConf.totalItems = response.total;
}
);
}
})
</script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandController" >
<!-- .box-body -->
<div class="box-header with-border">
<h3 class="box-title">品牌管理</h3>
</div>
<div class="box-body">
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
<button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
</div>
</div>
</div>
<div class="box-tools pull-right">
<div class="has-feedback">
</div>
</div>
<!--工具栏/-->
<!--数据列表-->
<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="" style="padding-right:0px">
<input id="selall" type="checkbox" class="icheckbox_square-blue">
</th>
<th class="sorting_asc">品牌ID</th>
<th class="sorting">品牌名称</th>
<th class="sorting">品牌首字母</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in list">
<td><input type="checkbox"></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.firstName}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>
</td>
</tr>
</tbody>
</table>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
<tm-pagination conf="paginationConf" ></tm-pagination>
</div>
<!-- /.box-body -->
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">品牌编辑</h3>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped" width="800px">
<tr>
<td>品牌名称</td>
<td><input class="form-control" placeholder="品牌名称" > </td>
</tr>
<tr>
<td>首字母</td>
<td><input class="form-control" placeholder="首字母"> </td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>
结果: