乐于分享
好东西不私藏
夜雨聆风 > > 办公文件 > Flask+MySQL + UniApp 视频播放器项目

Flask+MySQL + UniApp 视频播放器项目

当前时间： 2026-08-16 04:50:57 分类：办公文件 评论(0)
Flask+MySQL + UniApp 视频播放器项目

开发提示词：Flask+MySQL + UniApp 视频播放器项目（后端+前端+API+数据库全流程）

适用于AI代码生成、开发协作、需求文档，分模块完整细化，可直接复制使用，包含架构、功能、接口、数据库、样式、交互、部署要求。

一、整体项目总需求（开头通用描述）

请开发一套移动端视频播放器完整应用，技术栈组合：后端：Python Flask + MySQL 8.0前端：UniApp（Vue3 + 原生uniapp语法，兼容微信小程序/APP/H5三端）整体实现：视频上传、视频列表、在线播放、分类筛选、播放记录、点赞收藏、分页加载、视频详情等核心功能。要求代码结构规范、注释完整、接口统一、可直接运行，附带数据库脚本、接口文档、运行说明。

二、后端 Flask + MySQL 详细开发提示词

（1）技术&架构要求

  1. 编程语言：Python 3.8+，框架：Flask，使用 Flask-SQLAlchemy 操作MySQL，Flask-CORS 解决跨域。
  2. 项目目录分层：路由层、模型层、工具层、配置层、静态资源层，目录结构清晰。
  3. 配置文件独立存放：数据库地址、账号、密码、端口、文件上传路径、允许文件格式、文件大小限制。
  4. 编码统一使用UTF-8，接口返回标准JSON格式，统一状态码、提示语。
  5. 视频、封面图均做本地文件存储，返回可访问网络地址，禁止绝对路径。
  6. 增加基础异常捕获、日志打印，上传文件做格式、大小校验。

（2）MySQL 数据库设计（数据表+字段）

创建2张核心数据表，附带建表SQL语句：

  1. video 视频主表

    • id：主键自增 int
    • title：视频标题 varchar(100)
    • cover_img：视频封面图地址 varchar(255)
    • video_url：视频播放地址 varchar(255)
    • category：视频分类 varchar(50)（如：影视、动漫、生活、音乐）
    • play_count：播放次数 int 默认0
    • like_count：点赞数 int 默认0
    • collect_count：收藏数 int 默认0
    • intro：视频简介 text
    • create_time：发布时间 datetime
    • status：状态 tinyint（0=下架，1=正常）

  2. play_record 播放记录表

    • id：主键自增 int
    • video_id：关联视频ID int
    • create_time：播放时间 datetime （可选扩展：用户ID，简易版可先做匿名播放记录）

（3）后端核心功能 & 接口列表（RESTful 风格）

所有接口请求方式、入参、出参、功能明确，统一返回格式：

{"code": 状态码(200成功/400参数错误/500服务器错误),"msg": "提示信息","data": 业务数据}

接口1：获取视频分类列表

  • 请求方式：GET
  • 接口地址：/api/category
  • 功能：返回所有视频分类名称

接口2：分页获取视频列表（支持分类筛选）

  • 请求方式：GET
  • 接口地址：/api/video/list
  • 请求参数：
    • page：页码（默认1）
    • page_size：每页条数（默认10）
    • category：分类名称（非必传，不传查全部）
  • 返回：视频ID、标题、封面、播放量、分类

接口3：获取视频详情

  • 请求方式：GET
  • 接口地址：/api/video/detail
  • 请求参数：video_id（视频ID）
  • 功能：返回视频完整信息 + 播放地址，并自动累加播放次数

接口4：视频点赞

  • 请求方式：POST
  • 接口地址：/api/video/like
  • 请求参数：video_id
  • 功能：对应视频点赞数+1

接口5：视频收藏

  • 请求方式：POST
  • 接口地址：/api/video/collect
  • 请求参数：video_id
  • 功能：对应视频收藏数+1

接口6：添加播放记录

  • 请求方式：POST
  • 接口地址：/api/record/add
  • 请求参数：video_id
  • 功能：新增一条播放记录

接口7：获取我的播放记录（分页）

  • 请求方式：GET
  • 接口地址：/api/record/list
  • 请求参数：page、page_size
  • 功能：按时间倒序返回历史播放视频

接口8：后台视频上传（管理端接口）

  • 请求方式：POST
  • 接口地址：/api/video/upload
  • 传参：表单形式（标题、分类、简介、封面图文件、视频文件）
  • 限制：仅允许 mp4 视频、jpg/png 图片，限制单文件大小
  • 功能：文件保存至服务器，数据写入数据库

（4）后端额外要求

  1. 静态资源路由：配置 /static 目录，前端可直接访问图片、视频文件。
  2. 文件上传目录：单独创建 static/cover（封面）、static/video（视频）。
  3. 跨域全局开启，适配UniApp多端请求。
  4. 提供完整启动命令、依赖清单（requirements.txt）。

三、UniApp 前端 详细开发提示词（Vue3 + UniApp 原生）

