欢迎光临
我们一直在努力
        找回密码
当前位置：171主机测评 > 服务器技术 > 正文

影院预约系统（threeJS Fastapi html开源）

2026-02-28 分类：服务器技术 阅读(32) 评论(0)

「2026-电影院预约系统」 /~b5cd3Lp6lU~:/ 链接：https://pan.quark.cn/s/666774cb40b4

🎬 星空影院预约系统

​​一个基于 FastAPI + Three.js 的全栈3D影院选座系统

功能特性 • 快速开始 • 系统架构 • API文档 • 常见问题

</div>

📖 项目简介

星空影院预约系统是一个现代化的在线影院选座平台,采用 3D可视化技术 让用户能够直观地选择影院座位。系统包含完整的用户端和管理后台,支持影院管理、排期管理、订单处理和用户管理等功能。

🌟 核心亮点

  • 🎨 3D可视化选座 – 基于Three.js的沉浸式3D影院场景

  • 💺 智能座位布局 – 支持自定义行列、间距、阶梯高度

  • 👑 VIP区域自动识别 – 后排自动识别为VIP座位

  • 🔒 JWT认证授权 – 安全的用户认证和权限管理

  • 📊 完整的管理后台 – 影院、排期、订单、用户全流程管理

  • 📱 响应式设计 – 支持PC和移动端访问

✨ 功能特性

用户端功能

功能模块描述
👤 用户认证 注册、登录、JWT令牌管理
🏢 影院浏览 查看所有影院及配置信息
🎬 电影排期 查看电影排期和可用座位
🎯 3D选座 实时3D场景选择座位
💰 价格计算 自动计算普通座/VIP座价格
📋 订单管理 查看订单、支付订单
⏰ 座位锁定 15分钟自动释放机制

管理后台功能

功能模块描述
📊 数据概览 影院、排期、订单、收入统计
🏢 影院管理 创建、编辑、删除影院及3D配置
🎬 排期管理 创建、编辑、删除电影排期
📋 订单管理 查看、支付、删除订单(分页)
👥 用户管理 创建、编辑用户、权限管理(分页)
⚙️ 系统设置 数据库管理、API测试

🚀 快速开始

环境要求

  • Python: 3.8+

  • 数据库: SQLite (自带)

1. 安装依赖

cd backend
pip install fastapi uvicorn sqlalchemy pydantic python-jose passlib bcrypt python-multipart

2. 初始化数据库

cd backend
python seed_data.py

初始化内容:

  • ✅ 创建数据库表

  • ✅ 创建管理员账户: admin / admin123

  • ✅ 创建测试用户: user1 / user123

  • ✅ 创建示例影院

  • ✅ 创建示例排期

  • ✅ 初始化座位状态

3. 启动后端服务

cd backend
python main.py

服务将在 http://localhost:8000 启动

4. 访问系统

方法1: 使用启动脚本(推荐)

双击运行: 快速测试.bat

方法2: 手动启动

打开浏览器访问:

  • 用户登录页: frontend/login_simple.html

  • 用户面板: frontend/user.html

  • 管理后台: frontend/admin.html

  • 3D选座页: frontend/booking_cinema2.html

  • 调试版选座: frontend/booking_debug.html

默认账号

管理员:
用户名: admin
密码: admin123
​
普通用户:
用户名: user1
密码: user123

🏗️ 系统架构

技术栈

后端

FastAPI 0.104.1         # Web框架
SQLAlchemy 2.0.23       # ORM
SQLite                   # 数据库
JWT (python-jose)       # 认证
Pydantic 2.5.0           # 数据验证
Uvicorn                 # ASGI服务器

前端

Three.js r128           # 3D图形引擎
TailwindCSS             # 样式框架
Font Awesome             # 图标库
原生JavaScript           # 核心逻辑

项目结构

