72QishierPlayer/README.md

# 72QishierPlayer

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

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

---

# 项目特点

- 自动采集《七十二家房客》节目列表
- 自动滚动加载更多节目
- 自动去重并缓存到 JSON
- Node API 提供数据
- Vue3 播放器展示
- HLS.js 播放 m3u8 视频
- Cookie 记录上次观看进度
- 前端分页加载，避免一次加载过多图片

---
获取的空数据
```json

{
  "updatedAt": "2026-03-10T18:00:00Z",
  "name": "七十二家房客",
  "items": []
}
```

# 安装

## 1 安装前端依赖

```
npm install
```

安装播放器依赖：

```
npm install axios hls.js
```

---

## 2 安装后端依赖

进入后端目录：

```
cd backServer
```

安装依赖：

```
npm install
```

安装 Playwright 浏览器：

```
npx playwright install chromium
```

---

# 运行项目

## 1 采集节目数据

```
npm run capture
```

程序会自动：

1. 启动浏览器
2. 打开页面

```
https://www1.gdtv.cn/tvColumn/768
```

3. 自动滚动页面
4. 自动点击 **加载更多**
5. 捕获接口数据
6. 写入缓存

缓存文件：

```
backServer/data/qishier-cache.json
```

---

## 2 启动 Node API

在 `backServer` 目录运行：

```
npm run server
```

API 地址：

```
http://localhost:3000/api/qishier/all
```

返回示例：

```
{
  "total": 1141,
  "list": []
}
```

---

## 3 启动 Vue 前端

回到项目根目录：地址：http://localhost:5173

```
npm run dev
```


---

# 项目架构

```
官网接口
gdtv-api.gdtv.cn
│
▼
Playwright 浏览器采集
│
▼
本地 JSON 缓存
backServer/data/qishier-cache.json
│
▼
Node API
http://localhost:3000/api/qishier/all
│
▼
Vue 播放器
http://localhost:5173
```

---

# 项目目录

```
72QishierPlayer
│
├─ src
│  ├─ api
│  │   └─ qishier.ts
│  │
│  ├─ views
│  │   └─ QishierPlayer.vue
│  │
│  ├─ App.vue
│  ├─ main.ts
│  └─ assets
│
├─ backServer
│  │
│  ├─ data
│  │   └─ qishier-cache.json
│  │
│  ├─ capture.js
│  ├─ server.js
│  └─ package.json
│
├─ vite.config.ts
└─ package.json
```

---



# 播放器功能

播放器支持：

- m3u8 视频播放
- HLS.js 播放器
- 节目列表分页加载
- 懒加载封面图
- 自动播放
- 自动恢复观看进度

观看记录存储在 Cookie：

```
qishier_last_episode
```

刷新页面会自动恢复上次观看。

---

# 数据缓存机制

缓存文件：

```
backServer/data/qishier-cache.json
```

缓存策略：

- 新数据自动追加
- 根据 `id` 自动去重
- 避免重复节目

---

# 技术栈

前端：

- Vue 3
- Vite
- TypeScript
- Axios
- HLS.js

后端：

- Node.js
- Express
- Playwright

数据：

- JSON 本地缓存

---

# 免责声明

本项目仅用于：

- 技术学习
- 数据采集研究
- 视频播放技术演示

请勿用于商业用途。