# 页面设计

下面是用户中心页面的草图：

# 接口实现

我们需要实现以下几个接口：

/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
}

@前端进阶之旅: 代码已经复制到剪贴板

更新用户信息，创建 server/api/userinfo.post.ts，同时修改 userinfo.ts 为 userinfo.get.ts，以区分两个接口：

javascript
复制代码import { isNuxtError } from 'nuxt/app'
import { updateUser } from '../database/repositories/userRepository'
import { getTokenInfo } from '../database/service/token'

export default defineEventHandler(async (e) => {
  // 验证权限
  const token = getTokenInfo(e)

  if (isNuxtError(token)) {
    return sendError(e, createError({
      statusCode: 401,
      statusMessage: 'token不合法!',
    }))
  }

  try {
    // 获取更新数据
    const body = await readBody(e)

    if (!body || body.username || body.password) {
      let statusMessage
      if (!body)
        statusMessage = '参数不存在'
      else if (body.username)
        statusMessage = '用户名不能修改'
      else
        statusMessage = '请使用修改密码接口'
      return sendError(e, createError({
        statusCode: 400,
        statusMessage,
      }))
    }

    const user = await updateUser(token.id, body)
    return { ok: true, data: user }
  }
  catch (error) {
    console.error(error)
    return sendError(e, createError('更新用户信息失败!'))
  }
})

@前端进阶之旅: 代码已经复制到剪贴板

这里用到 updateUser，userRepository.ts:

javascript
复制代码export async function updateUser(id, data: Partial<User>) {
  const user = await prisma.user.update({
    where: {
      id,
    },
    data,
  })
  return user
}

@前端进阶之旅: 代码已经复制到剪贴板

修改密码，创建 server/api/changePwd.post.ts

javascript
复制代码import { isNuxtError } from 'nuxt/app'
import bcrypt from 'bcryptjs'
import { getUserByUsername, updateUser } from '../database/repositories/userRepository'
import { getTokenInfo } from '../database/service/token'

export default defineEventHandler(async (e) => {
  const token = getTokenInfo(e)

  if (isNuxtError(token)) {
    return sendError(e, createError({
      statusCode: 401,
      statusMessage: '请先登录!',
    }))
  }

  try {
    // 获取更新数据
    const body = await readBody(e)

    if (!body || !body.oldPwd || !body.newPwd) {
      return sendError(e, createError({
        statusCode: 400,
        statusMessage: '参数错误',
      }))
    }

    // 验证原密码
    const user = await getUserByUsername(token.username)

    // 校验密码
    const result = await bcrypt.compare(body.oldPwd, user!.password)

    if (!result) {
      return sendError(e, createError({
        statusCode: 400,
        statusMessage: '原密码错误!',
      }))
    }

    // 加密
    const salt = await bcrypt.genSalt(10)
    const hash = await bcrypt.hash(body.newPwd, salt)

    await updateUser(token.id, { password: hash })
    return { ok: true }
  }
  catch (error) {
    console.error(error)
    return sendError(e, createError('更新密码失败!'))
  }
})

@前端进阶之旅: 代码已经复制到剪贴板

# 前端页面实现

前端需要新增四个页面：

用户中心：usercenter.vue 。
三个子页面：
- 已购课程：usercenter/buy.vue ；
- 用户信息：usercenter/info.vue ；
- 修改密码：usercenter/pwd.vue 。

首先创建 usercenter.vue：注意这里面结合<NuxtPage :page-key="pageKey" />动态显示子页面。

xml
复制代码<!-- 用户：个人中心页面 -->
<script setup lang="ts">
const route = useRoute()
const pageKey = computed(() => route.fullPath)

const menus = [{
  title: '已购课程',
  name: 'usercenter-buy',
}, {
  title: '修改资料',
  name: 'usercenter-info',
}, {
  title: '修改密码',
  name: 'usercenter-pwd',
}]

const activeName = computed(() => route.name)
</script>

<template>
  <NGrid :x-gap="20">
    <NGridItem :span="5">
      <ul class="list-none bg-white rounded m-0 p-0">
        <li
          v-for="(item, index) in menus" :key="index"
          class="px-5 py-5 text-sm cursor-pointer hover: (bg-blue-50)"
          :class="{ active: (item.name === activeName) }"
          @click="navigateTo({ name: item.name })"
        >
          {{ item.title }}
        </li>
      </ul>
    </NGridItem>
    <NGridItem :span="19">
      <div class="bg-white rounded mb-5 min-h-[66vh]">
        <NuxtPage :page-key="pageKey" />
      </div>
    </NGridItem>
  </NGrid>
</template>

<style>
.active {
  font-weight: bold;
  color: rgba(0, 175, 65);
  background-color: rgba(229, 231, 235);
}
</style>

@前端进阶之旅: 代码已经复制到剪贴板

接下来实现已购课程子页面，buy.vue

下面是用户信息显示和修改，info.vue：

最后是修改密码页，pwd.vue：

用户中心设计与实现|Nuxt3专题

用户中心设计与实现|Nuxt3专题