CSDN数据大屏可视化【开源】

南宫乘风2024-12-20 16:08

项目简介

本次基于版本3 开源

版本3开源地址：https://github.com/nangongchengfeng/CsdnBlogBoard.git

版本1开源地址：https://github.com/nangongchengfeng/CSDash.git

这是一个基于 Python 的 CSDN 博客数据可视化看板项目，通过爬虫采集 CSDN 博客数据，并以现代化的可视化界面展示博主的各项数据指标。该项目采用前后端分离架构，集成了数据采集、数据存储、API 服务和数据可视化等多个功能模块。
版本一
版本二

版本三

技术栈

后端技术

  • Python Flask: 作为 Web 框架，提供 RESTful API 服务
  • SQLAlchemy: ORM 框架，用于数据库操作
  • BeautifulSoup4: 网页解析，用于爬虫数据提取
  • Requests: HTTP 请求库，用于数据爬取

前端技术

  • ECharts: 强大的数据可视化图表库
  • Axios: HTTP 客户端，用于前后端数据交互
  • 现代 CSS: Flexbox 布局、CSS 变量、响应式设计

核心功能模块

1. 数据采集模块

数据采集模块通过spider.py实现，是项目的核心组件之一。该模块采用了多种技术和策略来确保数据采集的准确性、稳定性和实时性。

1.1 核心技术栈
  • Requests: 处理 HTTP 请求，支持自定义请求头和超时设置
  • BeautifulSoup4: 使用 lxml 解析器进行高效的 HTML 解析
  • 正则表达式(re): 用于精确提取数字和特定格式的数据
  • SQLAlchemy: 实现数据持久化和 ORM 映射
  • 随机延时策略 : 使用 random.uniform() 避免频繁请求
1.2 数据采集功能
1.2.1 博主基础信息采集

  • 采集内容：

    • 用户名和头像
    • 文章数量统计
    • 粉丝数和访问量
    • 点赞和评论数
    • 等级和积分信息
    • 博主排名数据

  • 技术实现：

    python 复制代码 
    # 示例：用户信息提取
user_info = soup.find('div', class_='user-info d-flex flex-column profile-intro-name-box')
author_name = user_info.find('a').get_text(strip=True)
1.2.2 文章分类信息采集

  • 采集内容：

    • 专栏名称和链接
    • 专栏文章数量
    • 订阅人数统计
    • 阅读量和收藏数
    • 专栏唯一标识

  • 技术实现：

    python 复制代码 
    # 示例：分类信息提取
spans = soup.find_all('a', attrs={'class': 'special-column-name'})
for span in spans:
    href = span.get('href')
    blog_column = span.text.strip()
1.3 错误处理机制

  1. 多级异常处理

    • 请求异常捕获
    • 数据解析异常处理
    • 数据库操作异常处理

  2. 重试机制

    python 复制代码 
    max_retries = 3
retry_count = 0
while retry_count < max_retries:
    try:
        # 请求逻辑
    except Exception:
        retry_count += 1
        time.sleep(5)  # 失败后等待
1.4 数据更新策略

  1. 增量更新机制

    • 检查数据是否存在
    • 根据情况执行更新或插入
    • 保持数据时效性

  2. 数据一致性保证

    python 复制代码 
    with app.app_context():
    existing_info = Info.query.filter_by(author_name=author_name).first()
    if existing_info:
        # 更新现有记录
    else:
        # 插入新记录
1.5 性能优化策略

  1. 请求优化

    • 自定义请求头
    • 连接超时设置
    • 随机延时控制

  2. 解析优化

    • 使用 lxml 解析器提升性能
    • 精确的选择器定位
    • 数据预处理和清洗

  3. 存储优化

    • 批量数据处理
    • 事务管理
    • 会话复用
1.6 反爬虫策略应对

  1. 请求头模拟

    python 复制代码 
    headers = {
    'User-Agent': 'Mozilla/5.0 (MSIE 10.0; Windows NT 6.1; Trident/5.0)',
    'referer': 'https://passport.csdn.net/login'
}

  2. 访问频率控制

    • 随机延时间隔
    • 请求限速
    • IP 代理支持（预留）

