增删改查前后端完整项目可以去这个文章：
https://blog.csdn.net/Ronion123/article/details/132227361?spm=1001.2014.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); }