Appreciate life and record it

实现较为简单的后端分页

用go做了一个简单的后端分页
 Posts  2050  5   

背景

  • 之前在数据量不大的情况下，使用ui-grid能够非常方便做到前端分页，那时候把所有数据全部加载过来，搜索也非常方便
  • 而如果全局数据比较多，并且全表的话，在大型业务场景肯定是不合适的，比如最近在弄得cmdb部分，所以决定使用后端分页

后端部分

数据模型

由于之前没做过，所以参考了网上的设计，采用sql的limit+offset的设计, Host表是主机表, VHost表是要绑定的分页回传结果切片, 其他表都是关联表哈,不再赘述

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

type Host struct {
	gorm.Model

	Hostname    string `json:"hostname"`
	TID         uint   `json:"tid"`
	OS          string `json:"os"`
	Cores       uint   `json:"cores"`
	MemorySize  uint64 `json:"memory_size"`
	Status      uint   `json:"status"`
	Description string `json:"description"`
	Extras      string `json:"extras"`
	Uptime      uint64 `json:"uptime"`
	CreatedBy   uint   `json:"created_by"`
	UpdatedBy   uint   `json:"updated_by"`
}
type VHost struct {
	ID          uint   `json:"id"`
	Hostname    string `json:"hostname"`
	HType       string `json:"htype"`
	OS          string `json:"os"`
	IP          string `json:"ip"`
	Status      uint   `json:"status"`
	Description string `json:"description"`
	CID         string `json:"cid"`
	Cluster     string `json:"cluster"`
	AID         string `json:"aid"`
	App         string `json:"app"`
	PID         string `json:"pid"`
	Product     string `json:"product"`
}

分页部分

我只展示相关逻辑了哈

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

func GetVerboseHostsWithPage(data map[string]interface{})([]*VHost, error) {
    var vhosts []*VHost
    newdb := db.New()
    err := newdb.Debug().Table("host").Select("host.id as id, ..., app_id as aid, ...").Order("host.hostname ASC").Group("hostname").Joins("left join ...").Joins("left join ...")\
.Limit(pagesize).Offset((pagenum - 1) * pagesize).Scan(&vhosts).Error
    if err != nil {
        return nil, err
    }
    return vhosts, nil
}

这里顺带补充两点

一个host可能有多个ip，如何join

这里其实熟悉sql的同学应该知道group_concat, 直接group_concat不行,还要注意distinct，否则会出现重复的 MariaDB [op]> select host.hostname, group_concat(distinct(host_ip.ip)) from host left join host_ip on host.id = host_ip.h_id; ———–———————————————————————————————————————————————————————————-+

hostname group_concat(host_ip.ip)

———–———————————————————————————————————————————————————————————-+

test1.com 192.168.0.50,192.168.8.8,223.223.223.223,192.168.0.169,192.168.0.245,192.168.0.244,192.168.0.245,192.168.0.245,192.168.0.246,192.168.0.167,192.168.0.248,192.168.0.249

———–———————————————————————————————————————————————————————————-+ 需要加上group by 对hostname进行分组并进行统计，对于这种事情，一般是找聚合函数 MariaDB [op]> select host.hostname, group_concat(host_ip.ip) as ips from host left join host_ip on host.id = host_ip.h_id group by host.hostname; ———————————————————+

hostname ips

———————————————————+

test1 192.168.0.245
test1.com 72.x.21.3
test2 192.168.0.244
test2.idc.com 192.168.0.50,192.168.8.8,223.223.223.223
test3 192.168.0.245
test4 192.168.0.169
test5 192.168.0.245
test6 192.168.0.246
test7 192.168.0.167
test8 192.168.0.248
test9 192.168.0.249

———————————————————+

我发现&scan后，还是获取不到一些结果，开始怀疑人生中

后来发现debug出来的sql是能展示出来的，所以想到gorm对驼峰命名会进行处理，所以把aid改成a_id就可以了

后来我加上了返回total数目的逻辑，但是第一次分页可以，第二次分页就失败no sql row啥的

网上说把total放到前面，第二次可以了，第三次好像不行了 后来排查因为我一直用一个gorm.DB, 所以我想copy下数据库链接，检查下gorm的源码，有一个New函数，copy下就好了 newdb := db.New()

前端部分

获取结果

在搞前端前，确认pagenum和pagesize传过来能获取到指定的结果, 确定能获取到你想要的结果后，就可以设计表单 直接上代码

