本节我们实现课程页面、专栏页面的设计和具体实现，我们需要完成以下任务：
- 课程页、专栏页设计；
- 编写数据接口；
- 编写前端页面。
# 页面设计
课程页和专栏页的设计非常相似，因此统一处理。它们由 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(<