电影预约系统/
├── backend/                   # 后端代码
│   ├── main.py               # FastAPI入口
│   ├── database.py           # 数据库连接
│   ├── models.py             # SQLAlchemy模型(5个表)
│   ├── schemas.py             # Pydantic模式
│   ├── auth.py               # JWT认证工具
│   ├── seed_data.py           # 测试数据初始化
│   ├── cinema_booking.db     # SQLite数据库
│   └── routers/               # API路由
│       ├── auth.py           # 认证API + 用户管理API
│       ├── cinemas.py         # 影院API + 排期API
│       ├── seats.py           # 座位状态API
│       └── bookings.py       # 订单API
│
├── frontend/                   # 前端代码
│   ├── index.html             # 登录注册页
│   ├── login_simple.html     # 简化登录页
│   ├── user.html             # 用户面板
│   ├── admin.html             # 管理后台(带侧边栏)
│   ├── booking_cinema2.html   # 3D选座页
│   ├── booking_debug.html     # 调试版选座
│   ├── api.js                 # API封装
│   └── asset/                 # 静态资源
│       ├── three.min.js       # Three.js库
│       └── font-awesome/     # 图标库
│
├── 文档/                       # 项目文档
│   ├── README.md             # 本文档
│   ├── 系统调试指南.md       # 故障排除指南
│   ├── 启动检查清单.md       # 系统检查清单
│   └── 继续使用指南.md       # 使用指南
│
├── 快速测试.bat               # 一键启动脚本
└── README.md                   # 项目说明

数据库模型

1. User (用户表)

id             # 用户ID
username       # 用户名(唯一)
email           # 邮箱
phone           # 手机号
hashed_password # 加密密码
is_admin       # 是否管理员
created_at     # 创建时间

2. Cinema (影院表)

id             # 影院ID
name           # 影院名称
address         # 影院地址
rows           # 总行数
seats_per_row   # 每排座位数
row_spacing     # 排间距(米,用于3D渲染)
seat_spacing   # 座位间距(米)
step_height     # 阶梯高度(米)
price_regular   # 普通座价格
price_vip       # VIP座价格
vip_rows       # VIP排数(最后N排)

3. Screening (排期表)

id             # 排期ID
cinema_id       # 影院ID
movie_name     # 电影名称
movie_poster   # 电影海报URL
start_time     # 开始时间
duration       # 时长(分钟)
hall_name       # 影厅名称

4. SeatStatus (座位状态表)

id             # 座位ID
screening_id   # 排期ID
seat_row       # 行号(0-index)
seat_col       # 列号(0-index)
seat_label     # 座位标签(A1, A2, B1…)
status         # 状态(available/selected/occupied)
user_id         # 锁定用户ID
occupied_at     # 锁定时间
booking_id     # 订单ID

5. Booking (订单表)

id             # 订单ID
user_id         # 用户ID
screening_id   # 排期ID
seat_ids       # 座位ID列表(JSON)
total_price     # 总价
status         # 状态(pending/paid/cancelled)
qr_code         # 二维码
created_at     # 创建时间
paid_at         # 支付时间

📡 API文档

认证相关

用户注册

POST /api/auth/register
Content-Type: application/json
​
{
"username": "newuser",
"password": "password123",
"email": "user@example.com",
"phone": "13800138000"
}

用户登录

POST /api/auth/login
Content-Type: application/json
​
{
"username": "user1",
"password": "user123"
}
​
Response:
{
"access_token": "eyJ0eXAiOiJKV1QiLCJhbGc…",
"token_type": "bearer"
}

影院相关

获取所有影院

GET /api/cinemas

获取影院排期

GET /api/cinemas/{cinema_id}/screenings

获取所有排期

GET /api/screenings

座位相关 (重要!)

获取场次座位状态

GET /api/screenings/{screening_id}/seats
Authorization: Bearer {access_token}
​
Response:
{
"cinema": {
  "rows": 8,
  "seats_per_row": 10,
  "row_spacing": 2.0,
  "seat_spacing": 1.4,
  "step_height": 0.4,
  "price_regular": 45.0,
  "price_vip": 80.0,
  "vip_rows": 2
},
"movie": {
  "name": "流浪地球2",
  "poster": "https://…",
  "start_time": "2026-02-28T19:00:00"
},
"seats": [
  {
    "id": 1,
    "row": 0,
    "col": 0,
    "label": "A1",
    "status": "available",
    "is_vip": false
  },
  …
]
}

