LeiBoWen/en-edu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(grade): 添加年级列表及分页功能

Browse Source 
- 前端新增年级列表展示表格和分页组件，同时支持加载状态显示
- 新增 grade.js 接口调用，支持分页查询年级数据
- 后端新增 GradeController 提供分页查询接口 /grade/list
- 实现 GradeService 新增分页查询和总数量统计方法
- 添加 GradeDOMapper 新增分页查询及计数 SQL 语句
- 定义请求与响应VO类用于年级分页查询接口数据传输
- 页面 onMounted 时同时请求班级列表和年级列表数据，提升数据展示完整性
This commit is contained in:
lbw
2025-12-15 10:45:15 +08:00
parent ef48923422
commit 857fa85c74
9 changed files with 159 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
enlish-service/src/main/java/com/yinlihupo/enlish/service/controller/GradeController.java Normal file
View File

@@ -0,0 +1,41 @@
package com.yinlihupo.enlish.service.controller;
import com.yinlihupo.enlish.service.domain.dataobject.GradeDO;
import com.yinlihupo.enlish.service.model.vo.grade.FindGradeListReqVO;
import com.yinlihupo.enlish.service.model.vo.grade.FindGradeListRspVO;
import com.yinlihupo.enlish.service.service.GradeService;
import com.yinlihupo.framework.biz.operationlog.aspect.ApiOperationLog;
import com.yinlihupo.framework.common.response.PageResponse;
import jakarta.annotation.Resource;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@RequestMapping("/grade")
public class GradeController {
@Resource
private GradeService gradeService;
@PostMapping("/list")
@ApiOperationLog(description = "查询年级列表")
public PageResponse<FindGradeListRspVO> findGradeList(@RequestBody FindGradeListReqVO findGradeListReqVO) {
Integer page = findGradeListReqVO.getPage();
Integer pageSize = findGradeListReqVO.getPageSize();
List<GradeDO> gradeList = gradeService.findGradeList(page, pageSize);
List<FindGradeListRspVO> list = gradeList.stream().map(gradeDO -> FindGradeListRspVO.builder()
.id(gradeDO.getId())
.title(gradeDO.getTitle())
.build()
).toList();
Integer gradeCount = gradeService.findGradeCount();
return PageResponse.success(list, page, gradeCount, pageSize);
}
}

4
enlish-service/src/main/java/com/yinlihupo/enlish/service/domain/mapper/GradeDOMapper.java
View File

@@ -10,4 +10,8 @@ public interface GradeDOMapper {
GradeDO selectById(Integer id);
List<GradeDO> selectByGradeIds(@Param("gradeIds") List<Integer> gradeIds);
List<GradeDO> selectList(@Param("startIndex") Integer startIndex, @Param("pageSize") Integer pageSize);
Integer selectCount();
}

16
enlish-service/src/main/java/com/yinlihupo/enlish/service/model/vo/grade/FindGradeListReqVO.java Normal file
View File

@@ -0,0 +1,16 @@
package com.yinlihupo.enlish.service.model.vo.grade;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
@AllArgsConstructor
@NoArgsConstructor
@Data
@Builder
public class FindGradeListReqVO {
Integer page;
Integer pageSize;
}

16
enlish-service/src/main/java/com/yinlihupo/enlish/service/model/vo/grade/FindGradeListRspVO.java Normal file
View File

@@ -0,0 +1,16 @@
package com.yinlihupo.enlish.service.model.vo.grade;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
@AllArgsConstructor
@NoArgsConstructor
@Data
@Builder
public class FindGradeListRspVO {
private Integer id;
private String title;
}

6
enlish-service/src/main/java/com/yinlihupo/enlish/service/service/GradeService.java
View File

@@ -2,7 +2,13 @@ package com.yinlihupo.enlish.service.service;
import com.yinlihupo.enlish.service.domain.dataobject.GradeDO;
import java.util.List;
public interface GradeService {
GradeDO findByClassId(Integer classId);
List<GradeDO> findGradeList(Integer page, Integer PageSize);
Integer findGradeCount();
}

12
enlish-service/src/main/java/com/yinlihupo/enlish/service/service/grade/GradeServiceImpl.java
View File

