JAVA分页之假分页------逻辑分页

逻辑分页就是将数据全部获取到前端，进行数据的分页，

首先是获取后端数据，

  //创建datasource连接池
        DataSource dataSource = DruidUtil.getDataSource();
        //创建 dbutils封装jdbc类
        QueryRunner runner = new QueryRunner(dataSource);
        List<addresslist> query=null;
        try {
            query = runner.query("select * from addresslist", new BeanListHandler<addresslist>(addresslist.class));
            // 解决中文乱码的问题
            resp.setContentType("text/html;chareset=utf-8");
            resp.setCharacterEncoding("utf-8");
            //将数据响应给前端
            resp.getWriter().write(JSON.toJSONString(query));

        } catch (SQLException e) {
            throw new RuntimeException(e);
        }

因为我是使用的vue进行获取的数据

 <!--分页组件-->
    <div class="block" style="margin-top:15px;">
      <el-pagination
          align='center'
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1,3,5,7]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
      </el-pagination>
    </div>

这是获取数据的界面

 data(){
    return{
      bookValue: "",
      filterTableData: [],

      //定义数据
      loading:false,
      tableData:[],
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 1 ,// 每页的数据条数


    }
  },
  //在页面生成之前，去执行的钩子函数
  created() {
    //像后端发出请求获取数据
    this.loadDate();

  },
  //定义方法
  methods: {
    //分页效果实现
    handleSizeChange(val) {
      console.log('每页 ${val} 条');

      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log('当前页: ${val}');

      this.currentPage = val;
    },

    loadDate() {
      //开启loading
      this.loading = true;
      //访问后端的接口
      return this.$axios.get("http://localhost:8088/select").then((res) => {
        //获取到了后端响应的数据，并输出到了控制台
        console.log(res);

        this.tableData = res.data;

        //关闭懒加载圈
        this.loading = false;
      })
    },
  }

要解决跨域的问题

 // 添加跨域CORS
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("application/json; charset=utf-8");
        resp.setHeader("Access-Control-Allow-Credentials","true");
        resp.setHeader("Access-Control-Allow-Origin", req.getHeader("Origin"));
        resp.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        resp.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH");

还有要牢记vue和路由和视图显示，还有element-ui的版本问题，太高不会显示出数据。