订单相关

创建订单

POST /api/bookings
Authorization: Bearer {access_token}
Content-Type: application/json
​
{
"seat_ids": [1, 2, 3]
}

获取订单列表

GET /api/bookings?skip=0&limit=20
Authorization: Bearer {access_token}

支付订单

PUT /api/bookings/{booking_id}/pay
Authorization: Bearer {access_token}

管理员API

创建影院

POST /api/admin/cinemas
Authorization: Bearer {admin_token}
Content-Type: application/json
​
{
"name": "星空影院-IMAX厅",
"rows": 10,
"seats_per_row": 12,
"row_spacing": 2.0,
"seat_spacing": 1.4,
"step_height": 0.4,
"price_regular": 60,
"price_vip": 100,
"vip_rows": 2
}

创建排期

POST /api/admin/screenings
Authorization: Bearer {admin_token}
Content-Type: application/json
​
{
"cinema_id": 1,
"movie_name": "流浪地球2",
"movie_poster": "https://…",
"hall_name": "1号厅",
"start_time": "2026-02-28T19:00:00",
"duration": 120
}

获取用户列表

GET /api/auth/users
Authorization: Bearer {admin_token}

设置管理员权限

PUT /api/auth/users/{user_id}/admin?is_admin=true
Authorization: Bearer {admin_token}

删除用户

DELETE /api/auth/users/{user_id}
Authorization: Bearer {admin_token}

完整API文档

启动后端后访问: http://localhost:8000/docs

🎨 3D渲染说明

Three.js场景组成

1. 相机设置

camera.position.set(0, 18, 28);  // 相机位置
camera.lookAt(0, 2, -8);          // 观察目标
camera.fov = 50;                  // 视野角度

2. 灯光系统

  • 环境光: 提供基础照明

  • 主光源: 模拟影院顶部灯光

  • 屏幕微光: 从屏幕发出的蓝色光晕

  • 氛围灯: 左侧蓝色 + 右侧橙色

  • 座位区照明: 6个聚光灯照亮座位区

3. 座位模型

每个座位由以下部分组成:

  • CylinderGeometry – 底座(圆柱)

  • BoxGeometry – 座椅垫(长方体)

  • BoxGeometry – 靠背(长方体)

  • BoxGeometry x2 – 左右扶手

4. 材质系统

  • 普通座: 灰色 MeshStandardMaterial

  • VIP座: 金色 + 自发光效果

  • 已选中: 绿色 + 强发光

  • 已售出: 红色

5. 交互控制

  • OrbitControls: 鼠标拖拽旋转视角

  • Raycaster: 点击检测座位

  • 滚轮缩放: 调整观察距离

自定义3D参数

在管理后台创建影院时,可以调整以下3D渲染参数:

参数默认值范围说明
rows 8 1-20 总行数
seats_per_row 10 1-30 每排座位数
row_spacing 2.0 0.5-5.0 排间距(米)
seat_spacing 1.4 0.5-3.0 座位间距(米)
step_height 0.4 0-1.0 阶梯高度(米)
vip_rows 2 0-10 VIP排数

🔧 配置说明

后端配置

文件: backend/main.py

# 服务器配置
HOST = "0.0.0.0"
PORT = 8000
​
# JWT配置
SECRET_KEY = "your-secret-key-change-this-in-production-2024"
ALGORITHM = "HS256"
ACCESS_TOKEN_EXPIRE_MINUTES = 60
​
# 数据库配置
DATABASE_URL = "sqlite:///./cinema_booking.db"
​
# CORS配置
CORS_ORIGINS = ["*"]  # 生产环境请限制具体域名

前端配置

文件: frontend/api.js

const API_BASE = 'http://localhost:8000';
const TOKEN_KEY = 'cinema_token';
const USER_KEY = 'cinema_user';

修改API地址

如果后端部署在其他地址,修改 frontend/api.js:

const API_BASE = 'http://your-server:port';

🔒 安全说明

