322 lines
6.2 KiB
Markdown
322 lines
6.2 KiB
Markdown
# 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
|
||
```
|