《表格分页查询》

前言：

        项目架构：

                       前端框架：Angular6 + ng-zorro-antd

                       后端架构：SSM + Dubbo：springMVC + spring + myBatis-plus

        接下来请随小编来了解下myBatis-plus是如何实现分页查询的吧：

正文：

                                                                                                  前端

    一。可视化效果图

    

   二。前端技术实现步骤

        前提：使用Angular6+ng-zorro-antd

        2.1 table.component.html

<br>
<nz-table #filterTable #rowSelectionTable #nzTable nzShowSizeChanger [nzFrontPagination]="false" [nzLoading]="loading"
  [nzTotal]="total" [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" (nzPageIndexChange)="getTableData()"
  (nzPageSizeChange)="getTableData()" [nzData]="dataSet" [nzScroll]="{ x:'1300px'}" [nzFooter]="'共'+total+'项记录'">
  <thead (nzSortChange)="sort($event)" nzSingleSort>
    <tr>
      <th nzWidth="1%" nzLeft="0px" nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate"
        (nzCheckedChange)="checkAll($event)"></th>
      <th nzWidth="8%" nzLeft="65px" nzShowSort nzSortKey="userCode">学号</th>
      <th nzWidth="8%" nzShowFilter [nzFilters]="nameList" (nzFilterChange)="filter($event)">姓名</th>
      <th nzWidth="5%">性别</th>
      <th nzWidth="8%">电话</th>
      <th nzWidth="9%">部门</th>
      <th nzWidth="11%" nzShowSort nzSortKey="startTime">入职日期</th>
      <th nzWidth="11%">离职日期</th>
      <th nzWidth="5%" nzRight="0px">操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of nzTable.data">
      <td nzWidth="1%" nzLeft="0px" nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="refreshStatus()"></td>
      <td nzWidth="8%" nzLeft="65px">{{data?.userCode}}</td>
      <td nzWidth="8%">{{data?.userName}}</td>
      <td nzWidth="5%">{{data?.sex}}</td>
      <td nzWidth="8%">{{data?.telNum}}</td>
      <td nzWidth="9%">{{data?.deptName}}</td>
      <td nzWidth="11%">{{data?.startTime}}</td>
      <td nzWidth="11%">{{data?.endTime}}</td>
      <td nzWidth="5%" nzRight="0px">
        <a nz-tooltip nzTitle="编辑"><i nz-icon [iconfont]="'icon-bianji2'" (click)="editData(data)"></i></a>
        &nbsp;
        <a nz-tooltip nzTitle="删除"><i nz-icon [iconfont]="'icon-delete'" (click)="showConfirm(data)"></i></a>
      </td>
    </tr>
  </tbody>
</nz-table>

        2.2 table.component.ts

// angular框架本身依赖包
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpRequest, HttpClient, HttpEventType, HttpEvent, HttpResponse } from '@angular/common/http';

// 第三方组件库依赖包
import { NzIconService, NzModalRef, NzModalService, UploadXHRArgs } from 'ng-zorro-antd';
import * as endOfMonth from 'date-fns/end_of_month';

// 共享服务引用
import { InterceptorService } from 'src/app/shared/interceptor.service';
import { TipMessageService } from 'src/app/shared/tip-message.service';
import { ResponseCode } from 'src/app/shared/response-code.enum';

// 组件本身相关引用
import { TableModel } from './table-model';
@Component({
  selector: 'app-workspace-table',
  templateUrl: './table.component.html',
  styles: ['./table.component.less']
})
export class TableComponent implements OnInit {

  /*---------------CSS样例-----------------------------------------*/

  gridStyle = {
    width: '100%',
    textAlign: 'center',
    margin: '1%'
  };
  table_input_group_A = {
    width: '50%',
    'margin-left': '25%'
  };

  table_button_B = {
    color: '#1A8DFF',
    'border-color': 'rgb(163, 209, 255)',
    'margin-left': '1%'
  };

