114-基于Python的1688电脑硬件数据可视化分析系统

1688 电脑硬件数据可视化分析系统技术文档

1. 项目概述

1.1 项目背景

本项目面向 1688 平台电脑硬件商品数据的采集后分析场景，基于 data/1688电脑硬件数据.csv 构建了一套集数据导入、清洗转换、业务管理、图表分析、可视化大屏、用户系统与后台管理于一体的 Web 可视化分析平台。

系统目标包括：

对 CSV 原始数据进行结构化清洗与业务特征提取
对电脑硬件市场进行多维度统计分析与可视化展示
提供登录、注册、个人中心、收藏、分组、备注等用户能力
提供管理员后台、角色权限控制、数据重导与导出能力
构建面向展示和分析的双模式前端页面

1.2 项目定位

本系统属于典型的"数据驱动型可视化分析平台"，兼具以下两类能力：

管理型能力：用户管理、数据管理、收藏管理、管理员治理
分析型能力：图表分析、多维展示、可视化大屏、数据洞察

1.3 数据来源

数据文件：data/1688电脑硬件数据.csv
数据内容：商品标题、关键词、价格、销量、商家名称、图片链接、详情链接、服务标签等
数据处理方式：系统启动时自动检测数据库是否已有数据，若为空则自动导入；管理员也可手动重导

2. 技术栈

2.1 后端技术栈

技术	版本	用途
Python	3.x	系统主开发语言
FastAPI	0.116.1	Web 应用框架，负责页面路由、接口服务
SQLAlchemy	2.0.43	ORM 持久层框架
PyMySQL	1.1.1	MySQL 数据库驱动
Jinja2	3.1.6	服务端模板渲染
python-multipart	0.0.20	表单提交支持
openpyxl	3.1.5	Excel 导出生成
Uvicorn	0.35.0	ASGI 运行服务

2.2 前端技术栈

技术	用途
Bootstrap 5	基础布局、响应式栅格、表单、按钮、下拉菜单
Jinja2 Template	前后端模板联动渲染
ECharts 5	图表可视化引擎
JavaScript	图表渲染、交互切换、导出、播报轮播
CSS3	主题皮肤、深色科技风格、布局美化、动画与交互

2.3 数据库与环境

项目	配置
数据库类型	MySQL
数据库名称	`design_114_pc`
地址	`localhost:3306`
用户名	`root`
密码	`123456`
字符集	`utf8mb4`

2.4 静态资源组织

系统当前已将关键前端依赖切为本地静态资源，避免页面对外部 CDN 的强依赖：

app/static/css/bootstrap.min.css
app/static/js/bootstrap.bundle.min.js
app/static/js/echarts.min.js
app/static/css/style.css
app/static/js/ui.js
app/static/js/analytics.js

3. 整体架构设计

3.1 架构模式

本项目采用"单体式 Web 应用 + 分层式业务组织"的架构模式，核心分层如下：

表现层
- 基于 FastAPI 路由 + Jinja2 模板
- 负责页面输出、表单提交、接口响应
业务层
- 由 services 与 routers 中的业务逻辑组成
- 负责数据导入、聚合分析、导出、权限控制等
数据访问层
- 基于 SQLAlchemy ORM
- 负责实体映射、数据库连接、查询与写入
数据存储层
- MySQL 存储业务数据
- CSV 作为系统外部原始数据输入源

3.2 系统架构图

text 复制代码

用户浏览器
   │
   ▼
FastAPI 应用入口（app/main.py）
   │
   ├── 页面路由层（routers）
   │     ├── 首页 / 健康检查
   │     ├── 登录注册
   │     ├── 个人中心
   │     ├── 数据管理
   │     ├── 收藏管理
   │     ├── 分析图表
   │     ├── 可视化大屏
   │     ├── 图片代理
   │     └── 管理后台
   │
   ├── 业务服务层（services）
   │     ├── 数据导入与清洗
   │     ├── 数据分析聚合
   │     ├── Excel 导出
   │     └── 图片抓取代理
   │
   ├── 权限与模板层
   │     ├── Session 登录态
   │     ├── 管理员鉴权
   │     └── Jinja2 渲染
   │
   └── ORM 持久层（models + database）
         └── MySQL / design_114_pc