2. 数据存储模块

数据存储模块采用 SQLAlchemy ORM 框架进行数据建模，实现了高效的数据持久化和查询操作。该模块设计了三个核心数据模型，每个模型都针对特定的数据场景进行了优化。

2.1 数据模型设计
2.1.1 博主信息模型 (Info)
python 复制代码 
class Info(db.Model):
    __tablename__ = 'info'

    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    date = db.Column(db.Text)                # 数据更新时间
    head_img = db.Column(db.Text)           # 博主头像URL
    author_name = db.Column(db.Text)        # 博主用户名
    article_num = db.Column(db.Text)        # 文章总数
    fans_num = db.Column(db.Text)           # 粉丝数量
    like_num = db.Column(db.Text)           # 获赞数量
    comment_num = db.Column(db.Text)        # 评论数量
    level = db.Column(db.Text)              # 博主等级
    visit_num = db.Column(db.Text)          # 访问量
    score = db.Column(db.Text)              # 积分
    rank = db.Column(db.Text)               # 排名

特点说明：

  • 使用自增主键确保记录唯一性
  • 采用 Text 类型存储可变长度文本
  • 包含完整的博主数据画像
  • 支持时间序列分析（通过 date 字段）
2.1.2 文章分类模型 (Categorize)
python 复制代码 
class Categorize(db.Model):
    __tablename__ = 'categorize'

    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    href = db.Column(db.Text)               # 分类链接
    categorize = db.Column(db.Text)         # 分类名称
    categorize_id = db.Column(db.BigInteger) # 分类ID
    column_num = db.Column(db.BigInteger)    # 专栏数量
    num_span = db.Column(db.BigInteger)      # 订阅数量
    article_num = db.Column(db.BigInteger)   # 文章数量
    read_num = db.Column(db.BigInteger)      # 阅读量
    collect_num = db.Column(db.BigInteger)   # 收藏数

特点说明：

  • 使用 BigInteger 类型存储大数值数据
  • 支持分类数据的统计分析
  • 包含完整的分类元数据
  • 可追踪分类的受欢迎程度
2.1.3 文章详情模型 (Article)
python 复制代码 
class Article(db.Model):
    __tablename__ = 'article'

    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    url = db.Column(db.Text)                # 文章链接
    title = db.Column(db.Text)              # 文章标题
    date = db.Column(db.Text)               # 发布日期
    read_num = db.Column(db.BigInteger)     # 阅读数
    comment_num = db.Column(db.BigInteger)  # 评论数
    type = db.Column(db.Text)               # 文章类型

特点说明：

  • 记录文章的基本信息和统计数据
  • 支持文章时间序列分析
  • 可追踪章的受欢迎程度
  • 便于文章分类统计
2.2 数据库优化策略

  1. 字段类型优化

    • 使用 BigInteger 存储大数值，避免数值溢出
    • 采用 Text 类型存储变长文本，节省存储空间
    • 主键使用自增 Integer，提高插入性能

  2. 查询性能优化

    • 可以根据需要添加索引
    • 支持复杂的聚合查询
    • 优化的数据结构设计

  3. 数据一致性保证

    • 主键约束确保记录唯一性
    • 适当的字段类型确保数据完整性
    • 支持事务操作
2.3 数据操作示例
  1. 数据插入
python 复制代码 
new_info = Info(
    author_name="博主名称",
    article_num="100",
    fans_num="1000"
)
db.session.add(new_info)
db.session.commit()
  1. 数据查询
python 复制代码 
# 获取博主信息
author_info = Info.query.filter_by(author_name="博主名称").first()

# 获取分类统计
categories = Categorize.query.order_by(Categorize.read_num.desc()).all()

# 获取热门文章
hot_articles = Article.query.order_by(Article.read_num.desc()).limit(10).all()
  1. 数据更新
python 复制代码 
info = Info.query.filter_by(author_name="博主名称").first()
info.fans_num = str(int(info.fans_num) + 1)
db.session.commit()

3. 可视化展示模块

