当前位置：首页 > news >正文

微服务项目-＞在线oj系统(Java-Spring)---分页功能

news 2025/9/30 14:47:22

后端代码

引入依赖

<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>${pagehelper.boot.version}</version></dependency>

使用方法

进行分页操作

前端传入分页参数，后端根据参数进行分页

分页

返回搜索出的列表

传入参数：每页几个，现在是第几页

对返回值进行处理

new PageInfo(list).total获得查询出的所有结果数目

前端开发

布局代码

Question.vue

<template><el-form inline="true"><el-form-item><selector placeholder="请选择题目难度" style="width: 200px;"></selector></el-form-item><el-form-item><el-input placeholder="请您输入要搜索的题目标题" /></el-form-item><el-form-item><el-button plain>搜索</el-button><el-button plain type="info">重置</el-button><el-button plain type="primary" :icon="Plus">添加题目</el-button></el-form-item></el-form><el-table height="526px" :data="questionList"><el-table-column prop="questionId" width="180px" label="题目id" /><el-table-column prop="title" label="题目标题" /><el-table-column prop="difficulty" label="题目难度" width="90px"><template #default="{ row }"><div v-if="row.difficulty === 1" style="color:#3EC8FF;">简单</div><div v-if="row.difficulty === 2" style="color:#FE7909;">中等</div><div v-if="row.difficulty === 3" style="color:#FD4C40;">困难</div></template></el-table-column><el-table-column prop="createName" label="创建人" width="140px" /><el-table-column prop="createTime" label="创建时间" width="180px" /><el-table-column label="操作" width="100px" fixed="right"><template #default="{ row }"><el-button type="text">编辑</el-button><el-button type="text" class="red">删除</el-button></template></el-table-column></el-table>
</template>
<script setup>
import { Plus } from "@element-plus/icons-vue"
import Selector from "@/components/QuestionSelector.vue"
import { reactive,ref} from "vue";
const questionList = reactive([{questionId: '1',title: '题目1',difficulty: 1,createName: '超级管理员',createTime: '2024-05-30 17:00:00'},{questionId: '2',title: '题目2',difficulty: 2,createName: '超级管理员',createTime: '2024-05-30 17:00:00'},{questionId: '3',title: '题目1',difficulty: 3,createName: '超级管理员',createTime: '2024-05-30 17:00:00'}
]);
</script>

main.scss

.el-table {th {background-color: #32C5FF !important;color: #ffff;}
}.el-button--primary {color: #32c5ff !important;
}.el-button--text {color: #32c5ff !important;&.red span{color: #FD4C40;}
}.el-pagination {margin-top: 20px;justify-content: flex-end;.el-pager li.is-active {background-color: #32c5ff !important;}
}

在main.js中引入

公共组件（难度选择器）QuestionSelector.vue

<template><el-select><el-option v-for="item in difficultyList" :label="item.difficultyName" :value="item.difficulty"/></el-select>
</template><script setup>
import { reactive } from 'vue'const difficultyList = reactive([{"difficulty": 1,"difficultyName": "简单",},{"difficulty": 2,"difficultyName": "中等",},{"difficulty": 3,"difficultyName": "困难",}
]) 
</script>

效果展示

前后端交互

我们现在的数据是写死的，所以我们现在需要去访问后端数据

import service from '@/utils/request'export function getQuestionListService(params) {return service({url: "/question/list",method: "get",params,});
}

const params = reactive({pageNum: 1,pageSize: 10,difficulty: '',title: ''
})
const questionList = ref([])
async function getQuestionList() {const result = await getQuestionListService(params)console.log(result)questionList.value = result.rows
}
getQuestionList()

但是这个时候我们的分页功能还没出现

分页页面

这里我们也是引入Element*里面的组件

但是现在是英文，所以需要继续引入组件

但是这个时候，我们的total是写死的，这样的话，所以我们需要继续修改

在我们查询的时候就将total进行赋值

但是现在的效果是这样的，它默认展示是10，20，30，40，50，100

继续修改增加，page-size，指定我们想要的

结果展示

现在看起来是很正常的了

但是当我们想要切到第二页的时候，我们发现它的数据并没有改变

这是因为我们点击按钮的时候并没有通过后端获取信息

function handleSizeChange(newSize) {params.pageSize = newSizegetQuestionList()
}function handleCurrentChange(newPage) {params.pageNum = newPagegetQuestionList()
}

现在看起来好像没问题了，但是当我们如果正在看第二页的时候，如果切换每页数目，可能会丢失一些数据，所以我们继续修改