vue调用后端接口实现分页

增删改查前后端完整项目可以去这个文章：

/Ronion123/article/details/132227361?spm=1001..3001.5502

1.vue下载路由

npm install vue-router@^3.5.1

2.前端

<table style="width: 100%"><tbody><tr v-for="item in tableData" :key="item.id"><td align="center"><input type="checkbox" :value="item.id" @change="Checkbox" /></td><td align="center" height="50px">{{ item.title }}</td></tr></tbody></table><div><button @click="prevPage" :disabled="pageIndex === 1">上一页</button><span> {{ pageIndex }}</span><button @click="nextPage" :disabled="pageIndex === totalPage">下一页</button><span><select v-model="pageIndex" @change="goToPage"><option v-for="page in totalPage" :key="page">{{ page }}</option></select></span><br><span>总页数：{{ totalPage }}</span><br><span>总数据：{{ totalCount }}</span></div>

<script>export default {data() {return {form: {title: "",},tableData: [],pageIndex: 1,//初始页数pageSize: 5,//每页数据数totalPage: 0,//页数totalCount:0,//数据数};},mounted() {// 初始化加载数据this.list();},methods: {//显示分页查询结果list() {// 发起请求获取数据this.axios.get("http://localhost:5200/api/Todos/GetUsers?PageIndex="+this.pageIndex+"&PageSize="+this.pageSize).then((res) => {this.totalCount=res.data.totalCount;//数据总数量this.tableData = res.data.items;// 将每页5个数据绑定数据到数组this.totalPage =Math.ceil(res.data.totalCount / this.pageSize); // 总页数=数据总数/单页数据数，并向上取整}).catch((error) => {console.error(error);});},prevPage() {// 上一页if (this.pageIndex > 1) {this.pageIndex--;this.list();}},nextPage() {// 下一页if (this.pageIndex < this.totalPage) {this.pageIndex++;this.list();}},//通过下拉框到达指定页数goToPage() {this.axios.get("http://localhost:5200/api/Todos/GetUsers?PageIndex="+this.pageIndex+"&PageSize="+this.pageSize).then((res) => {this.totalCount=res.data.totalCount;this.tableData = res.data.items;this.totalPage =Math.ceil(res.data.totalCount / this.pageSize);}).catch((error) => {console.error(error);});},};</script>

2.后端

/// <summary>/// 分页查询/// </summary>/// <param name="page"></param>/// <returns></returns>[HttpGet]public ActionResult<IEnumerable<Daily>> GetUsers([FromQuery] Page page){//创建了一个查询变量query，//使用db.Queryable<Daily>()生成一个查询对象//可以根据需要添加其他查询条件var query = db.Queryable<Daily>();//用于存储查询结果总数var totalCount = 0;//使用ToPageList方法对查询结果进行分页查询。//page.PageIndex表示当前页索引//page.PageSize表示每页的数据条目数量//totalCount是用于存储查询结果总数的引用var userList = query.ToPageList(page.PageIndex, page.PageSize, ref totalCount);// 返回结果//构造了一个包含totalCount和userList的匿名对象作为结果var result = new{TotalCount = totalCount,Items = userList};return Ok(result);}