（1）运行&兼容要求

  1. 框架：UniApp + Vue3，使用组合式API，兼容微信小程序、App、H5三端。
  2. 不使用第三方复杂UI框架，优先使用uniapp原生组件。
  3. 页面样式适配移动端，分辨率自适应，支持下拉刷新、上拉触底分页。
  4. 全局封装 请求工具类（uni.request），统一接口地址、请求拦截、错误提示。

（2）全局配置

  1. 新建 utils/request.js 封装网络请求，统一后端接口域名。
  2. 全局样式 App.vue 设置页面基础样式、字体、边距。
  3. 页面路由在 pages.json 配置，底部导航栏开启。

（3）页面结构（共5个核心页面）

页面1：首页（pages/index/index）

  • 顶部：搜索栏 + 分类横向滚动标签（影视/动漫/生活/音乐）
  • 主体：视频瀑布流/网格列表，卡片形式展示：封面图、标题、播放量
  • 交互：
    • 点击分类标签筛选对应视频
    • 上拉触底加载下一页
    • 下拉刷新重置列表
    • 点击视频卡片跳转到播放页

页面2：视频播放页（pages/play/play）【核心页面】

  • 顶部：自定义导航栏（返回按钮、视频标题）
  • 核心组件：uniapp原生 video 视频播放器
    • 配置：自动播放、全屏按钮、进度条、倍速、播放暂停、全屏功能
    • 监听视频播放结束、暂停、播放事件
  • 播放器下方：视频标题、简介、播放量、点赞按钮、收藏按钮
  • 底部：相关推荐视频列表
  • 交互：
    • 进入页面自动上报播放记录
    • 点击点赞/收藏按钮调用对应接口，动态更新数字
    • 支持横竖屏切换

页面3：分类页（pages/category/category）（可选，也可合并至首页）

  • 展示全部分类，点击分类进入对应视频列表

页面4：播放记录页（pages/record/record）

  • 列表展示历史播放视频，按时间倒序
  • 每条记录：封面、标题、播放时间
  • 点击条目重新播放视频
  • 支持清空播放记录功能

页面5：我的页面（pages/mine/mine）

  • 个人中心入口：播放记录、关于我们等基础菜单

（4）组件&交互细节

  1. 视频卡片：封面图等比例裁剪，加载中显示占位图。
  2. 网络请求加载：添加 uni.showLoading 加载提示，请求完成关闭。
  3. 异常处理：接口请求失败、视频加载失败时，弹出友好提示。
  4. 视频播放器优化：适配小程序/App/H5不同端的播放权限。
  5. 分页逻辑：记录当前页码、总条数，无更多数据时提示「没有更多视频」。

（5）pages.json 配置要求

  1. 配置底部 tabBar：首页、播放记录、我的 三个导航项。
  2. 关闭默认导航栏（播放页自定义导航），设置页面标题、窗口样式。
  3. 配置小程序必要权限、H5 运行参数。

四、前后端联调 & 接口规范统一要求

  1. 前端所有请求地址统一前缀：http://127.0.0.1:5000/api（后端默认端口5000）。
  2. 前后端参数名保持一致，字段命名统一使用小写+下划线。
  3. 所有列表接口统一分页逻辑：page / page_size。
  4. 视频、图片地址后端返回完整可访问URL，前端直接赋值给video组件、image组件。
  5. 开发环境：后端本地运行，前端模拟器/真机联调。

五、交付物要求（最终输出内容）

  1. 后端：完整Flask项目代码 + MySQL建表SQL + requirements.txt + 运行步骤。
  2. 前端：完整UniApp项目代码 + pages.json + 全局请求工具类。
  3. 完整API接口文档（地址、参数、返回示例）。
  4. 部署&运行图文步骤：本地启动后端、导入数据库、运行UniApp项目。
  5. 代码关键位置添加中文注释，方便二次修改与扩展。

六、精简版一键复制提示词（直接给AI使用）

如需快速生成，复制下面整段即可：

请基于 Python Flask + MySQL 8.0 + UniApp(Vue3) 开发一套三端通用移动端视频播放器应用，包含完整后端、前端、数据库、API接口。一、后端要求：1. 使用Flask、Flask-SQLAlchemy、Flask-CORS，规范分层目录，配置文件独立，统一JSON返回格式（code/msg/data）。2. 设计两张数据表：video视频表、play_record播放记录表，提供完整建表SQL。3. 实现接口：分类列表、视频分页列表、视频详情、点赞、收藏、添加播放记录、播放记录分页、视频文件上传接口。4. 视频和封面图本地存储在static目录，校验文件格式与大小，开启跨域，附带依赖清单和启动说明。二、UniApp前端要求：1. 使用Vue3组合式API，兼容微信小程序、App、H5三端，封装全局request请求。2. 制作5个页面：首页（分类标签+视频列表、下拉刷新、上拉分页）、视频播放页（原生video播放器、点赞收藏、上报播放记录）、播放记录页、个人中心页。3. 配置底部tabBar，视频卡片样式美观，加载状态、异常提示完善，播放器支持全屏、暂停、进度调节。三、联调与交付：前后端接口参数统一，提供完整代码、数据库脚本、接口文档、详细运行部署步骤，代码添加中文注释，保证可直接本地运行。