3.3 目录结构

text 复制代码

pc/
├─ app/
│  ├─ main.py                 # FastAPI 应用入口
│  ├─ config.py               # 系统配置
│  ├─ database.py             # 数据库连接与自动升级
│  ├─ dependencies.py         # 登录态与权限依赖
│  ├─ security.py             # 密码哈希与校验
│  ├─ helpers.py              # Flash 消息工具
│  ├─ templating.py           # Jinja2 模板封装
│  ├─ models/                 # ORM 模型
│  ├─ routers/                # 路由控制器
│  ├─ services/               # 业务服务层
│  ├─ static/                 # 本地静态资源
│  └─ templates/              # 页面模板
├─ data/
│  └─ 1688电脑硬件数据.csv     # 原始数据源
├─ scripts/
│  └─ init_db.py              # 可选初始化脚本
├─ main.py                    # 根入口
├─ requirements.txt           # Python 依赖
├─ README.md                  # 简要说明
└─ 技术文档.md                # 本技术文档

4. 功能设计

4.1 用户与权限模块

4.1.1 注册功能

用户可通过注册页面创建账号，系统支持：

用户名唯一性校验
邮箱唯一性校验
两次密码一致性校验
首个注册用户自动设为管理员
注册后自动登录

4.1.2 登录功能

系统使用用户名 + 密码进行登录，登录时支持：

密码哈希校验
已停用账号拦截
Session 登录态写入

4.1.3 退出登录

用户退出后清空 Session，返回首页。

4.1.4 个人中心

个人中心提供：

显示名称修改
邮箱修改
个人简介修改
收藏统计概览
收藏类目偏好统计
收藏分组数量显示
当前角色显示

4.2 数据管理模块

数据管理页是系统的业务核心页面，支持：

标题关键词筛选
生态分组筛选
品牌筛选
商家名称筛选
排序切换
- 最新导入
- 价格升序
- 价格降序
- 销量降序
- GMV 降序
分页浏览
结果摘要展示
当前筛选上下文展示
当前页结果导出为 Excel
管理员执行 CSV 重导

4.3 硬件详情模块

详情页不仅展示基础商品信息，还提供对比分析能力：

商品详情展示
是否收藏状态展示
同生态相关样本推荐
同品牌样本推荐
当前商品与所属类目均值对比
当前商品与品牌均值对比
当前商品与商家均值对比
当前商品价格、销量在类目中的相对位置分析

4.4 收藏模块

收藏模块围绕"个人研究池"设计，支持：

收藏 / 取消收藏
收藏分组创建
收藏分组说明填写
收藏备注编辑
收藏分组归类
收藏统计概览
收藏类目分布
收藏商家分布
收藏分组分布
收藏数据导出 Excel

4.5 分析图表模块

分析图表页面用于"分析型浏览"，与大屏展示区分开来。

当前分析维度包括：

市场总览
- 价格 / 销量 / GMV 三维机会散点图
- 生态分组供给规模图
- 价格带对比图
- 高端 / 主流结构图
- 品牌热度 / GMV 图
品牌与品类
- 品牌 × 品类热力矩阵
- 品牌热度 / GMV 双轴图
- GMV 结构树图
- 品类供给规模图
- 关键词热度雷达图
商家与地域
- 头部商家 GMV 排名图
- 城市供给分布图
- 服务标签覆盖图
- 商家集中度图
- 供给分组对比图
机会与成交
- 机会评分 TOP10 图
- 关键词热度雷达图
- 高价值散点图
- 成交结构树图
- 高端结构图

此外支持：

通过导航栏下拉菜单切换分析维度
通过页面顶部下拉切换分析维度
图表 PNG 导出
图表筛选联动

4.6 可视化大屏模块

可视化大屏面向综合展示，适用于课堂演示、答辩和展示场景。

大屏主要图表包括：

生态分组供给规模
品牌热度 / GMV
城市供给分布
服务标签覆盖
价格带对比
高端结构
商家 GMV 排名
商家集中度
关键词热度
品牌品类热力矩阵
GMV 结构树图
三维机会散点图
机会评分图

并支持：

条件筛选联动
PNG 截图导出

4.7 管理员后台模块

