使用vue实现分页的逻辑并不复杂，接收后端传输过来的数据，然后根据数据的总数和每一页的数据量就可以计算出一共可以分成几页
我编写了一个简单的前端页面用来查询数据，页面一共有几个逻辑
具体的效果可以看下面的演示
下面就来看一下具体的实现步骤。
首先看一下vue的代码
Vue.createApp({data(){return {items : [],// 关键词keyword : "",// 是否没有数据isnull : false,// 一开始不显示上一页和下一页isshow : false,// 一共有多少条数据countInfo : 0,// 每一页显示几条数据pageSize : 10,// 当前是第几页currentPage : 1,// 一共有几页countAll : 1,code : 200}},methods: {search() {// 拿到待搜索的关键词var keyword = document.getElementById("keyword").value;console.log(keyword);this.keyword = keyword;this.currentPage = 1;var url = "http://localhost:8080/csdn/search/" + keyword + "/" + this.currentPage;console.log(url);axios.get(url).then((response) => {if(response.data.msg.count==0) {this.isnull = true;// 将原始数据置空this.items = [];// 不显示上一页下一页按钮this.isshow = false;} else {this.isnull = false;console.log(response)this.items = response.data.msg.list;this.countInfo = response.data.msg.count;// 计算一共有几页this.countAll = Math.ceil(response.data.msg.count / this.pageSize); this.isshow = true;}}).catch(function (error) {console.log(error);});},getNextPage() {if(this.currentPage == this.countAll) {this.currentPage = this.currentPage;} else {this.currentPage = this.currentPage + 1;}var url = "http://localhost:8080/csdn/search/" + this.keyword + "/" + this.currentPage;axios.get(url).then((response) => {console.log(response)this.items = response.data.msg.list;// 计算一共有几页this.countAll = Math.ceil(response.data.msg.count / this.pageSize); }).catch(function (error) {console.log(error);});},getPrePage() {if(this.currentPage == 1) {this.currentPage = 1;} else {this.currentPage = this.currentPage - 1;}var url = "http://localhost:8080/csdn/search/" + this.keyword + "/" + this.currentPage;axios.get(url).then((response) => {console.log(response)this.items = response.data.msg.list;// 计算一共有几页this.countAll = Math.ceil(response.data.msg.count / this.pageSize); }).catch(function (error) {console.log(error);});}},}).mount("#app");data()中返回了几个变量，
- items：用来存放待展示的数据项
keyword：记录本次查询使用的关键词
isnull：表示一次查询的结果数量是否为0，用来控制没有结果的显示逻辑
isshow：表示是否显示上一页下一页按钮，以及显示当前页数和数据总数
countInfo：记录一共有多少条结果
pageSize：记录每页显示的数据项，目前后端固定每页展示10条数据
currentPage：记录当前是第几页
countAll：记录一共有多少页数据
code：后端返回的一个状态码，没什么用
一共提供了三个方法进行查询
- search()：进行一个新的关键词的查询
- getNextPage()：查询下一页的数据，如果已经是最后一页了，则查询当前页的结果
- getPrePage()：查询上一页的数据，如果已经是第一页了，则查询当前页的结果
接着我们再来看一下后端返回的数据格式
上图中方框内的数据就是后端返回的数据，msg中记录的就是我们需要用到的数据，里面有交给数据项
- count：表示数据总数，只是查询数据总数，并不会将所有的数据都返回给前端
- list：返回当前页的数据
- page：表示当前是第几页
我们具体来看一下list中数据项的内容
可以发现list中的每一项就是构成我们前端页面中一行的数据，这在vue中体现为数据的绑定，下面就来看看详细的html代码
纳米搜索
{{item.title}}{{item.url}}文章作者：{{item.nick_name}}文章标签：{{item.tag}}发表时间：{{item.up_time}}阅读量：{{item.read_volum}}收藏量：{{item.collection_volum}}
非常抱歉，没有您想要的结果(。・＿・。)ﾉI’m sorry~第{{currentPage}}/{{countAll}}页共有{{countInfo}}条数据Vue.createApp({data(){return {items : [],// 关键词keyword : "",// 是否没有数据isnull : false,// 一开始不显示上一页和下一页isshow : false,// 一共有多少条数据countInfo : 0,// 每一页显示几条数据pageSize : 10,// 当前是第几页currentPage : 1,// 一共有几页countAll : 1,code : 200}},methods: {search() {// 拿到待搜索的关键词var keyword = document.getElementById("keyword").value;console.log(keyword);this.keyword = keyword;this.currentPage = 1;var url = "http://localhost:8080/csdn/search/" + keyword + "/" + this.currentPage;console.log(url);axios.get(url).then((response) => {if(response.data.msg.count==0) {this.isnull = true;// 将原始数据置空this.items = [];// 不显示上一页下一页按钮this.isshow = false;} else {this.isnull = false;console.log(response)this.items = response.data.msg.list;this.countInfo = response.data.msg.count;// 计算一共有几页this.countAll = Math.ceil(response.data.msg.count / this.pageSize); this.isshow = true;}}).catch(function (error) {console.log(error);});},getNextPage() {if(this.currentPage == this.countAll) {this.currentPage = this.currentPage;} else {this.currentPage = this.currentPage + 1;}var url = "http://localhost:8080/csdn/search/" + this.keyword + "/" + this.currentPage;axios.get(url).then((response) => {console.log(response)this.items = response.data.msg.list;// 计算一共有几页this.countAll = Math.ceil(response.data.msg.count / this.pageSize); }).catch(function (error) {console.log(error);});},getPrePage() {if(this.currentPage == 1) {this.currentPage = 1;} else {this.currentPage = this.currentPage - 1;}var url = "http://localhost:8080/csdn/search/" + this.keyword + "/" + this.currentPage;axios.get(url).then((response) => {console.log(response)this.items = response.data.msg.list;// 计算一共有几页this.countAll = Math.ceil(response.data.msg.count / this.pageSize); }).catch(function (error) {console.log(error);});}},}).mount("#app");使用vue编写前端动态页面真的比原生js或者jquery要方便很多，对比theamleaf也有很多好处。
我们在使用theamleaf的时候，每次提交表单都需要刷新页面，使用vue+axios进行ajax请求则不需要刷新页面，这不仅会减轻服务端的压力，而且可以带来更好的用户体验。