SSMP integration case (14) Change interface query to paging query

After the previous articles, the basic environment of our project is set up,
but the pagination below is obviously a decoration.
insert image description here
Here we will first change the query method to paging.

We made this paging function before in our java project
insert image description here
, then our vue project directly adds the corresponding function to bookApi.js under api under src

export function getPage(params){
    
    
    return request({
    
    
        url:`/books/page`,
        method:'get',
        params:params,
    })
}

Because @GetMapping("/page") is hung separately on our paging method and declares one more path, so here we are /books/page

Then we come to the App.vue component, and we
insert image description here
can see that the getAll function is called in our statement cycle to query all the functions, and our data has actually written the pagination parameters before. First, we

introduce our in App.vue Just wrote getPage

Then we write a getPages function separately in this component

getPage(data).then(res => {
    
    
  if(res.state == 200) {
    
    
     this.total = res.data.total;
     this.bookList = res.data.records;
   }else{
    
    
     this.$message.error(res.message);
   }
 })

Then call it in mounted and
insert image description here
run the code

, you can see that the effect of our pagination below is also out

Then we need to change the global query code we called before. In fact, there are only two places. One is the getAll passed to bookFill in the App component,
insert image description here
and the other is the getAll after the deletion is successful.

Here we have replaced it with getPages
. more is better

But we will find that there is no response to clicking the second page now,
insert image description here
because we have not written a logic to switch the current page,
we will change the code of the paging component to this

<el-pagination
   background
  :page-size="page.pageSize"
  :page-count="page.pageCount"
  layout="sizes, prev, pager, next"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :total="total">
</el-pagination>

First of all, we changed the layout.
The most obvious change is the initial sizes, which can adjust the number of display items per page.
insert image description here
Then size-change is a method triggered when the user switches the number of display items per page. current-change is a function triggered when the user switches the current page.

We can write these two corresponding functions in methods

handleSizeChange(value) {
    
    
 this.page.pageCount = 1;
  this.page.pageSize = value;
  this.getPages();
},
handleCurrentChange(value) {
    
    
  this.page.pageCount = value;
  this.getPages();
},

insert image description here
When the user switches the current page, we directly change the this.page.pageCount of the current page and then re-call the query.
Then when the user switches the current page to display how many items, first change the current page back to the first page. During development, I suggest that as long as the query conditions change Changing the current page to the first page can avoid a lot of problems because the total number of pages of data found will be different because of different conditions.
For example, you are currently changing the conditions on the fifth page, but his condition can only find four pages of data and then The 5 you posted on the current page will naturally cause problems,
okay then we run the code

It can be seen that there is obviously no problem when we click on the second page
insert image description here
, and then we adjust the number of items displayed on each page to 20

You can see that our pagination is also processed in a timely manner
insert image description here

SSMP integration case (14) Change interface query to paging query

Guess you like