后台管理页面主要面向管理员使用，支持：

系统用户统计
管理员数量统计
活跃用户统计
硬件样本数量统计
收藏与分组统计
用户角色调整
- 普通用户
- 管理员
用户启用 / 停用
用户列表导出 Excel

管理员控制中还额外加入了安全约束：

当前登录管理员不能取消自己的管理员角色
当前登录管理员不能停用自己
系统至少保留一名启用状态的管理员

4.8 媒体代理模块

由于 1688 商品图片外链存在防盗链和跨域限制，系统提供了图片代理层：

浏览器不直接请求外部图片
统一通过 /media/image 访问
后端远程抓取图片后返回
抓取失败时返回占位图
增加缓存控制头

4.9 数据导出模块

系统支持三类 Excel 导出：

硬件数据导出
收藏数据导出
用户数据导出

导出格式为 .xlsx，由 openpyxl 动态生成。

5. 核心技术实现

5.1 FastAPI 框架

FastAPI 是本系统的核心后端框架，主要承担以下职责：

页面路由与接口路由定义
表单参数接收
Query 参数接收
Session 中间件接入
响应对象构建
启动阶段数据库初始化与数据导入

应用启动入口位于：

main.py
app/main.py

5.2 SQLAlchemy ORM

SQLAlchemy 用于实现对象到数据库表的映射，主要优点：

避免手写大量 SQL
支持关系模型定义
支持聚合查询、分页查询、分组查询
与 FastAPI 依赖注入配合方便

数据库连接与会话管理位于：

app/database.py

5.3 Jinja2 服务端模板渲染

系统采用服务端渲染模式，主要特点：

页面首屏加载快
业务页面适合表单式系统开发
与 FastAPI 结合简单直接
模板可直接读取后端聚合数据

模板封装位于：

app/templating.py

其中还扩展了：

image_proxy_url：图片代理 URL 生成
asset_url：带版本号的静态资源 URL，解决浏览器缓存问题
urlencode：查询参数编码

5.4 Session 登录态管理

系统使用 Starlette 的 SessionMiddleware 进行登录态管理：

登录成功后写入 request.session["user_id"]
后续请求通过 get_current_user 自动恢复用户对象
退出登录时清空 Session

优点：

实现简单
适合中小型管理系统
与 Jinja2 SSR 页面模型天然匹配

5.5 密码安全实现

密码处理位于 app/security.py，采用：

PBKDF2 + SHA256
120000 次迭代
随机盐值
hmac.compare_digest 安全比较

这比明文保存密码或简单散列更安全，满足基础管理系统的安全要求。

5.6 自动数据库初始化与升级

app/database.py 中实现了数据库自动初始化逻辑：

自动检测数据库是否存在
若不存在则自动创建 design_114_pc
基于 ORM 自动建表
自动执行轻量级表结构升级

当前升级逻辑包括：

自动补充 users.role
自动补充 users.is_active
自动补充 favorites.group_id
自动补充 favorites.note

该机制避免了项目在迭代开发时因表结构差异导致无法启动。

5.7 Excel 导出技术

Excel 导出位于 app/services/exporters.py，使用 openpyxl 实现：

创建工作簿与工作表
动态写入表头和数据行
表头样式美化
自动列宽
冻结首行
写入文档属性

该方案适合导出中小规模分析结果和后台统计数据。

5.8 图片代理技术

图片代理位于：

app/routers/media.py
app/services/media.py

设计目的：

解决外链图片加载失败
避免浏览器直接请求 1688 图片资源
提升展示稳定性

5.9 ECharts 图表技术

系统全部核心图表基于 ECharts 5 实现，主要使用图表类型包括：

柱状图
折线图
饼图
玫瑰图
热力图
树图
漏斗图
雷达图
散点图

前端图表脚本主要位于：

app/static/js/analytics.js

5.10 Bootstrap 前端框架

Bootstrap 主要用于：

响应式栅格布局
下拉菜单
表单控件
按钮样式
导航结构
常见 UI 组件基础能力

项目在 Bootstrap 基础上叠加了大量自定义 CSS，形成了统一的深色硬件可视化视觉风格。

6. 数据模型设计

6.1 用户表 `users`

