分页查询

分页查询

简介：分页查询的传递值以及返回值需要进行封装
1.封装查询条件

import java.io.Serializable;

/**
 * 封装查询条件
 */
public class QueryPageBean implements Serializable{
    private Integer currentPage;//页码
    private Integer pageSize;//每页记录数
    private String queryString;//查询条件

    public Integer getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(Integer currentPage) {
        this.currentPage = currentPage;
    }

    public Integer getPageSize() {
        return pageSize;
    }

    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }

    public String getQueryString() {
        return queryString;
    }

    public void setQueryString(String queryString) {
        this.queryString = queryString;
    }
}

2.分页结果封装对象

import java.io.Serializable;
import java.util.List;

/**
 * 分页结果封装对象
 */
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;
    }
}

UI页面
查询输入框

<el-button @click="_findPage()" class="dalfBut">查询</el-button>

分页条代码

<div class="pagination-container">
	<el-pagination
		class="pagiantion"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="pagination.total">
	</el-pagination>
</div>

Vue

 var vue = new Vue({
        el: '#***',
        data: {
            pagination: {//分页相关属性
                currentPage: 1,
                pageSize: 4,
                total: 100,
                queryString: null,
            },
            dataList: [],//列表数据
        },
        created() {
            this.findPage();
        },
        methods: {
        	//分页查询
        	//查询按钮访问第一页
         	_findPage() {
                this.pagination.currentPage = 1;
                this.findPage()
            },
            findPage() {
                var param = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.pagination.queryString
                };
                axios.post("/****/findPage.do", param).then((res) => {
                    this.pagination.total = res.data.total;
                    this.dataList = res.data.rows
                })
            },
            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage();
            }
        }
    })

三层架构的业务处理
Controller
提示：Service接口

    @Reference
    private Service service;
@RequestMapping("/findPage")
    public PageResult findPage(@RequestBody QueryPageBean queryPageBean) {
        PageResult pageResult = service.findPage(queryPageBean);
        return pageResult;
    }

Service

public PageResult findPage(QueryPageBean queryPageBean) {
        Integer currentPage = queryPageBean.getCurrentPage();
        Integer pageSize = queryPageBean.getPageSize();
        String queryString = queryPageBean.getQueryString();
        PageHelper.startPage(currentPage, pageSize);
        Page<Setmeal> page = ***Dao.findPage(queryString);
        return new PageResult(page.getTotal(), page.getResult());
    }

Dao
分页插件的依赖
提示：版本号没有指定

		<dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
        </dependency>

SqlMapConfig.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <plugins>
        <!-- com.github.pagehelper 为 PageHelper 类所在包名 -->
        <plugin interceptor="com.github.pagehelper.PageHelper">
            <!-- 设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL 六种数据库-->
            <property name="dialect" value="mysql"/>
            <property name="reasonable" value="true"/>
        </plugin>
    </plugins>
</configuration>