72QishierPlayer 技术栈说明

一个基于 Vue3 + Vite + Node.js + Playwright + HLS.js + Artplayer 的《七十二家房客》在线播放项目。

本项目通过 浏览器自动采集官网数据 → 本地缓存 JSON → Node API 提供 → Vue 前端播放 的方式，解决官网接口 签名、401、分页限制 等问题，实现稳定播放。

---

运行与安装指南

本文档说明 72QishierPlayer 项目的安装与运行步骤。
项目由 Node.js 后端 + Vue3 前端 两部分组成，需要分别启动。

---

一、后端服务（Node.js）

后端主要负责：

• 提供节目 API
• 读取本地 JSON 数据
• 提供给前端播放列表

1. 安装依赖

进入后端目录：

cd backServer

安装依赖：

npm install

---

2. 启动后端服务

node server.js

默认接口地址：

http://localhost:3000

例如：

http://localhost:3000/api/qishier/list

---

3. 更新节目数据（可选）

如果需要重新采集节目数据：

node capture.js

该脚本会：

1. 启动浏览器自动采集
2. 打开节目页面
3. 自动加载更多节目
4. 捕获接口数据
5. 更新本地缓存

数据保存位置：

backServer/data/qishier-cache.json

---

二、前端服务（Vue3）

前端负责：

• 视频播放器
• 节目列表展示
• 自动下一集
• 播放进度记录

---

1. 安装前端依赖

进入前端目录：

cd 72QishierPlayer

安装依赖：

npm install

---

2. 启动前端开发服务器

npm run dev

默认访问地址：

http://localhost:5173

---

三、开发模式运行流程

建议的启动顺序：

1. 启动 Node 后端
node server.js

2. 启动 Vue 前端
npm run dev

3. 浏览器访问
http://localhost:5173

---

四、生产环境部署

构建前端：

npm run build

构建完成后生成：

dist/

将 dist 部署到 Nginx 或静态服务器即可。

后端服务建议使用 PM2 运行：

pm2 start server.js --name qishier-api
pm2 save

---

五、常见问题

1. 播放器无法播放

确认：

• 后端服务已启动
• API 地址正常
• m3u8 视频链接有效

---

2. 没有节目数据

执行：

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 控件

---

项目架构

官网接口
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

---

项目目录结构

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