分页查询

分页查询

<1>前端页面（使用ElementUI）

 <div class="filter-container">
                <el-input placeholder="编码/名称/助记码" v-model="pagination.queryString" style="width: 200px;"
                          class="filter-item" @keyup.enter.native="handleFilter"></el-input>
                <el-button @click="_findPage()" class="dalfBut">查询</el-button>
     </div>
 <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        @current-change="handleCurrentChange"//currentPage 改变时会触发
                        :current-page="pagination.currentPage"//当前页码
                        :page-size="pagination.pageSize"//每页显示几条数据
                        layout="total, prev, pager, next, jumper"//组件布局
                        :total="pagination.total">//总记录数
                </el-pagination>
            </div>

<2>js_Vue

var vue = new Vue({
        el: '#****',
        data: {
  pagination: {//分页相关属性
                currentPage: 1,
                pageSize: 3,
                total: 100,
                queryString: null,
            },
   dataList: [],//列表数据
 },
        created() {
        //页面创建时加载分页方法
            this.findPage();
              },
        methods: {
            //分页查询
            findPage() {
            //封装分页查询所需数据
                var param = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.pagination.queryString
                }
                axios.post('/setmeal/findPage.do', param).then((resp) => {
                //获取后端传入的数据
                    this.pagination.total = resp.data.total
                    this.dataList = resp.data.rows
                })
            },
            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage();
            }
        }
    })

<3>引入依赖

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

<4>配置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>

<5>后端代码
前端传入的数据要封装为实体：QueryPageBean（）
后端查询出的结果封装为实体：PageResult
采用三层架构：controller/service/dao
QueryPageBean

/**
 * 封装查询条件
 */
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;
    }

    @Override
    public String toString() {
        return "QueryPageBean{" +
                "currentPage=" + currentPage +
                ", pageSize=" + pageSize +
                ", queryString='" + queryString + '\'' +
                '}';
    }
}

PageResult

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

controller

@Reference
    private SetMealService setMealService;

    @RequestMapping("/findPage")
  public PageResult findPage(@RequestBody QueryPageBean queryPageBean){
        PageResult page = Service.findPage ( queryPageBean );
        return page;
    }

service

 @Autowired
    private SetMealDao setMealDao;
  @Override
    public PageResult findPage(QueryPageBean queryPageBean) {
        Integer currentPage = queryPageBean.getCurrentPage ();
        Integer pageSize = queryPageBean.getPageSize ();
        String queryString = queryPageBean.getQueryString ();
        PageHelper.startPage ( currentPage, pageSize );
        Page<***> page = lDao.findPage ( queryString );
        List<***> result = page.getResult ();
        long total = page.getTotal ();
        return new PageResult ( total, result );
    }

dao

 public Page<***> findPage(String queryString)

dao.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >

<mapper namespace="com.itheima.dao.SetMealDao">
    <select id="findPage" resultType="setmeal">
        select * from t_*
        <if test="value!=null and value.length>0">
            where helpCode like concat('%',#{value} ,'%') or
            name like concat('%',#{value} ,'%') or code=#{value}
        </if>
    </select>
</mapper>