### 构建基于 Flask 的网站并集成 Python 爬虫和数据可视化 要实现一个基于 Flask 的网站，通过 Python 爬虫抓取数据并进行可视化展示，可以按照以下思路设计架构： #### 1. 数据采集阶段 利用 Python 爬虫技术从目标网站获取所需数据。常见的爬虫工具包括 `requests` 和 `BeautifulSoup` 或者更高级的框架如 Scrapy。 ```python import requests from bs4 import BeautifulSoup def fetch_data(url): headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)'} response = requests.get(url, headers=headers) soup = BeautifulSoup(response.text, 'html.parser') data_list = [] items = soup.find_all('div', class_='item') # 假设目标数据在一个 div 中 for item in items: title = item.find('h2').text.strip() description = item.find('p').text.strip() data_list.append({'title': title, 'description': description}) return data_list ``` 此代码片段展示了如何使用 `requests` 获取网页内容，并用 `BeautifulSoup` 解析 HTML 结构提取特定字段[^1]。 --- #### 2. 数据存储与管理 为了提高效率和可维护性，建议将爬取的数据存入数据库中（例如 SQLite），以便后续调用。 ```sql CREATE TABLE IF NOT EXISTS crawled_data ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, description TEXT NOT NULL ); ``` 在 Python 中连接 SQLite 并插入数据： ```python import sqlite3 def save_to_db(data_list): conn = sqlite3.connect('data.db') cursor = conn.cursor() cursor.execute(""" CREATE TABLE IF NOT EXISTS crawled_data ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, description TEXT NOT NULL ) """) for data in data_list: cursor.execute("INSERT INTO crawled_data (title, description) VALUES (?, ?)", (data['title'], data['description'])) conn.commit() conn.close() ``` 这段代码创建了一个名为 `crawled_data` 的表来存储爬取的信息，并提供了保存功能[^2]。 --- #### 3. 后端逻辑开发 Flask 是轻量级 Web 框架，适合快速搭建 API 接口或动态页面服务。定义路由以返回前端所需的 JSON 数据或者渲染模板。 ```python from flask import Flask, jsonify, render_template app = Flask(__name__) @app.route('/api/data', methods=['GET']) def get_crawled_data(): conn = sqlite3.connect('data.db') cursor = conn.cursor() cursor.execute("SELECT * FROM crawled_data LIMIT 10") # 返回前10条记录作为示例 rows = cursor.fetchall() result = [{'id': row[0], 'title': row[1], 'description': row[2]} for row in rows] conn.close() return jsonify(result) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True) ``` 上述代码设置了两个路由：一个是 `/api/data` 提供 RESTful 风格接口；另一个根路径加载静态 HTML 页面[^3]。 --- #### 4. 数据可视化 借助 JavaScript 库（如 Chart.js 或 D3.js）完成客户端上的图形绘制工作。如果希望简化流程，则可以直接嵌套 Matplotlib 图像至响应流之中。 ```python from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas from io import BytesIO import base64 @app.route('/visualize') def visualize(): fig, ax = plt.subplots() static_data = [ {"congestion_level": "Low", "count": 5}, {"congestion_level": "Medium", "count": 8}, {"congestion_level": "High", "count": 3} ] sns.countplot(data=static_data, x='congestion_level', order=['Low', 'Medium', 'High'], ax=ax) canvas = FigureCanvas(fig) img = BytesIO() fig.savefig(img, format='png') img.seek(0) plot_url = base64.b64encode(img.getvalue()).decode() return f'<img src="data:image/png;base64,{plot_url}">' ``` 该部分演示了服务器生成图片并通过 Base64 编码传递给浏览器的方式。 --- #### 总结 整个过程涵盖了从网络请求到本地持久化再到最终呈现的关键环节。每一步都紧密相连形成闭环解决方案。