  table_delete_button_B = {
    color: '#1A8DFF',
    'border-color': 'rgb(163, 209, 255)',
    'float': 'right'
  };

  table_button_Q = {
    'border-color': 'rgb(163, 209, 255)',
    'margin-left': '1%'
  };

  table_button_R = {
    'background-image': 'initial',
    'background-position-x': 'initial',
    'background-position-y': 'initial',
    'background-size': 'initial',
    'background-repeat-x': 'initial',
    'background-repeat-y': 'initial',
    'background-attachment': 'initial',
    'background-origin': 'initial',
    'background-clip': 'initial',
    'background-color': 'rgb(242, 242, 242)',
    width: '10%',
    'margin-left': '37%',
    border: 'none'
  };

  table_button_Y = {
    margin: '1%'
  };

  table_upload_Z = {
    color: '#B7B7B7'
  };

  table_select_C = {
    width: '20%',
    'margin-left': '1%'
  };

  table_button_D = {
    color: '#1A8DFF',
    'border-color': 'rgb(163, 209, 255)'
  };

  table_button_H = {
    'margin': '1%'
  };

  table_panel_body_F = {
    height: '280px',
    'overflow-y': 'auto'
  };

  table_div_G = {
    border: '1px  #000000',
    width: '90%',
    margin: '0 auto'
  };
  table_div_H = {
    'margin-bottom': '16px'
  };

  table_label_I = {
    'font-size': '15px',
    'margin-left': '1.5%'
  };

  table_input_J = {
    width: '80%'
  };

  table_label_date_K = {
    'font-size': '15px',
    'margin-left': '-5%'
  };

  table_date_picker_L = {
    width: '100%'
  };

  table_select_M = {
    width: '80%'
  };

  table_range_picker_N = {
    color: 'red'
  };
  table_range_picker_O = {
    color: 'red',
    height: '10px'
  };
  table_range_picker_P = {
    color: 'red',
    height: '120%'
  };
  table_select_Z = {
    width: '100%'
  };

  /*-----------------------CSS样例-------------------------------------*/
  /*-----------------------变量声明------------------------------------*/
  allChecked = false;
  indeterminate = false;
  dataSet = [];
  pageIndex = 1;
  pageSize = 10;
  total = 1;
  // 加载中
  loading = true;

  /*------------------------------变量声明-------------------------------------*/


  /*-----------------------------方法区----------------------------------------*/
  /**
   * 构造函数
   *
   * @param http 网络协议
   * @param fb 表单
   * @param iconService 图标服务
   */
  constructor(
    public http: InterceptorService,
    private fb: FormBuilder,
    private iconService: NzIconService,
    private tipMsgService: TipMessageService
  ) {
    this.iconService.fetchFromIconfont({
      scriptUrl: this.http.getserverUrl('t/font_881737_v1umka8u21.js')
    });
  }



  /**
   * 页面初始化加载
   */
  ngOnInit(): void {
    //  表格数据初始化
    this.getTableData();
  }