字段	类型	说明
id	Integer	主键
username	String(64)	用户名，唯一
email	String(255)	邮箱，唯一，可空
display_name	String(64)	显示名称
password_hash	String(255)	密码哈希
role	String(20)	角色：`admin` / `user`
is_active	Boolean	是否启用
bio	Text	个人简介
created_at	DateTime	创建时间
updated_at	DateTime	更新时间

6.2 硬件数据表 `hardware_items`

字段	类型	说明
id	Integer	主键
offer_id	String(64)	1688 商品唯一标识
search_keyword	String(120)	原始搜索关键词
category_group	String(64)	派生生态分组
product_title	String(500)	商品标题
brand	String(120)	品牌识别结果
price_text	String(64)	原始价格文本
price_value	Float	数值化价格
price_bucket	String(32)	价格带
sales_text	String(64)	原始销量文本
sales_value	Integer	数值化销量
has_sales	Boolean	是否存在销量数据
company_name	String(255)	商家名称
company_city	String(64)	商家城市
service_tags	String(255)	服务标签
service_score	Integer	服务标签数量
product_image	Text	商品图片地址
detail_url	Text	商品详情页地址
estimated_gmv	Float	估算 GMV
is_high_end	Boolean	高端硬件标记
is_outlier	Boolean	异常值标记
created_at	DateTime	创建时间
updated_at	DateTime	更新时间

6.3 收藏表 `favorites`

字段	类型	说明
id	Integer	主键
user_id	Integer	用户外键
hardware_id	Integer	硬件外键
group_id	Integer	分组外键，可空
note	Text	收藏备注
created_at	DateTime	收藏时间

约束：

(user_id, hardware_id) 唯一，防止重复收藏

6.4 收藏分组表 `favorite_groups`

字段	类型	说明
id	Integer	主键
user_id	Integer	用户外键
name	String(64)	分组名称
description	Text	分组说明
created_at	DateTime	创建时间
updated_at	DateTime	更新时间

约束：

(user_id, name) 唯一，防止同一用户下分组重名

7. 数据处理与分析设计

7.1 数据导入流程

CSV 导入流程如下：

text 复制代码

读取 CSV
  → 行级遍历
  → 价格解析
  → 销量解析
  → 分类映射
  → 品牌识别
  → 服务标签清洗
  → 城市提取
  → 高端标记
  → 异常值标记
  → 估算 GMV
  → offer_id 去重
  → 批量写入 MySQL

7.2 清洗与派生字段

导入阶段自动生成的关键业务字段如下：

price_value：价格文本转数值
sales_value：销量文本转数值
category_group：按关键词映射到硬件生态类别
brand：按标题和关键词识别品牌
price_bucket：价格带分层
company_city：从商家名称中提取城市/地区
service_score：服务标签数量评分
estimated_gmv：价格 × 销量
is_high_end：高端样本识别
is_outlier：异常样本识别

7.3 分类映射规则

系统当前将数据划分为以下生态分组：

处理器生态
主板生态
显卡生态
存储生态
内存生态
机箱散热
供电与网络
显示与外设
其他硬件

7.4 品牌识别规则

系统通过规则匹配方式识别常见品牌，包括但不限于：

AMD
Intel
NVIDIA
ASUS
MSI
Gigabyte
Kingston
Corsair
Samsung
WD
Seagate
DeepCool
TP-Link
Logitech
Dell
AOC

7.5 分析聚合能力

app/services/analytics.py 提供了核心聚合能力，包括：

样本总量统计
商家数量统计
高端样本统计
平均价格统计
平均销量统计
估算 GMV 统计
城市供给分布统计
价格带统计
服务标签频次统计
品牌热度统计
商家 GMV 排名
商家集中度统计
品牌 × 品类热力矩阵
GMV 结构树图数据
三维散点图数据
机会评分排序
自动洞察文本

7.6 机会评分模型

系统对生态类别计算机会评分，核心逻辑为：

text 复制代码

机会评分 = 平均价格 × log(1 + 平均销量) / 样本数

该评分本质上用于平衡：

客单价水平
销量热度
样本稀疏程度

其目的不是做严格学术预测，而是做面向可视化系统的业务排序指标。

8. 路由与接口设计

