222 lines
5.1 KiB
Markdown
222 lines
5.1 KiB
Markdown
|
# 🚀 微信公众号文章爬虫系统 - Web界面
|
|||
|
|
|
|||
|
|
一个现代化的Web界面，用于管理微信公众号文章爬虫功能。
|
|||
|
|
|
|||
|
|
## 📋 功能特性
|
|||
|
|
|
|||
|
|
### 🍪 Cookie 配置
|
|||
|
|
- 便捷的Cookie输入和保存
|
|||
|
|
- Cookie示例和验证
|
|||
|
|
- 实时状态反馈
|
|||
|
|
|
|||
|
|
### 📄 下载单篇文章
|
|||
|
|
- 支持微信文章链接输入
|
|||
|
|
- 可选择保存图片和内容
|
|||
|
|
- 实时下载进度显示
|
|||
|
|
|
|||
|
|
### 📋 获取文章列表
|
|||
|
|
- Access Token URL输入
|
|||
|
|
- 自定义获取页数
|
|||
|
|
- 批量文章信息获取
|
|||
|
|
|
|||
|
|
### 📦 批量下载文章
|
|||
|
|
- 公众号名称或链接输入
|
|||
|
|
- 批量下载文章详情
|
|||
|
|
- 智能进度跟踪
|
|||
|
|
|
|||
|
|
### 📊 数据管理
|
|||
|
|
- 已下载数据概览
|
|||
|
|
- 文章统计信息
|
|||
|
|
- 快速文件夹访问
|
|||
|
|
|
|||
|
|
## 🛠 使用方法
|
|||
|
|
|
|||
|
|
### 方法1：快速启动（推荐）
|
|||
|
|
|
|||
|
|
1. **双击启动脚本**
|
|||
|
|
```
|
|||
|
|
start_web.bat
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. **自动打开浏览器**
|
|||
|
|
- 系统会自动检测Python或使用PowerShell
|
|||
|
|
- 默认地址：`http://localhost:8000` 或 `http://localhost:8080`
|
|||
|
|
|
|||
|
|
### 方法2：手动启动
|
|||
|
|
|
|||
|
|
#### 使用Python（推荐）
|
|||
|
|
```bash
|
|||
|
|
cd frontend
|
|||
|
|
python -m http.server 8000
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 使用Node.js
|
|||
|
|
```bash
|
|||
|
|
cd frontend
|
|||
|
|
npx http-server -p 8000
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 使用其他Web服务器
|
|||
|
|
- 将frontend文件夹作为Web根目录即可
|
|||
|
|
|
|||
|
|
## 🎮 界面使用说明
|
|||
|
|
|
|||
|
|
### 主界面
|
|||
|
|
- **功能卡片**：点击不同卡片进入对应功能
|
|||
|
|
- **现代UI**：响应式设计，支持桌面和移动端
|
|||
|
|
- **状态指示**：实时显示操作状态和进度
|
|||
|
|
|
|||
|
|
### Cookie配置页面
|
|||
|
|
1. 点击"Cookie 配置"卡片
|
|||
|
|
2. 粘贴从Fiddler获取的Cookie内容
|
|||
|
|
3. 点击"保存Cookie"按钮
|
|||
|
|
4. 等待保存成功提示
|
|||
|
|
|
|||
|
|
### 下载单篇文章
|
|||
|
|
1. 进入"下载单篇文章"功能
|
|||
|
|
2. 输入微信文章完整链接
|
|||
|
|
3. 选择是否保存图片和内容
|
|||
|
|
4. 点击"开始下载"查看进度
|
|||
|
|
|
|||
|
|
### 获取文章列表
|
|||
|
|
1. 进入"获取文章列表"功能
|
|||
|
|
2. 粘贴包含认证参数的完整URL
|
|||
|
|
3. 设置获取页数（可选）
|
|||
|
|
4. 点击"开始获取"执行任务
|
|||
|
|
|
|||
|
|
### 批量下载
|
|||
|
|
1. 进入"批量下载文章"功能
|
|||
|
|
2. 输入公众号名称或任意文章链接
|
|||
|
|
3. 选择保存选项
|
|||
|
|
4. 点击"开始批量下载"
|
|||
|
|
|
|||
|
|
### 数据管理
|
|||
|
|
1. 进入"数据管理"功能
|
|||
|
|
2. 点击"刷新列表"查看已下载数据
|
|||
|
|
3. 可以查看文章详情或打开文件夹
|
|||
|
|
|
|||
|
|
## 🎨 界面特性
|
|||
|
|
|
|||
|
|
### 响应式设计
|
|||
|
|
- ✅ 桌面端优化体验
|
|||
|
|
- ✅ 平板和手机端兼容
|
|||
|
|
- ✅ 自适应布局
|
|||
|
|
|
|||
|
|
### 现代化UI
|
|||
|
|
- 🎨 渐变色彩搭配
|
|||
|
|
- 💫 平滑动画效果
|
|||
|
|
- 📱 卡片式设计语言
|
|||
|
|
- 🌟 悬停交互反馈
|
|||
|
|
|
|||
|
|
### 交互体验
|
|||
|
|
- ⌨️ 快捷键支持（ESC返回，Ctrl+Enter执行）
|
|||
|
|
- 🔄 实时进度条
|
|||
|
|
- 📊 状态指示器
|
|||
|
|
- 🔔 操作反馈提示
|
|||
|
|
|
|||
|
|
## 🔧 技术架构
|
|||
|
|
|
|||
|
|
### 前端技术栈
|
|||
|
|
- **HTML5**: 现代语义化标记
|
|||
|
|
- **CSS3**: Flexbox/Grid + 动画
|
|||
|
|
- **JavaScript**: ES6+ + jQuery
|
|||
|
|
- **响应式**: Mobile-First设计
|
|||
|
|
|
|||
|
|
### 文件结构
|
|||
|
|
```
|
|||
|
|
frontend/
|
|||
|
|
├── index.html # 主页面
|
|||
|
|
├── css/
|
|||
|
|
│ └── style.css # 样式文件
|
|||
|
|
├── js/
|
|||
|
|
│ └── app.js # 应用逻辑
|
|||
|
|
├── start_web.bat # 启动脚本
|
|||
|
|
└── README.md # 说明文档
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 与后端交互
|
|||
|
|
- 目前为演示版本，使用前端模拟
|
|||
|
|
- 预留了完整的API接口结构
|
|||
|
|
- 支持与命令行程序集成
|
|||
|
|
|
|||
|
|
## 🚀 部署选项
|
|||
|
|
|
|||
|
|
### 本地开发
|
|||
|
|
```bash
|
|||
|
|
# 克隆项目
|
|||
|
|
cd frontend
|
|||
|
|
|
|||
|
|
# 启动开发服务器
|
|||
|
|
python -m http.server 8000
|
|||
|
|
# 或
|
|||
|
|
npx http-server -p 8000
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 生产环境
|
|||
|
|
- **Nginx**: 部署静态文件
|
|||
|
|
- **Apache**: 配置虚拟主机
|
|||
|
|
- **IIS**: Windows服务器部署
|
|||
|
|
- **Docker**: 容器化部署
|
|||
|
|
|
|||
|
|
## 📊 浏览器兼容性
|
|||
|
|
|
|||
|
|
| 浏览器 | 版本 | 支持状态 |
|
|||
|
|
|--------|------|---------|
|
|||
|
|
| Chrome | 60+ | ✅ 完全支持 |
|
|||
|
|
| Firefox | 55+ | ✅ 完全支持 |
|
|||
|
|
| Safari | 12+ | ✅ 完全支持 |
|
|||
|
|
| Edge | 79+ | ✅ 完全支持 |
|
|||
|
|
| IE | 11 | ⚠️ 基础支持 |
|
|||
|
|
|
|||
|
|
## 🐛 常见问题
|
|||
|
|
|
|||
|
|
### Q: 页面打不开或样式异常？
|
|||
|
|
A: 确保所有文件在同一目录下，使用HTTP服务器访问（不是file://协议）
|
|||
|
|
|
|||
|
|
### Q: 功能按钮点击无反应？
|
|||
|
|
A: 检查浏览器控制台是否有JavaScript错误，确保jQuery正常加载
|
|||
|
|
|
|||
|
|
### Q: 进度条不显示？
|
|||
|
|
A: 当前为演示版本，进度为模拟效果。实际部署需要连接后端API
|
|||
|
|
|
|||
|
|
### Q: 如何连接实际的后端？
|
|||
|
|
A: 修改`js/app.js`中的API调用部分，替换模拟逻辑为实际HTTP请求
|
|||
|
|
|
|||
|
|
## 🔮 后续计划
|
|||
|
|
|
|||
|
|
### v1.1 计划功能
|
|||
|
|
- [ ] 真实后端API集成
|
|||
|
|
- [ ] WebSocket实时通信
|
|||
|
|
- [ ] 文件上传拖拽功能
|
|||
|
|
- [ ] 任务队列管理
|
|||
|
|
|
|||
|
|
### v1.2 计划功能
|
|||
|
|
- [ ] 用户认证系统
|
|||
|
|
- [ ] 多公众号管理
|
|||
|
|
- [ ] 数据可视化图表
|
|||
|
|
- [ ] 导出功能增强
|
|||
|
|
|
|||
|
|
## 📄 开源协议
|
|||
|
|
|
|||
|
|
本项目仅供学习和研究使用，请遵守相关法律法规和服务条款。
|
|||
|
|
|
|||
|
|
## 🤝 贡献指南
|
|||
|
|
|
|||
|
|
1. Fork 本项目
|
|||
|
|
2. 创建功能分支
|
|||
|
|
3. 提交更改
|
|||
|
|
4. 发起 Pull Request
|
|||
|
|
|
|||
|
|
## 📞 支持联系
|
|||
|
|
|
|||
|
|
如有问题或建议，请通过以下方式联系：
|
|||
|
|
|
|||
|
|
- 📧 邮箱: your-email@example.com
|
|||
|
|
- 💬 Issues: 在GitHub提交Issue
|
|||
|
|
- 📱 QQ群: 123456789
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**⚠️ 免责声明**: 本工具仅供学习交流使用，请遵守相关法律法规和平台服务条款。使用者需自行承担使用风险。
|
|||
|
|
|
|||
|
|
**🌟 如果这个项目对您有帮助，请给个Star支持一下！**
|