# 72QishierPlayer 技术栈说明 一个基于 **Vue3 + Vite + Node.js + Playwright + HLS.js + Artplayer** 的《七十二家房客》在线播放项目。 本项目通过 **浏览器自动采集官网数据 → 本地缓存 JSON → Node API 提供 → Vue 前端播放** 的方式，解决官网接口 **签名、401、分页限制** 等问题，实现稳定播放。 ------------------------------------------------------------------------ # 运行与安装指南 本文档说明 **72QishierPlayer** 项目的安装与运行步骤。\ 项目由 **Node.js 后端 + Vue3 前端** 两部分组成，需要分别启动。 ------------------------------------------------------------------------ # 一、后端服务（Node.js） 后端主要负责： - 提供节目 API - 读取本地 JSON 数据 - 提供给前端播放列表 ## 1. 安装依赖 进入后端目录： ``` bash cd backServer ``` 安装依赖： ``` bash npm install ``` ------------------------------------------------------------------------ ## 2. 启动后端服务 ``` bash node server.js ``` 默认接口地址： http://localhost:3000 例如： http://localhost:3000/api/qishier/list ------------------------------------------------------------------------ ## 3. 更新节目数据（可选） 如果需要重新采集节目数据： ``` bash node capture.js ``` 该脚本会： 1. 启动浏览器自动采集 2. 打开节目页面 3. 自动加载更多节目 4. 捕获接口数据 5. 更新本地缓存 数据保存位置： backServer/data/qishier-cache.json ------------------------------------------------------------------------ # 二、前端服务（Vue3） 前端负责： - 视频播放器 - 节目列表展示 - 自动下一集 - 播放进度记录 ------------------------------------------------------------------------ ## 1. 安装前端依赖 进入前端目录： ``` bash cd 72QishierPlayer ``` 安装依赖： ``` bash npm install ``` ------------------------------------------------------------------------ ## 2. 启动前端开发服务器 ``` bash npm run dev ``` 默认访问地址： http://localhost:5173 ------------------------------------------------------------------------ # 三、开发模式运行流程 建议的启动顺序： ``` text 1. 启动 Node 后端 node server.js 2. 启动 Vue 前端 npm run dev 3. 浏览器访问 http://localhost:5173 ``` ------------------------------------------------------------------------ # 四、生产环境部署 构建前端： ``` bash npm run build ``` 构建完成后生成： dist/ 将 `dist` 部署到 Nginx 或静态服务器即可。 后端服务建议使用 **PM2** 运行： ``` bash pm2 start server.js --name qishier-api pm2 save ``` ------------------------------------------------------------------------ # 五、常见问题 ## 1. 播放器无法播放 确认： - 后端服务已启动 - API 地址正常 - m3u8 视频链接有效 ------------------------------------------------------------------------ ## 2. 没有节目数据 执行： ``` bash node capture.js ``` 重新采集节目列表。 ------------------------------------------------------------------------ # 六、默认端口 服务 端口 ---------- ------ Vue 前端 5173 Node API 3000 # 技术栈（Tech Stack） ## 前端 技术 说明 ------------- ----------------------- Vue3 前端框架 Vite 前端构建工具 TypeScript 类型安全开发 Axios HTTP 请求库 Artplayer 视频播放器 UI hls.js m3u8 / HLS 视频流播放 HTML5 Video 浏览器视频播放能力 CSS3 页面样式 ------------------------------------------------------------------------ ## 后端 技术 说明 ------------ ------------------ Node.js 后端运行环境 Express API 服务 Playwright 浏览器自动化采集 JSON 数据缓存存储 ------------------------------------------------------------------------ ## 数据采集 技术 说明 ---------------- ------------------ Playwright 自动打开官网页面 浏览器接口拦截 捕获节目 API 自动滚动 加载更多节目 JSON缓存 本地节目数据存储 ------------------------------------------------------------------------ ## 视频播放技术 技术 说明 --------------------------- -------------------- HLS (HTTP Live Streaming) 视频流协议 hls.js 浏览器 HLS 解码 Artplayer 视频播放器 UI 控件 ------------------------------------------------------------------------ # 项目架构 ``` text 官网接口 gdtv-api.gdtv.cn │ ▼ Playwright 浏览器采集 │ ▼ 本地 JSON 缓存 backServer/data/qishier-cache.json │ ▼ Node API /api/qishier/* │ ▼ Vue3 前端 Artplayer + HLS ``` ------------------------------------------------------------------------ # 核心功能 功能 技术实现 ----------------- -------------------- 自动采集节目 Playwright 数据缓存 JSON API 服务 Express 视频播放 Artplayer + hls.js 自动下一集 Vue 状态管理 顺序 / 倒序播放 列表排序 播放进度记录 Cookie 懒加载节目列表 前端分页 组件化架构 Vue Components ------------------------------------------------------------------------ # 运行环境 环境 版本 ---------- ------------------------- Node.js ≥ 18 npm ≥ 9 浏览器 Chrome / Edge / Safari 操作系统 macOS / Linux / Windows ------------------------------------------------------------------------ # 项目目录结构 ``` text 72QishierPlayer │ ├─ src │ ├─ api │ │ └─ qishier.ts │ │ │ ├─ components │ │ └─ qishier │ │ ├─ QishierVideoPlayer.vue │ │ └─ QishierEpisodeList.vue │ │ │ ├─ views │ │ └─ QishierPlayer.vue │ │ │ └─ utils │ └─ playHistory.ts │ ├─ backServer │ ├─ data │ │ └─ qishier-cache.json │ │ │ ├─ capture.js │ └─ server.js │ ├─ vite.config.ts └─ package.json ```