本节我们实现课程、专栏详情页的设计和具体实现，我们需要完成以下任务：

• 详情页设计；
• 编写服务端接口；
• 编写前端页面。

# 页面设计

课程、专栏详情页设计非常相似，因此统一处理。它们由 3 部分构成：

• 课程/专栏简介：不同点是专栏没有价格；
• 详情/目录：不同点是专栏没有目录；
• 推荐列表：暂时显示最新的两个。

# 接口实现

我们需要实现两个接口：

• /course/[id]：获取指定课程详情
  • 返回 { ok: boolean, data: { item: Course, recommend: Course[] }}
• /column/[id]：分页获取专栏列表
  • 返回 { ok: boolean, data: { item: Column, recommend: Column[] }}

更新两个 repository，columnRepository.ts

javascript
复制代码export async function getColumnById(id: number): Promise<Column | null> {
  const result = await prisma.column.findFirst({
    where: {
      id,
    },
  })
  return result
}

courseRepository.ts：这里涉及关联数据 catalogue 查询

javascript
复制代码export async function getCourseById(id: number): Promise<Course | null> {
  const result = await prisma.course.findFirst({
    where: {
      id,
    },
    include: { Catalogue: true },
  })
  return result
}

分别实现 course 和 column 接口，server/api/course/[id].ts

php
复制代码import { getCourseById, getCourses } from '~/server/database/repositories/courseRepository'

export default defineEventHandler(async (e) => {
  const id = e.context.params?.id ? parseInt(e.context.params.id) : undefined
  if (!id)
    return sendError(e, createError({ statusCode: 400, statusMessage: '参数错误' }))
  try {
    const course = await getCourseById(id)
    if (!course)
      return sendError(e,