本次直播 APP 全栈开发旨在打造一个功能完备、用户体验良好的直播平台,涵盖用户注册登录、主播开播、观众观看直播及实时互动等核心功能。前端运用 uni-app 框架实现多平台适配,后端采用 Node.js 结合 Express 搭建稳定的服务架构,并借助 MongoDB 存储各类数据。同时,引入 Socket.io 实现实时通信功能。
获课:keyouit.xyz/1887/
获取ZY↑↑方打开链接↑↑
bash复制代码
bash复制代码
字段类型描述_idObjectId用户唯一标识符usernameString用户名passwordString加密后的用户密码emailString用户邮箱roleString用户角色,如“user”(普通用户)或“host”(主播),默认为“user”avatarString用户头像链接
_id
ObjectId
用户唯一标识符
username
String
用户名
password
String
加密后的用户密码
String
用户邮箱
role
String
用户角色,如“user”(普通用户)或“host”(主播),默认为“user”
avatar
String
用户头像链接
字段类型描述_idObjectId直播唯一标识符hostIdObjectId主播用户 ID,关联用户表titleString直播标题descriptionString直播描述startTimeDate直播开始时间endTimeDate直播结束时间(可为空)viewersNumber观看人数statusString直播状态,如“upcoming”(即将开始)、“live”(直播中)、“ended”(已结束)streamUrlString直播流链接
_id
ObjectId
直播唯一标识符
hostId
ObjectId
主播用户 ID,关联用户表
title
String
直播标题
description
String
直播描述
startTime
Date
直播开始时间
endTime
Date
直播结束时间(可为空)
viewers
Number
观看人数
status
String
直播状态,如“upcoming”(即将开始)、“live”(直播中)、“ended”(已结束)
streamUrl
String
直播流链接
字段类型描述_idObjectId消息唯一标识符liveIdObjectId所属直播 ID,关联直播表senderIdObjectId发送者用户 ID,关联用户表messageString聊天消息内容sendTimeDate发送时间
_id
ObjectId
消息唯一标识符
liveId
ObjectId
所属直播 ID,关联直播表
senderId
ObjectId
发送者用户 ID,关联用户表
message
String
聊天消息内容
sendTime
Date
发送时间
字段类型描述_idObjectId礼物唯一标识符nameString礼物名称priceNumber礼物价格(虚拟货币单位)imageUrlString礼物图片链接
_id
ObjectId
礼物唯一标识符
name
String
礼物名称
price
Number
礼物价格(虚拟货币单位)
imageUrl
String
礼物图片链接
字段类型描述_idObjectId记录唯一标识符gifterIdObjectId赠送者用户 ID,关联用户表liveIdObjectId所属直播 ID,关联直播表giftIdObjectId赠送的礼物 ID,关联礼物表giveTimeDate赠送时间
_id
ObjectId
记录唯一标识符
gifterId
ObjectId
赠送者用户 ID,关联用户表
liveId
ObjectId
所属直播 ID,关联直播表
giftId
ObjectId
赠送的礼物 ID,关联礼物表
giveTime
Date
赠送时间
在 MongoDB 中创建数据库 live_app_db 以及上述集合。
在 live_app_backend 目录下创建 db.js 文件:
javascript复制代码
在 live_app_backend 目录下创建 models 文件夹,在其中分别创建 user.js、live.js、chatMessage.js、gift.js 和 giftGiving.js 文件定义各个模型。
javascript复制代码
javascript复制代码
javascript复制代码
javascript复制代码
javascript复制代码
在 live_app_backend 目录下创建 routes 文件夹,在其中创建 userRoutes.js、liveRoutes.js、chatRoutes.js、giftRoutes.js 文件分别处理用户、直播、聊天和礼物相关的 API。
javascript复制代码
javascript复制代码
javascript复制代码
javascript复制代码
在 live_app_backend 目录下创建 app.js 文件:
javascript复制代码
使用 HBuilderX 创建一个新的 uni-app 项目,选择默认模板。
在 pages 目录下创建 home.vue、live.vue、login.vue、register.vue、giftList.vue 等页面。
html复制代码