Oracle/vue前后端分页

• 前言

  文章目录

  一、el-pagination是什么？

  二、使用步骤(前端部分)

  1.引入分页组件

  2.定义分页需要用到的属性例如:总记录数和条数

  3.书写前后端交互的代码,将条数总数分别渲染到指定区域

  三、使用步骤(后端端部分)

  1.层级代码

  2.分页sql(Oracle的写法)mysql用到的分页sql是limit

---

前言

在做开发的过程中难免会遇到数据很多查询慢影响效率的情况发生,所以这时候的解决办法大部分都会采用分页的技术,在这里也是自己写的分页和大家一起分享学习.

一、el-pagination是什么？

el-pagination是elementUI的的分页组件,可以给表单表格这些做数据分页使用详情可以去看他的官网:

Element - The world's most popular Vue UI frameworkElement - The world's most popular Vue UI framework

二、使用步骤(前端部分)

1.引入分页组件

代码如下（示例）：

<el-pagination background @current-change="pageNoChange" :current-page.sync="currentPage.pageNo" :page-size="10"
                                 layout="total, prev, pager, next" :total="currentPage.total" style="margin-top: 0;">
                                </el-pagination>

2.定义分页需要用到的属性例如:总记录数和条数

代码如下（示例）：

  //此代码在data里定义
                control: '1',
                currentPage: {
                    pageNo: 10,
                    total: 0
                },

---

3.书写前后端交互的代码,将条数总数分别渲染到指定区域

代码如下（示例）：

 pageNoChange() {
                let that = this;
                // that.currentPage.pageNo = 1;
                that.handleCurrents();
            },
            async handleCurrents(val) {
                let that = this;
                //服务器后端地址
                that.$axios.defaults.baseURL = '自己的路径';
                const {
                    data: result
                } = await this.$http.get('自己的路径')
                that.epcSheept = result[0].data; //根据自己的传参格式决定
                that.currentPage.total = result[0].count;//根据自己的传参格式决定
                this.epcSheept = JSON.parse(JSON.stringify(this.epcSheept));
                // 移除组件
                this.update = false
                // 在组件移除后，重新渲染组件
                // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
                this.$nextTick(() => {
                    this.update = true
                })
            },

三、使用步骤(后端端部分)

1.层级代码

代码如下（示例）：

//控制层
@RequestMapping("/自己路径")
public JSONArray getMedbm (Integer pageNo, Integer control){
    Integer pageCount = 10;//写死每页条数
    return medicineService.getMedbm(control,pageNo,pageCount);
}

//业务层接口

JSONArray getMedbm(Integer control, Integer pageNo, Integer pageCount);

//业务层代码

@Override
public JSONArray getMedbm(Integer control, Integer pageNo, Integer pageCount) {
    Integer startIndex = (pageNo-1) * pageCount+1;
    Integer endIndex = startIndex+pageCount-1;
    List data = new ArrayList();
    Map map = new HashMap();
    Integer count = 0;
    JSONArray js = new JSONArray();
    data = medicineMapper.getMedbm(startIndex, endIndex);
    count = medicineMapper.selectByNameNotControlCount();
    map.put("data",data);
    map.put("count",count);
    js.add(map);
    return js;
}

2.分页sql(Oracle的写法)mysql用到的分页sql是limit

代码如下（示例）：

@Select("SELECT * FROM (SELECT  ROWNUM RN, s.diagcode,s.diagname from 表名 s WHERE ROWNUM <= #{endIndex}) WHERE RN >= #{startIndex}")
List<VEpcDiag> getMedbm(@Param("startIndex") Integer startIndex, @Param("endIndex") Integer endIndex);

到这之后基本上前后端的分页就完成了,我的方法可能不适合所有人,但希望你们通过参考也能够用到帮助到大家,有更好的也可以留言一起讨论