本次直播 APP 全栈开发旨在打造一个功能完备、用户体验良好的直播平台,涵盖用户注册登录、主播开播、观众观看直播及实时互动等核心功能。前端运用 uni-app 框架实现多平台适配,后端采用 Node.js 结合 Express 搭建稳定的服务架构,并借助 MongoDB 存储各类数据。同时,引入 Socket.io 实现实时通信功能。
uni-app实战app开发完结 获取ZY↑↑方打开链接↑↑
bash复制代码
bash复制代码
字段 | 类型 | 描述 |
---|---|---|
_id | ObjectId | 用户唯一标识符 |
username | String | 用户名 |
password | String | 加密后的用户密码 |
String | 用户邮箱 | |
role | String | 用户角色,如“user”(普通用户)或“host”(主播),默认为“user” |
avatar | String | 用户头像链接 |
_id
ObjectId
用户唯一标识符
username
String
用户名
password
String
加密后的用户密码
String
用户邮箱
role
String
用户角色,如“user”(普通用户)或“host”(主播),默认为“user”
avatar
String
用户头像链接
字段 | 类型 | 描述 |
---|---|---|
_id | ObjectId | 直播唯一标识符 |
hostId | ObjectId | 主播用户 ID,关联用户表 |
title | String | 直播标题 |
description | String | 直播描述 |
startTime | Date | 直播开始时间 |
endTime | Date | 直播结束时间(可为空) |
viewers | Number | 观看人数 |
status | String | 直播状态,如“upcoming”(即将开始)、“live”(直播中)、“ended”(已结束) |
streamUrl | String | 直播流链接 |
_id
ObjectId
直播唯一标识符
hostId
ObjectId
主播用户 ID,关联用户表
title
String
直播标题
description
String
直播描述
startTime
Date
直播开始时间
endTime
Date
直播结束时间(可为空)
viewers
Number
观看人数
status
String
直播状态,如“upcoming”(即将开始)、“live”(直播中)、“ended”(已结束)
streamUrl
String
直播流链接
字段 | 类型 | 描述 |
---|---|---|
_id | ObjectId | 消息唯一标识符 |
liveId | ObjectId | 所属直播 ID,关联直播表 |
senderId | ObjectId | 发送者用户 ID,关联用户表 |
message | String | 聊天消息内容 |
sendTime | Date | 发送时间 |
_id
ObjectId
消息唯一标识符
liveId
ObjectId
所属直播 ID,关联直播表
senderId
ObjectId
发送者用户 ID,关联用户表
message
String
聊天消息内容
sendTime
Date
发送时间
字段 | 类型 | 描述 |
---|---|---|
_id | ObjectId | 礼物唯一标识符 |
name | String | 礼物名称 |
price | Number | 礼物价格(虚拟货币单位) |
imageUrl | String | 礼物图片链接 |
_id
ObjectId
礼物唯一标识符
name
String
礼物名称
price
Number
礼物价格(虚拟货币单位)
imageUrl
String
礼物图片链接
字段 | 类型 | 描述 |
---|---|---|
_id | ObjectId | 记录唯一标识符 |
gifterId | ObjectId | 赠送者用户 ID,关联用户表 |
liveId | ObjectId | 所属直播 ID,关联直播表 |
giftId | ObjectId | 赠送的礼物 ID,关联礼物表 |
giveTime | Date | 赠送时间 |
_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 等页面。