  /**
   * 表格数据初始化查询
   */
  getTableData() {
    // const url = 'demo-web/foo/queryAllFoo/' + this.pageIndex + '/' + this.pageSize;
    const url = 'local-web/foo/queryPageAll/' + this.pageIndex + '/' + this.pageSize;
    this.http.get(url).subscribe(
      res => {
        if (res.json().code === ResponseCode.SUCCESSCODE) {
          if (res.json().data.length === 0) {
            this.tipMsgService.createMessage('温馨提示', '获取数据为空');
          } else {
            this.dataSet = res.json().data.list;
            this.dataSet.forEach(
              item => {
                this.orginNameList.push({ text: item.userName, value: item.userName });
              }
            );
            this.displayData = this.dataSet;
            this.nameList = this.orginNameList;
            this.total = res.json().data.total;
          }
        } else if (res.json().code === ResponseCode.FAILCODE) {
          this.tipMsgService.createMessage(ResponseCode.ErrorTip, '表格数据初始化查询失败');
        }
      }
    );
    // 数据加载延长时间--三秒
    window.setTimeout(() => {
      this.loading = false;
    }, 1000);
  }


}

                                                                                                   后端

  一。具体技术实现步骤

        1.1在pom文件中引入相关jar包

        <!--mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus</artifactId>
            <version>3.0.5</version>
        </dependency>
        <!--pagehelper-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
        </dependency>

        1.2 spring-mybatis.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd">
    <!--spring和mybatis完美结合，不需要mybatis的配置映射文件-->
    <!--<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"/>-->
    <bean id="sqlSessionFactory" class="com.baomidou.mybatisplus.extension.spring.MybatisSqlSessionFactoryBean">
        <!--与spring-db.xml有关-->
        <property name="dataSource" ref="dataSource"/>
        <property name="mapperLocations" value="classpath*:mapper/*.xml"/>
        <!--分页查询（mybatis3.2.8以上版本）-->
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <value>
                            helperDialect=mysql
                        </value>
                    </property>
                </bean>
            </array>
        </property>
        <!--配置mybatis的驼峰匹配-->
        <property name="configLocation" value="classpath:mapper/config/mybatis-config.xml"/>

        <!--全局配置-->
        <property name="globalConfig">
            <bean class="com.baomidou.mybatisplus.core.config.GlobalConfig">
                <property name="dbConfig">
                    <bean class="com.baomidou.mybatisplus.core.config.GlobalConfig.DbConfig">
                        <property name="logicDeleteValue" value="1"/>
                        <property name="logicNotDeleteValue" value="0"/>
                        <property name="idType" value="ID_WORKER_STR"/>
                    </bean>
                </property>
                <property name="sqlInjector" ref="logicSqlInjector"/>
                <property name="metaObjectHandler" ref="metaObjectHandler"/>
            </bean>
        </property>
    </bean>
    <bean id="logicSqlInjector" class="com.baomidou.mybatisplus.extension.injector.LogicSqlInjector"/>
    <bean id="metaObjectHandler" class="com.dmsdbj.itoo.tool.base.handler.MyMetaObjectHandler"/>

    <!--MyBatis Mapper Scan Config-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.dmsdbj.itoo.demo.provider.dao"/>
    </bean>

    <!--DAO接口所在包名，Spring会自动查找其下的类-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.dmsdbj.itoo.demo.provider.dao"/>
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
    </bean>
</beans>

        1.3具体业务逻辑实现

         1.3.1 controller层

 /**
     * 分页查询所有Foo
     *
     * @param pageNo   页码
     * @param pageSize 每页条数
     */
    @ApiOperation(value = "分页查询所有Foo")
    @GetMapping(value = {"/queryPageAll/{pageNo}/{pageSize}"})
    public ItooResult queryAllFoo(@ApiParam(name = "pageNo",value = "页码",required = true,example = "1")@PathVariable Integer pageNo,
								   @ApiParam(name = "pageSize",value = "页数",required = true,example = "10")@PathVariable Integer pageSize) {
        PageInfo<FooEntity> foos = fooService.queryPageAll(pageNo, pageSize);
        return ItooResult.build(ItooResult.SUCCESS, "查询成功", foos);
    }

        1.3.2 service层

public interface BaseServicePlus<T extends BaseEntity> extends Serializable, IService<T> {
    PageInfo<T> queryPageAll(int var1, int var2);
}

        1.3.3 serviceImpl层

public class BaseServicePlusImpl<M extends BaseMapper<T>, T extends BaseEntity> extends ServiceImpl<BaseMapper<T>, T> implements BaseServicePlus<T> {
    public BaseServicePlusImpl() {
    }

    public PageInfo<T> queryPageAll(int pageNo, int pageSize) {
        PageHelper.startPage(pageNo, pageSize);
        return new PageInfo(super.list((Wrapper)null));
    }
}

结语：