帮我写一个html的爬取蔚蓝书店的网页按钮有开始爬取,保存到MongoDB,爬取数据展示,数据爬取进度展示
时间: 2024-06-08 20:12:18 浏览: 163
蔚蓝网上书店首页代码
好的,以下是一个简单的HTML页面代码,可以实现你所需的功能:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蔚蓝书店数据爬取</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#start-btn').click(function() {
$.ajax({
url: '/start',
type: 'GET',
success: function() {
console.log('开始爬取数据');
},
error: function() {
console.log('请求失败,请检查服务器!');
}
});
});
$('#show-btn').click(function() {
$.ajax({
url: '/show',
type: 'GET',
success: function(data) {
$('#show-data').html(data);
},
error: function() {
console.log('请求失败,请检查服务器!');
}
});
});
$('#progress-btn').click(function() {
$.ajax({
url: '/progress',
type: 'GET',
success: function(data) {
$('#progress-data').html(data);
},
error: function() {
console.log('请求失败,请检查服务器!');
}
});
});
});
</script>
</head>
<body>
<h1>蔚蓝书店数据爬取</h1>
<button id="start-btn">开始爬取</button>
<br><br>
<button id="show-btn">爬取数据展示</button>
<div id="show-data"></div>
<br><br>
<button id="progress-btn">数据爬取进度展示</button>
<div id="progress-data"></div>
</body>
</html>
```
上述代码中,我们使用了jQuery的ajax方法来实现异步请求。我们定义了三个按钮:开始爬取、爬取数据展示、数据爬取进度展示。
当点击开始爬取按钮时,发送GET请求到服务器的`/start`路由,表示开始爬取数据。当点击爬取数据展示按钮时,发送GET请求到服务器的`/show`路由,获取爬取的数据并展示在页面上。当点击数据爬取进度展示按钮时,发送GET请求到服务器的`/progress`路由,获取数据爬取的进度并展示在页面上。
接下来,我们需要在服务器端实现这些路由。
```python
from flask import Flask, render_template
from pymongo import MongoClient
import threading
import time
import requests
import json
app = Flask(__name__)
# 连接MongoDB数据库
client = MongoClient('mongodb://localhost:27017/')
db = client['bookstore']
collection = db['book']
# 定义一个全局变量,表示爬取进度
progress = 0
# 定义一个爬取函数
def spider():
global progress
# 发送GET请求获取数据
res = requests.get('http://www.bookstore.com/data.json')
# 将数据插入到MongoDB中
data = json.loads(res.text)
for book in data:
collection.insert_one(book)
progress += 1
time.sleep(0.1)
# 定义路由
@app.route('/')
def index():
return render_template('index.html')
@app.route('/start')
def start_spider():
global progress
progress = 0
# 创建一个线程,执行爬取函数
t = threading.Thread(target=spider)
t.start()
return 'OK'
@app.route('/show')
def show_data():
data = ''
# 查询MongoDB中的所有数据
for book in collection.find():
data += '书名:{},作者:{},价格:{}<br>'.format(book['name'], book['author'], book['price'])
return data
@app.route('/progress')
def show_progress():
global progress
return str(progress)
if __name__ == '__main__':
app.run(debug=True)
```
在服务器端,我们使用了Flask框架来实现路由函数。在`/start`路由函数中,我们创建了一个线程来执行爬取函数,防止爬取过程中阻塞主线程。在爬取过程中,我们将爬取进度保存在全局变量`progress`中。在`/show`路由函数中,我们查询MongoDB中的所有数据,并将其以HTML格式返回。在`/progress`路由函数中,我们直接返回全局变量`progress`的值。
注意,上述代码中的`http://www.bookstore.com/data.json`应该替换为蔚蓝书店的数据接口。另外,MongoDB的连接字符串和数据库名、集合名应该根据实际情况进行修改。
希望能对你有所帮助!
阅读全文