8.1 页面路由

路径	说明
`/`	首页
`/health`	健康检查
`/auth/login`	登录页
`/auth/register`	注册页
`/profile`	个人中心
`/hardware`	数据管理列表
`/hardware/{id}`	硬件详情页
`/favorites`	收藏页
`/analytics`	分析图表页
`/screen`	可视化大屏
`/admin`	管理后台

8.2 操作接口

路径	方法	说明
`/auth/login`	POST	登录提交
`/auth/register`	POST	注册提交
`/auth/logout`	POST	退出登录
`/profile`	POST	修改个人资料
`/hardware/{id}/favorite`	POST	收藏 / 取消收藏
`/hardware/reimport`	POST	管理员重导数据
`/favorites/groups`	POST	创建收藏分组
`/favorites/{favorite_id}`	POST	更新收藏备注与分组
`/admin/users/{user_id}/role`	POST	修改用户角色
`/admin/users/{user_id}/status`	POST	修改用户状态

8.3 数据接口

路径	方法	说明
`/api/analytics/dashboard`	GET	返回图表聚合数据
`/media/image`	GET	图片代理接口
`/hardware/export.xlsx`	GET	导出硬件数据
`/favorites/export.xlsx`	GET	导出收藏数据
`/admin/export/users.xlsx`	GET	导出用户数据

9. 前端设计说明

9.1 前端模式

项目采用"服务端渲染 + 前端增强交互"的混合模式：

页面框架由 Jinja2 服务端输出
图表区域由 ECharts 在前端渲染
筛选、图表切换、导出等交互由 JavaScript 增强

9.2 页面设计风格

整体风格为深色科技质感主题，强调：

硬件市场数据感
大屏展示感
控制台式布局
高对比度信息表达

9.3 前端脚本职责划分

`app/static/js/ui.js`

负责：

卡片悬浮交互
首页播报轮播逻辑

`app/static/js/analytics.js`

负责：

分析图表页加载与渲染
可视化大屏图表渲染
图表筛选联动
图表主题切换
图表导出 PNG

9.4 本地静态资源策略

为解决外部资源不可达引发的样式和图表失效问题，项目采用：

本地 Bootstrap CSS/JS
本地 ECharts JS
静态资源版本号参数防缓存

这保证了项目在内网、离线或受限网络环境下仍能正常运行。

10. 安全与权限设计

10.1 身份认证

系统采用基于 Session 的身份认证：

登录后将用户 ID 存入 Session
每次请求从 Session 恢复当前用户

10.2 角色权限

当前角色分为：

admin
user

权限划分如下：

功能	普通用户	管理员
浏览首页	√	√
查看图表和大屏	√	√
登录 / 注册	√	√
个人中心	√	√
收藏与分组	√	√
导出硬件数据	√	√
数据重导	×	√
管理后台	×	√
用户角色管理	×	√
用户状态管理	×	√
用户导出	×	√

10.3 管理员保护机制

为防止后台误操作导致系统失控，系统加入了以下防护：

禁止当前管理员把自己降为普通用户
禁止当前管理员停用自己
系统至少保留一名启用状态的管理员

11. 部署与运行说明

11.1 环境准备

安装 Python 3.x
安装 MySQL
创建数据库账号

默认连接配置：

text 复制代码

数据库：design_114_pc
地址：localhost
端口：3306
账号：root
密码：123456

11.2 安装依赖

powershell 复制代码

pip install -r requirements.txt

11.3 启动方式

11.4 环境变量

系统支持以下环境变量：

环境变量	说明
`APP_SECRET_KEY`	Session 密钥
`DATABASE_URL`	数据库连接地址
`IMPORT_BATCH_SIZE`	数据导入批大小
`APP_HOST`	服务主机
`APP_PORT`	服务端口
`APP_RELOAD`	是否开启热重载

11.5 访问地址

text 复制代码

http://127.0.0.1:8000

12. 项目技术亮点

12.1 数据驱动能力完整

项目不是简单的页面展示系统，而是完整实现了：

原始 CSV 数据导入
规则清洗
特征派生
多维统计分析
图表展示
管理与交互闭环

12.2 管理型与分析型能力融合

系统同时具备：

