You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

76 lines
2.9 KiB

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">湖南大学选课系统分析</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" href="/">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/courses">课程列表</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/analysis">数据分析</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-5">
<div class="jumbotron">
<h1 class="display-4">湖南大学选课系统分析</h1>
<p class="lead">本系统用于爬取、分析和可视化湖南大学选课系统的数据</p>
<hr class="my-4">
<p>点击下方按钮开始爬取课程数据</p>
<button id="crawlBtn" class="btn btn-primary btn-lg">爬取课程数据</button>
</div>
<div id="result" class="mt-4 d-none">
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">爬取成功!</h4>
<p id="resultMessage"></p>
<hr>
<a href="/courses" class="btn btn-secondary">查看课程列表</a>
<a href="/analysis" class="btn btn-primary">查看数据分析</a>
</div>
</div>
</div>
<script>
document.getElementById('crawlBtn').addEventListener('click', function() {
this.disabled = true;
this.textContent = '爬取中...';
fetch('/crawl', {
method: 'POST'
})
.then(response => response.json())
.then(data => {
if (data.success) {
document.getElementById('resultMessage').textContent = data.message;
document.getElementById('result').classList.remove('d-none');
}
})
.catch(error => {
console.error('Error:', error);
alert('爬取失败,请稍后重试');
})
.finally(() => {
this.disabled = false;
this.textContent = '爬取课程数据';
});
});
</script>
</body>
</html>