生产环境必做

  • 修改SECRET_KEY

    • # backend/auth.py
    SECRET_KEY = "生成一个强随机密钥"

  • 启用HTTPS 使用Let's Encrypt或购买SSL证书

  • 限制CORS

    • # backend/main.py
    app.add_middleware(
       CORSMiddleware,
       allow_origins=["https://your-domain.com"],
       allow_credentials=True,
       allow_methods=["*"],
       allow_headers=["*"],
    )

  • 数据库备份 定期备份 cinema_booking.db 文件

  • 修改默认密码 首次登录后立即修改admin密码

    • 🐛 常见问题

    1. 后端启动失败

    问题: ModuleNotFoundError

    解决:

    pip install -r requirements.txt

    2. 数据库错误

    问题: sqlite3.OperationalError

    解决:

    cd backend
    python seed_data.py

    3. 3D场景不显示

    问题: Three.js加载失败

    解决: 确保 frontend/asset/three.min.js 文件存在

    4. API请求失败

    问题: CORS error 或 401 Unauthorized

    解决:

    • 检查后端是否启动

    • 检查Token是否有效

    • 查看浏览器控制台错误信息

    5. 座位无法选择

    问题: 点击座位无反应

    解决:

    • 检查是否已登录

    • 查看浏览器控制台是否有JavaScript错误

    • 尝试使用 booking_debug.html

    6. 管理后台无法加载

    问题: 加载数据失败

    解决:

    • 确认使用管理员账号登录

    • 检查 api.js 和 admin.html 是否正确引用

    • 查看浏览器控制台错误

    📚 更多文档

    • 系统调试指南.md – 详细的故障排除步骤

    • 启动检查清单.md – 完整的系统检查流程

    • 继续使用指南.md – 快速上手指南

    🚀 部署指南

    开发环境

    # 启动后端
    cd backend
    python main.py
    ​
    # 访问前端
    # 直接用浏览器打开 frontend/*.html 文件

    生产环境

    1. 使用Uvicorn部署

    cd backend
    uvicorn main:app –host 0.0.0.0 –port 8000 –workers 4

    2. 使用Nginx代理

    server {
       listen 80;
       server_name your-domain.com;
    ​
       # 前端静态文件
       location / {
           root /path/to/frontend;
           index index.html;
           try_files $uri $uri/ /index.html;
      }
    ​
       # 后端API代理
       location /api/ {
           proxy_pass http://127.0.0.1:8000;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
      }
    }

    3. 使用Docker部署

    Dockerfile:

    FROM python:3.9-slim
    ​
    WORKDIR /app
    ​
    COPY backend/requirements.txt .
    RUN pip install -r requirements.txt
    ​
    COPY backend/ .
    ​
    EXPOSE 8000
    ​
    CMD ["uvicorn", "main:app", "–host", "0.0.0.0", "–port", "8000"]

    📝 开发计划

    • 添加真实支付功能(支付宝/微信)
    • 优化移动端适配
    • 添加数据统计图表
    • 支持MySQL/PostgreSQL数据库
    • 添加邮件通知功能

    📄 开源协议

    MIT License

    👥 作者

    星空影院团队 © 2026

    ​​

    如果觉得不错,请给个⭐Star支持一下!

    Made with ❤️ by Star Cinema Team

    </div>

    赞(0)
    未经允许不得转载：171主机测评 » 影院预约系统（threeJS Fastapi html开源）
    分享到： 更多 (0)
    标签：

    相关推荐

    评论 抢沙发

    取消

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    热门标签

    #人工智能(58511)#python(19877)#开发语言(16699)#java(15335)#运维(15249)#linux(14862)#大数据(14459)#服务器(12981)#算法(11682)#前端(10773)#网络(9291)#数据库(8813)#ai(8767)#c++(8103)#课程设计(6781)#学习(6704)#机器学习(6652)#区块链(5880)#OpenClaw(5385)#后端(5096)#spring boot(4978)#深度学习(4884)#c语言(4352)#毕业设计(4287)#数据结构(4167)#安全(4002)#docker(3909)#架构(3820)#javascript(3782)#大模型(3616)

    热门文章

    最新文章

    归档

    分类