本节我们完成用户中心的设计与实现，用户中心主要显示用户信息，我们计划完成以下功能：
- 已购课程；
- 修改资料；
- 修改密码；
- ……
# 页面设计
下面是用户中心页面的草图：
# 接口实现
我们需要实现以下几个接口：
- /purchased-course：已购课程
- method: get
- 返回 { ok: boolean, data: Course[] }
- /userinfo：更新用户信息
- method：post
- Body: User
- 返回 { ok: boolean }
- /changePwd: 改密码
- method：post
- body: { oldPwd: string, newPwd: string }
- 返回 { ok: boolean }
创建 server/api/purchased-course.ts
javascript
复制代码import { isNuxtError } from 'nuxt/app'
import { getCoursesByUser } from '../database/repositories/orderRepository'
import { getTokenInfo } from '../database/service/token'
export default defineEventHandler(async (e) => {
try {
const token = getTokenInfo(e)
if (isNuxtError(token))
return token
const courses = await getCoursesByUser(token.id)
return { ok: true, data: courses }
}
catch (error) {
return sendError(e, createError('获取数据失败'))
}
})
@前端进阶之旅: 代码已经复制到剪贴板
server/database/repositories/orderRepository.ts
javascript
复制代码export async function getCoursesByUser(userId: number) {
const orders = await prisma.order.findMany({
where: {
userId,
},
include: {
course: {
select: {
id: true,
title: true,
cover: true,
},
},
},
})
const courses = orders.flatMap(order => order.course)
const uniqueCourses = courses.filter((course, index, arr) => arr.findIndex(c => c.id === course.id) === index)
return uniqueCourses
}
