168 lines
7.9 KiB
HTML
168 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>微信公众号文章爬虫系统</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header class="header">
|
||
<h1>🚀 微信公众号文章爬虫系统</h1>
|
||
<p class="subtitle">Wechat Official Account Article Crawler</p>
|
||
</header>
|
||
|
||
<div class="main-content">
|
||
<!-- 功能选择卡片 -->
|
||
<div class="feature-cards">
|
||
<div class="card" id="card-homepage">
|
||
<div class="card-icon">🏠</div>
|
||
<h3>提取公众号主页</h3>
|
||
<p>输入文章链接获取公众号主页链接</p>
|
||
<button class="btn btn-primary" onclick="showSection('homepage')">进入</button>
|
||
</div>
|
||
|
||
<div class="card" id="card-single">
|
||
<div class="card-icon">📄</div>
|
||
<h3>下载单篇文章</h3>
|
||
<p>根据链接下载单篇文章</p>
|
||
<button class="btn btn-primary" onclick="showSection('single')">进入</button>
|
||
</div>
|
||
|
||
<div class="card" id="card-list">
|
||
<div class="card-icon">📋</div>
|
||
<h3>获取文章列表</h3>
|
||
<p>获取公众号所有文章列表</p>
|
||
<button class="btn btn-primary" onclick="showSection('list')">进入</button>
|
||
</div>
|
||
|
||
<div class="card" id="card-batch">
|
||
<div class="card-icon">📦</div>
|
||
<h3>批量下载文章</h3>
|
||
<p>批量下载文章详细内容</p>
|
||
<button class="btn btn-primary" onclick="showSection('batch')">进入</button>
|
||
</div>
|
||
|
||
<div class="card" id="card-data">
|
||
<div class="card-icon">📊</div>
|
||
<h3>数据管理</h3>
|
||
<p>查看已下载的文章数据</p>
|
||
<button class="btn btn-primary" onclick="showSection('data')">进入</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提取公众号主页区域 -->
|
||
<div class="section" id="section-homepage" style="display:none;">
|
||
<div class="section-header">
|
||
<h2>🏠 提取公众号主页</h2>
|
||
<button class="btn btn-secondary" onclick="showSection('home')">返回</button>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>公众号文章链接：</label>
|
||
<input type="text" id="homepage-url" placeholder="请输入公众号下任意一篇已发布的文章链接...">
|
||
<small>支持公众号文章完整URL，无需Cookie即可获取公众号主页链接</small>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button class="btn btn-success" onclick="extractHomepage()">提取主页链接</button>
|
||
<button class="btn btn-info" onclick="loadExampleUrl()">查看示例</button>
|
||
</div>
|
||
<div class="result" id="homepage-result"></div>
|
||
</div>
|
||
|
||
<!-- 下载单篇文章区域 -->
|
||
<div class="section" id="section-single" style="display:none;">
|
||
<div class="section-header">
|
||
<h2>📄 下载单篇文章</h2>
|
||
<button class="btn btn-secondary" onclick="showSection('home')">返回</button>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>文章链接：</label>
|
||
<input type="text" id="article-url" placeholder="请输入微信文章链接...">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="save-image" checked> 保存图片
|
||
</label>
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="save-content" checked> 保存内容
|
||
</label>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button class="btn btn-success" onclick="downloadSingleArticle()">开始下载</button>
|
||
</div>
|
||
<div class="result" id="single-result"></div>
|
||
</div>
|
||
|
||
<!-- 获取文章列表区域 -->
|
||
<div class="section" id="section-list" style="display:none;">
|
||
<div class="section-header">
|
||
<h2>📋 获取文章列表</h2>
|
||
<button class="btn btn-secondary" onclick="showSection('home')">返回</button>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Access Token URL：</label>
|
||
<textarea id="access-token" placeholder="请粘贴从Fiddler获取的完整URL..." rows="4"></textarea>
|
||
<small>包含 __biz, uin, key, pass_ticket 等参数的完整URL</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>获取页数：</label>
|
||
<input type="number" id="pages" value="1" min="1" max="999">
|
||
<small>留空表示获取全部</small>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button class="btn btn-success" onclick="getArticleList()">开始获取</button>
|
||
</div>
|
||
<div class="result" id="list-result"></div>
|
||
</div>
|
||
|
||
<!-- 批量下载区域 -->
|
||
<div class="section" id="section-batch" style="display:none;">
|
||
<div class="section-header">
|
||
<h2>📦 批量下载文章</h2>
|
||
<button class="btn btn-secondary" onclick="showSection('home')">返回</button>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>公众号名称或文章链接：</label>
|
||
<input type="text" id="official-account" placeholder="请输入公众号名称或任意一篇文章链接...">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="batch-save-image"> 保存图片
|
||
</label>
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="batch-save-content" checked> 保存内容
|
||
</label>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button class="btn btn-success" onclick="batchDownload()">开始批量下载</button>
|
||
</div>
|
||
<div class="result" id="batch-result"></div>
|
||
</div>
|
||
|
||
<!-- 数据管理区域 -->
|
||
<div class="section" id="section-data" style="display:none;">
|
||
<div class="section-header">
|
||
<h2>📊 数据管理</h2>
|
||
<button class="btn btn-secondary" onclick="showSection('home')">返回</button>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button class="btn btn-info" onclick="loadDataList()">刷新列表</button>
|
||
<button class="btn btn-warning" onclick="openDataFolder()">打开数据文件夹</button>
|
||
</div>
|
||
<div class="data-list" id="data-list">
|
||
<p class="text-center">点击"刷新列表"加载数据...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="footer">
|
||
<p>© 2025 微信公众号文章爬虫系统 | 仅供学习使用</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|