html部分 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<ul class="pagination shadowed op-cmdb-page-ul pull-left">
  <!--li>共有{{total}}条, 每页显示:<input type="number" class="form-control" ng-model="pagesize">条-->
  <li>
    <a ng-click="beforePage()">
      <span><i class="fa fa-angle-left"></i></span>
    </a>
  </li>
  <li ng-repeat="page in [] | range:1:pagetotal+1" class="cmdb-list-page-li"><a ng-click="goToPage(page)" class="cmdb-list-page-link">{{page}}</a></li>
  <li>
    <a ng-click="nextPage()">
      <span><i class="fa fa-angle-right"></i></span>
    </a>
  </li>
</ul>
<div class="cmdb-list-total pull-left">
  <span class="totalspan">共&nbsp;<b>{{total}}&nbsp;</b>条记录,</span>
  <span class="pagespan">每页显示:&nbsp;<b><input type="number" ng-keyup="pageSizeChange()" class="cmdb-pageinput" ng-model="pagesize" ng-init="pagesize">&nbsp;</b>条</span>
</div>

html用了float的形式，中间设置了margin就可以啦，具体css不展示

js部分 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

app.controller("CMDBListCtl", function($http, $scope, Popeye){
  $scope.top_title = "资产列表";
  $scope.pagesize = 5;
  $scope.pagetotal = 0;
  $scope.checkAll = false;
  $scope.selected = false;
  $scope.selectData = [];

  $http({
    method: 'GET',
    url: '/api/v1/hosts?pagenum=1&pagesize=5',
  }).then(function successCallback(response){
    $scope.hosts = response.data.data.hosts;
    $scope.total = response.data.data.total;
    $scope.pagetotal = Math.ceil($scope.total / $scope.pagesize);
    console.log($scope.pagetotal)
    $scope.page = 1;
  })
  $scope.beforePage = function(){
    if ($scope.page > 1) {
      $scope.page = $scope.page - 1;
    } else {
      return;
    }
    $http({
      method: 'GET',
      url:'/api/v1/hosts?pagenum='+$scope.page+'&pagesize='+$scope.pagesize,
    }).then(function successCallback(response){
      $scope.hosts = response.data.data.hosts;
      $scope.total = response.data.data.total;
    })
  }
  $scope.nextPage = function() {
    if ($scope.page < $scope.pagetotal) {
      $scope.page = $scope.page + 1;
    } else {
      return;
    }

    $http({
      method: 'GET',
      url:'/api/v1/hosts?pagenum='+$scope.page+'&pagesize='+$scope.pagesize,
    }).then(function successCallback(response){
      $scope.hosts = response.data.data.hosts;
      $scope.total = response.data.data.total;
    })
  }
  $scope.goToPage = function(page) {
    if(page == $scope.page){
      return
    }
    $scope.page = page;
    $http({
      method: 'GET',
      url: '/api/v1/hosts?pagenum='+page+'&pagesize='+$scope.pagesize,
    }).then(function successCallback(response){
      $scope.hosts = response.data.data.hosts;
      $scope.total = response.data.data.total;

    })
  }
  $scope.pageSizeChange = function (){
    setTimeout(function(){
      var now_pagetotal = Math.ceil($scope.total / $scope.pagesize);
      $scope.page = 1;
      if($scope.pagesize > 0) {
        if($scope.pagetotal >= 1 && now_pagetotal != $scope.pagetotal){
          $http({
            method: 'GET',
            url:'/api/v1/hosts?pagenum='+$scope.page+'&pagesize='+$scope.pagesize,
          }).then(function successCallback(response){
            $scope.hosts = response.data.data.hosts;
            $scope.total = response.data.data.total;
          })
          $scope.pagetotal = Math.ceil($scope.total / $scope.pagesize);
          $scope.page = 1;
        }
       }
    }, 500)
  }
})
js部分说明

代码比较粗糙

  • 分页基本分为上一页，下一页，点击页码，选择pagesize，上面函数一一对应，我做了一些额外处理，比如如果页面没变化，没必要请求

页面超过左右阈值，则return

  • 由于查询我还没写，后续会继续更新这部分逻辑

最终效果如下

../../images/pages-demo.jpg◎ ../../images/pages-demo.jpg

总结

  • 后端分页能够大大减少db查询的压力，如果前端查询数据量过大，后端分页是一种思路，当然可以配合缓存
  • 后端sql通过limit+offset实现
  • 前端需要注意尽量少的减少不必要的page查询