首页设计与实现|Nuxt3专题 | 前端进阶之旅

本节我们实现首页的页面设计和具体实现，我们需要完成以下任务：

首页页面设计；
种子数据初始化；
编写数据接口；
编写前端页面。

# 首页页面设计

网站首页由 4 部分构成：

Banner
内容推荐
最新课程
最新专栏

# 种子数据

我们可以提前放入一些种子数据便于界面展现。

创建种子（此处省略部分数据），server/database/seed.ts

php
复制代码import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
async function main() {
   await prisma.column.create({
    data: {
      title: '上层框架最佳选择: Nuxt',
      cover: 'column-nuxt.png',
      desc: '上层框架最佳选择：Nuxt',
      content: `开箱即用的开发环境...`,
    },
  })
  await prisma.course.create({
    data: {
      title: 'Nuxt全栈开发',
      cover: 'course-nuxt.png',
      desc: '这门课我会全面讲解。。。',
      oPrice: 129,
      price: 99,
      detail: `这门课程共分五个模块：。。。`,
      Catalogue: {
        createMany: {
          data: [
            { title: '01开篇：课程介绍和安排', source: 'https://juejin.cn/video/7202149403342143520/section/7202885295820242947' },
            { title: '02上层框架最佳选择', source: 'https://juejin.cn/video/7202149403342143520/section/7202885295820242947' },
            { title: '03五种渲染模式', source: 'https://juejin.cn/video/7202149403342143520/section/7202885295820242947' },
            { title: '04快速创建首个nuxt项目', source: 'https://juejin.cn/video/7202149403342143520/section/7202885295820242947' }
          ],
        },
      },
    },
  })
}
main()
  .then(async () => {
    await prisma.$disconnect()
  })
  .catch(async (e) => {
    console.error(e)
    await prisma.$disconnect()
    process.exit(1)
  })

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

配置种子脚本，package.json

json
复制代码"prisma": {
  "seed"<