前端采用现代化的可视化方案，基于 ECharts 实现了丰富的数据可视化功能，并通过 Axios 实现了与后端的数据交互。

3.1 技术架构

  1. 核心技术

    • ECharts 5.5.1：数据可视化库
    • Axios：HTTP 客户端
    • CSS3：现代布局和动画
    • Flexbox：响应式布局

  2. 设计规范

    css 复制代码 
    :root {
  --bg-primary: #f7f8fa;
  --bg-secondary: #ffffff;
  --text-primary: #333333;
  --text-secondary: #555555;
  --accent-color: #0066cc;
  --border-radius: 12px;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
3.2 图表组件实现
3.2.1 柱状图（季度数据分析）

  1. 数据流程

    javascript 复制代码 
    async function updateBarChart() {
  // 1. 获取数据
  const response = await axios.get("/api/quarter");

  // 2. 数据转换
  const dimensions = [
    ...Object.keys(chartData[0]).filter((key) => key !== "category"),
  ];
  const source = chartData.map((item) => ({
    product: item.category,
    ...item,
  }));

  // 3. 图表配置
  const option = {
    legend: {},
    tooltip: {},
    dataset: {
      dimensions: dimensions,
      source: source,
    },
    xAxis: { type: "category" },
    yAxis: {},
    series: dimensions.slice(1).map((dim) => ({
      type: "bar",
      name: dim,
    })),
  };
}

  2. 交互特性

    • 动态数据加载
    • 点击事件响应
    • 自适应布局
3.2.2 饼图（分类占比分析）

  1. 实现细节

    javascript 复制代码 
    async function updatePieChart() {
  // 1. 数据获取
  const response = await axios.get("/api/categorize");

  // 2. 图表配置
  const option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    series: [
      {
        name: "分类统计",
        type: "pie",
        radius: ["30%", "70%"],
        data: chartData,
        label: {
          show: true,
          position: "outside",
          formatter: "{b}: {d}%",
        },
      },
    ],
  };
}

  2. 视觉优化

    • 内外半径设计
    • 标签自动布局
    • 悬停动画效果
3.2.3 混合图表（阅读量分析）
javascript 复制代码 
async function updateMixChart() {
  const option = {
    color: ["#3E82F7", "#F86C6B"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["文章数", "阅读量"],
    },
    grid: {
      top: "10%",
      bottom: "25%",
      right: "10%",
    },
  };
}
3.3 响应式布局实现

  1. 布局结构

    html 复制代码 
    <div class="dashboard-container">
  <div class="top-section">
    <div class="mac-header">...</div>
    <div class="stats-grid">...</div>
  </div>
  <!-- 图表容器 -->
</div>

  2. 样式优化

    css 复制代码 
    .dashboard-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 15px;
  gap: 15px;
}
3.4 数据更新机制

  1. 初始化流程

    javascript 复制代码 
    function initCharts() {
  updateBarChart();
  updatePieChart();
  updateMixChart();
  updateHeatmap();
  updateArticleList();
}

  2. 数据刷新策略

    • 页面加载时初始化
    • 用户交互触发更新
    • 定时自动刷新
3.5 交互设计

  1. 图表联动

    • 点击饼图更新文章列表
    • 柱状图分类筛选
    • 数据钻取功能

  2. 视觉反馈

    css 复制代码 
    .stat-card:hover,
.chart-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}
3.6 性能优化

  1. 加载优化

    • 异步数据加载
    • 图表按需渲染
    • 防抖和节流处理

  2. 渲染优化

    • 合理的图表配置
    • 数据预处理
    • 动画性能调优

4. 后端实现逻辑流程

4.1 核心技术栈
  • Flask: Web 框架
  • Blueprint: 路由模块化
  • Cache: 文件系统缓存
  • SQLAlchemy: ORM 数据库操作
  • PyMySQL: MySQL 数据库驱动
4.2 系统架构
4.3 核心功能实现
4.3.1 应用初始化
python 复制代码 
app = Flask(__name__)
# 配置缓存
cache.init_app(app, config={
    'CACHE_TYPE': 'filesystem',
    'CACHE_DIR': 'cache-directory'
})
# 数据库配置
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://user:pass@host:port/db'
db.init_app(app)
4.3.2 路由注册机制
python 复制代码 
DEFAULT_BLUEPRINT = [
    (cs, '/'),  # CSDN API蓝图
]
url_path_prefix = "/api"