@@ -6,6 +6,8 @@ import com.yinlihupo.enlish.service.service.GradeService;
import jakarta.annotation.Resource;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class GradeServiceImpl implements GradeService {
@@ -16,4 +18,14 @@ public class GradeServiceImpl implements GradeService {
public GradeDO findByClassId(Integer classId) {
return gradeDOMapper.selectById(classId);
}
@Override
public List<GradeDO> findGradeList(Integer page, Integer PageSize) {
return gradeDOMapper.selectList((page - 1) * PageSize, PageSize);
}
@Override
public Integer findGradeCount() {
return gradeDOMapper.selectCount();
}
}

12
enlish-service/src/main/resources/mapper/GradeDOMapper.xml
View File

@@ -12,6 +12,7 @@
from grade
where id = #{id}
</select>
<select id="selectByGradeIds" resultMap="BaseResultMap">
select *
from grade
@@ -21,4 +22,15 @@
</foreach>
</select>
<select id="selectList" resultMap="BaseResultMap">
select *
from grade
limit #{startIndex},#{pageSize}
</select>
<select id="selectCount" resultType="java.lang.Integer">
select count(1)
from grade
</select>
</mapper>

8
enlish-vue/src/api/grade.js Normal file
View File

@@ -0,0 +1,8 @@
import axios from "@/axios";
export function getGradeList(page, size) {
return axios.post('/grade/list', {
page: page,
pageSize: size
})
}

50
enlish-vue/src/pages/class.vue
View File

@@ -7,24 +7,21 @@
<el-main class="p-4">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="lg:col-span-1 flex flex-col gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="text-lg font-semibold mb-4">班级列表</div>
<el-table :data="classes" border class="w-full" v-loading="loading">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="title" label="班级名称" min-width="120" />
<el-table-column prop="gradeName" label="年级" min-width="120" />
</el-table>
<div class="mt-4 flex justify-end">
<el-pagination background layout="prev, pager, next, sizes, total" :total="totalCount"
:page-size="pageSize" :current-page="pageNo" @current-change="handlePageChange"
@size-change="handleSizeChange" />
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 lg:col-span-1 lg:row-span-2">
@@ -32,9 +29,17 @@
<div class="text-gray-500">内容待完善</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<div class="text-lg font-semibold mb-4">左下卡片</div>
<div class="text-gray-500">内容待完善</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6" v-loading="gradeLoading">
<div class="text-lg font-semibold mb-4">年级列表</div>
<el-table :data="grades" border class="w-full">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="title" label="年级名称" min-width="160" />
</el-table>
<div class="mt-4 flex justify-end">
<el-pagination background layout="prev, pager, next, sizes, total" :total="gradeTotalCount"
:page-size="gradePageSize" :current-page="gradePageNo"
@current-change="handleGradePageChange" @size-change="handleGradeSizeChange" />
</div>
</div>
</div>
@@ -48,12 +53,18 @@
import Header from '@/layouts/components/Header.vue'
import { ref, onMounted } from 'vue'
import { getClassList } from '@/api/class'
import { getGradeList } from '@/api/grade'
const classes = ref([])
const pageNo = ref(1)
const pageSize = ref(10)
const totalCount = ref(0)
const loading = ref(false)
const grades = ref([])
const gradePageNo = ref(1)
const gradePageSize = ref(10)
const gradeTotalCount = ref(0)
const gradeLoading = ref(false)
async function fetchClasses() {
loading.value = true
@@ -69,6 +80,20 @@ async function fetchClasses() {
}
}
async function fetchGrades() {
gradeLoading.value = true
try {
const res = await getGradeList(gradePageNo.value, gradePageSize.value)
const d = res.data
grades.value = Array.isArray(d.data) ? d.data : []
gradeTotalCount.value = d.totalCount || 0
gradePageNo.value = d.pageNo || gradePageNo.value
gradePageSize.value = d.pageSize || gradePageSize.value
} finally {
gradeLoading.value = false
}
}
function handlePageChange(p) {
pageNo.value = p
fetchClasses()
@@ -79,7 +104,18 @@ function handleSizeChange(s) {
fetchClasses()
}
function handleGradePageChange(p) {
gradePageNo.value = p
fetchGrades()
}
function handleGradeSizeChange(s) {
gradePageSize.value = s
gradePageNo.value = 1
fetchGrades()
}
onMounted(() => {
fetchClasses()
fetchGrades()
})
</script>