大家好,我是村长!
从本节开始,我们准备完成一个实战项目,验证一下前面所学知识。本节安排如下:
- 需求分析;
- 项目创建;
- 接口设计;
- 接口实现;
- 主体布局;
- 首页实现;
- 详情页实现;
- 课程页实现;
- 专栏页实现;
- 项目部署。
项目概要
项目名为《羊村学堂》,顾名思义是我们羊村的学习网站,小羊们在羊村学堂可以通过订阅课程或者专栏文章学习编程知识,需要付出的代价是“草”。该网站将包括以下页面模块:
- 用户登录、注册
- 网站首页:展示最新课程和专栏、推荐课程和专栏
- 课程页:分页展示课程列表
- 课程详情:课程详细介绍、课程表、购买链接
专栏页:分页展示专栏列表
专栏详情:专栏详细内容、购买链接
订单页:订单详情和确认
- 支付页:支付订单
- 用户中心:用户信息、已购课程等
数据模型
根据以上页面和业务,我们提取以下数据模型:
用户:用户名、头像、昵称、性别、密码等;
课程:名称、现价、原价、封面、描述、详情;
目录:标题、资源地址;
专栏:名称、封面、描述、详情;
订单:产品 id、下单时间、订单状态。
下面是 schema.prisma:
prisma
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
}
generator client {
provider = "prisma-client-js"
}
model Column {
id Int @id @default(autoincrement())
title String
cover String
desc String?
content String? @db.Text
}
model Course {
id Int @id @default(autoincrement())
title String
cover String
price Decimal
oPrice Decimal
desc String?
detail String? @db.Text
users UsersOnCourses[]
orders Order[]
}
model Catalogue {
id Int @id @default(autoincrement())
title String
source String
course Course @relation(fields: [courseId], references: [id])
courseId Int
}
model User {
id Int @id @default(autoincrement())
username String @unique
password String
nickname String?
avatar String?
sex String?
courses UsersOnCourses[]
orders Order[]
}
model UsersOnCourses {
user User @relation(fields: [userId], references: [id])
userId Int
course Course @relation(fields: [courseId], references: [id])
courseId Int
@@id([userId, courseId])
}
model Order {
id Int @id @default(autoincrement())
course Course @relation(fields: [courseId], references: [id])
courseId Int
user User @relation(fields: [userId], references: [id])
userId Int
createdAt DateTime
status OrderStatus
}
enum OrderStatus {
WAIT_CONFIRM
WAIT_PAY
COMPLETED
}
加一个脚本方便执行,package.json:
json
"migrate": "npx prisma migrate dev --name init --schema server/database/schema.prisma"
执行之后的效果如下图:
数据接口
根据以上页面和业务,我们需要提供以下数据接口:
登录、注册:login、register ;
课程页:course ;
课程详情:course/:id ;
专栏页:column ;
专栏详情:column/:id ;
订单页:order(get/patch) ;
用户中心:user(get/patch),upload,changePassword(patch)。
下次预告
下节课我们先从项目基础布局开始的我们开发之旅!