def config_blueprint(app):
    for blueprint, url_prefix in DEFAULT_BLUEPRINT:
        url_prefix = url_path_prefix + url_prefix
        app.register_blueprint(blueprint, url_prefix=url_prefix)
4.4 API 接口设计
4.4.1 数据统计接口
  1. 季度数据统计
python 复制代码 
@cs.route('/quarter')
@cache.cached(timeout=60)
def GetQuarter():
    """获取每年每季度博客数量"""
    year_quarter_count = defaultdict(lambda: defaultdict(int))
    data = GetArticle()
    for article in data:
        year = article["year"]
        quarter = article["quarter"]
        year_quarter_count[year][quarter] += 1
    return Result.success(result)
  1. 分类数据统计
python 复制代码 
@cs.route('/categorize')
@cache.cached(timeout=60)
def Pie():
    """获取文章分类统计"""
    categorize_data = Categorize.query.all()
    pie_data = [
        {"value": item.article_num, "name": item.categorize}
        for item in categorize_data
    ]
    return Result.success(pie_data)
4.4.2 数据处理流程
4.5 性能优化策略

  1. 缓存优化

    • 使用文件系统缓存
    • 60 秒缓存过期时间
    • 针对高频访问接口启用缓存

  2. 数据处理优化

    • 使用 defaultdict 优化数据聚合
    • 批量数据查询
    • 查询 据预处理和转换

  3. 查询优化

    • ORM 延迟加载
    • 查询结果缓存
    • 合理的数据索引
4.6 数据流转流程
4.7 错误处理机制

  1. 全局异常处理

    python 复制代码 
    try:
    # 业务逻辑
except Exception as e:
    print(f"Error: {str(e)}")
    return Result.error(str(e))

  2. 数据验证

    python 复制代码 
    if not data or not data.labels:
    return Result.error("Invalid data format")

  3. 结果封装

    python 复制代码 
    class Result:
    @staticmethod
    def success(data):
        return jsonify({"code": 200, "data": data})

    @staticmethod
    def error(msg):
        return jsonify({"code": 500, "msg": msg})

技术总结

1. 技术栈全景图

相关推荐
TenniCC1 小时前
python 中使用pip操作flask离线下载（包含依赖包下载）和安装
python·flask·pip
宸码1 小时前
【机器学习】【集成学习——决策树、随机森林】从零起步：掌握决策树、随机森林与GBDT的机器学习之旅
人工智能·python·算法·决策树·随机森林·机器学习·集成学习
Mobius80862 小时前
探索 Seaborn Palette 的奥秘：为数据可视化增色添彩
图像处理·python·信息可视化·数据分析·pandas·matplotlib·数据可视化
星霜旅人2 小时前
【Python】pandas库---数据分析
python
小陈phd2 小时前
深度学习之目标检测——RCNN
python·深度学习·算法·计算机视觉
从以前3 小时前
Python 爱心代码实现动态爱心图案展示
python
旷野..4 小时前
Python构造方法：对象的“开机启动程序”
开发语言·python
觅远4 小时前
python实现Excel转图片
开发语言·python·excel
Code_流苏4 小时前
VSCode 搭建Python编程环境 2024新版图文安装教程（Python环境搭建+VSCode安装+运行测试+背景图设置）
ide·vscode·python·python环境搭建·测试运行
热门推荐
01机密计算--基于可信执行环境（TEE）的隐私计算技术02文心一言最新重磅发布！03(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明04解决：使用WileyNJDv5_Template模板时，无法生成pdf文件。05如何解决电脑无声问题：排除故障的几种常见方法06玄机平台应急响应—webshell查杀07数据可视化揭示人口趋势：从数字到图像的转变08WPS-0DAY-20230809的分析和利用复现09Docker 夺命连环 15 问10如何使用ChatGPT创作一个小说式的虚构的世界