本节我们实现课程页面、专栏页面的设计和具体实现,我们需要完成以下任务:
- 课程页、专栏页设计;
- 编写数据接口;
- 编写前端页面。
# 页面设计
课程页和专栏页的设计非常相似,因此统一处理。它们由 3 部分构成:
- 面包屑;
- 内容列表;
- 分页器。

# 接口实现
我们需要实现两个接口:
- course:分页获取课程列表
- Query params:page和size
- 返回 { ok: boolean, data: { courses: Course[], total: number}}
- column:分页获取专栏列表
- Query params:page和size
- 返回 { ok: boolean, data: { columns: Column[], total: number}}
更新两个repository,columnRepository.ts
javascript
复制代码export async function getColumns({ page, size }): Promise<{ columns: Column[] | null; total: number }> {
const [columns, total] = await Promise.all([
prisma.column.findMany({
orderBy: { id: 'desc' },
skip: page * size,
take: size,
}),
prisma.column.count(),
])
return { columns, total }
}
@前端进阶之旅: 代码已经复制到剪贴板
courseRepository.ts
javascript
复制代码export async function getCourses({ page, size }): Promise<{ courses: Course[] | null; total: number }> {
const [courses, total] = await Promise.all([
prisma.course.findMany({
orderBy: { id: 'desc' },
skip: page * size,
take: size,
}),
prisma.course.count(),
])
return { courses, total }
}
@前端进阶之旅: 代码已经复制到剪贴板
分别实现 course 和 column 接口,server/api/course.ts
typescript
复制代码import { getCourses } from '../database/repositories/courseRepository'
export default defineEventHandler(<