用户体系
收藏体系
后台权限
可视化分析
大屏展示
Excel 导出

这使项目不仅适合课程设计，也适合毕设或演示型系统交付。

12.3 前后端耦合适中

采用 FastAPI + Jinja2 + ECharts 的组合，相比前后端完全分离方案：

上手更快
结构清晰
维护成本低
更适合课程型项目

12.4 外链图片和 CDN 风险处理到位

系统通过：

图片代理
本地静态资源
静态资源版本号防缓存

有效解决了外部依赖导致的页面资源失效问题。

13. 后续可扩展方向

虽然项目已完成当前目标，但仍可继续扩展：

引入真正的数据库迁移工具
- 如 Alembic
完善管理员后台
- 操作日志
- 用户搜索
- 批量管理
引入更复杂的数据分析模型
- 聚类分析
- 价格预测
- 品牌竞争度分析
增加文件上传能力
- 管理员上传新的 CSV 数据源
增加报表模块
- PDF 导出
- 周报/月报自动生成
增强权限体系
- 多角色
- 细粒度菜单权限

14. 总结

本项目基于 Python + FastAPI + MySQL + Bootstrap + ECharts 完成了一套结构完整、功能闭环清晰的 1688 电脑硬件数据可视化分析系统。

系统从原始 CSV 数据出发，打通了：

数据接入
数据清洗
业务建模
图表分析
大屏展示
用户交互
后台管理
数据导出

从工程实现角度看，项目具备较强的完整性，既体现了 Web 系统开发能力，也体现了数据处理与可视化分析能力，适合作为课程设计、毕业设计、项目答辩或作品展示的技术成果。

114-基于Python的1688电脑硬件数据可视化分析系统

1688 电脑硬件数据可视化分析系统技术文档

1. 项目概述

1.1 项目背景

1.2 项目定位

1.3 数据来源

2. 技术栈

2.1 后端技术栈

2.2 前端技术栈

2.3 数据库与环境

2.4 静态资源组织

3. 整体架构设计

3.1 架构模式

3.2 系统架构图

3.3 目录结构

4. 功能设计

4.1 用户与权限模块

4.1.1 注册功能

4.1.2 登录功能

4.1.3 退出登录

4.1.4 个人中心

4.2 数据管理模块

4.3 硬件详情模块

4.4 收藏模块

4.5 分析图表模块

4.6 可视化大屏模块

4.7 管理员后台模块

4.8 媒体代理模块

4.9 数据导出模块

5. 核心技术实现

5.1 FastAPI 框架

5.2 SQLAlchemy ORM

5.3 Jinja2 服务端模板渲染

5.4 Session 登录态管理

5.5 密码安全实现

5.6 自动数据库初始化与升级

5.7 Excel 导出技术

5.8 图片代理技术

5.9 ECharts 图表技术

5.10 Bootstrap 前端框架

6. 数据模型设计

6.1 用户表 users

6.2 硬件数据表 hardware_items

6.3 收藏表 favorites

6.4 收藏分组表 favorite_groups

7. 数据处理与分析设计

7.1 数据导入流程

7.2 清洗与派生字段

7.3 分类映射规则

7.4 品牌识别规则

7.5 分析聚合能力

7.6 机会评分模型

8. 路由与接口设计

8.1 页面路由

8.2 操作接口

8.3 数据接口

9. 前端设计说明

9.1 前端模式

9.2 页面设计风格

9.3 前端脚本职责划分

app/static/js/ui.js

app/static/js/analytics.js

9.4 本地静态资源策略

10. 安全与权限设计

10.1 身份认证

10.2 角色权限

10.3 管理员保护机制

11. 部署与运行说明

11.1 环境准备

11.2 安装依赖

11.3 启动方式

11.4 环境变量

11.5 访问地址

12. 项目技术亮点

12.1 数据驱动能力完整

12.2 管理型与分析型能力融合

12.3 前后端耦合适中

12.4 外链图片和 CDN 风险处理到位

13. 后续可扩展方向

14. 总结

6.1 用户表 `users`

6.2 硬件数据表 `hardware_items`

6.3 收藏表 `favorites`

6.4 收藏分组表 `favorite_groups`

`app/static/js/ui.js`

`app/static/js/analytics.js`