shengyudong/yixiaogao
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4fef65bd930b6ac88619d983c9539981db317a54
yixiaogao/frontend/README.md
shengyudong 46de43ce72 上传 frontend 文件夹
2025-11-27 18:32:24 +08:00

5.1 KiB
Raw Blame History

🚀 微信公众号文章爬虫系统 - Web界面

一个现代化的Web界面，用于管理微信公众号文章爬虫功能。

📋 功能特性

🍪 Cookie 配置

  • 便捷的Cookie输入和保存
  • Cookie示例和验证
  • 实时状态反馈

📄 下载单篇文章

  • 支持微信文章链接输入
  • 可选择保存图片和内容
  • 实时下载进度显示

📋 获取文章列表

  • Access Token URL输入
  • 自定义获取页数
  • 批量文章信息获取

📦 批量下载文章

  • 公众号名称或链接输入
  • 批量下载文章详情
  • 智能进度跟踪

📊 数据管理

  • 已下载数据概览
  • 文章统计信息
  • 快速文件夹访问

🛠 使用方法

方法1：快速启动（推荐）

  1. 双击启动脚本

    start_web.bat

  2. 自动打开浏览器

    • 系统会自动检测Python或使用PowerShell
    • 默认地址：http://localhost:8000 或 http://localhost:8080

方法2：手动启动

使用Python（推荐）

cd frontend
python -m http.server 8000

使用Node.js

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接口结构
  • 支持与命令行程序集成

🚀 部署选项

本地开发

# 克隆项目
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

📞 支持联系

如有问题或建议，请通过以下方式联系：

⚠️ 免责声明: 本工具仅供学习交流使用，请遵守相关法律法规和平台服务条款。使用者需自行承担使用风险。

🌟 如果这个项目对您有帮助，请给个Star支持一下！