我的设想

1.一次性将所有数据请求到，然后分成很多部分给前端来显示

（优点：一次性请求完成，无需再请求，缺点：可能用户并不需要用到全部的数据段，而且数据量大的话请求很慢，非常影响用户体验）

2.分若干步请求数据，用户点击到哪一页，数据库请求哪一个区间段的数据（推荐）

（优点：用户需要哪部分请求哪部分，不需要将所有数据都拿过来，缺点：数据来到有延迟，因为每一次点击都是一次请求）

难点

如何确定用户请求哪一段数据并返回给用户

实现

在sql语句中有两个参数limit和offset当然也可以只用一个limit，他们的作用是请求时返回相应区间的数据

limit和offset：limit后面跟需要的数据条数，offset后面跟起始查询位置（从0开始）

所以我们只需要对这两个参数做文章即可，前端确定表格展示多少行，共有多少页，每次点击到某一页时知道当前的页码即可。

我们只需要对前端所要展示的表格添加一个触发函数，当用户需要点击任意页时，返回此页的页数，根据表格展示每页多少条数据，可以将limit的值和offset的值计算并发送请求至后台，后台再将相应的数据返回，这样就可以达到所想要的效果。

效果展示&代码

此功能采用vue2+axios+php+element ui来实现
其实可以采用任意后端语言（java，php等）以及前端请求（axios，ajax等）来配合完成,主要是对SQL中limit和offset的用法进一步了解。

效果展示
在这里插入图片描述

代码展示

//我对axios进一步的封装
export async function MyAxios(url,parms,success,failure) {await axios.get(url,{params:parms}).then(response=> {success(response)},error=>{failure(error)})

//php
function getUserInfos($limits,$offsets){$sql="select account,place,lasttime,counts from vue_userInfo ORDER BY lasttime DESC limit $limits offset $offsets ";return json_encode(ExecuteQuery($sql));
}

//vue2代码
<template><div><el-tableclass="userTable":data="userData"borderstripemax-height=770pxhighlight-current-rowstyle="width: 100%"><el-table-columnprop="account"label="用户名"width="180"></el-table-column><el-table-columnprop="place"label="登录地址"width="180"></el-table-column><el-table-columnprop="counts"label="登录次数"></el-table-column><el-table-columnprop="lasttime"label="最近登录时间"></el-table-column></el-table><el-paginationstyle="margin-top:10px"backgroundlayout="prev, pager, next":page-size="15"@current-change="dealCurrentChange":current-page="currentPage":total="counts"></el-pagination></div>
</template><script>
import {MyAxios} from '../utils/Verify.js'export default {data() {return {userData:[],counts:0,currentPage:1,limits:15,offsets:0}},computed:{parms(){return {action:'SearchInfos',limits:this.limits,offsets:this.offsets}}},created() {this.initData()},mounted() {console.log(this.account+"------"+this.password);},methods: {// 初始化数据initData(){this.offsets=0;MyAxios('/VDB/',this.parms,res=>{this.counts=JSON.parse(res.data.counts);this.userData=JSON.parse(res.data.Userlist)},error=>{console.log(error.message);})},// 处理页码改变时dealCurrentChange(val){this.offsets=(val-1)*this.limitsMyAxios('/VDB/',this.parms,res=>{this.userData=[];this.userData=JSON.parse(res.data.Userlist)},error=>{console.log(error.message);})},},}
</script>
//此处需要用到vue的一系列知识点，不采用vue可以只看methods中的方法，只需要明白逻辑即可