144-基于Flask的电商超市数据可视化分析系统

基于 Flask 的电商超市数据可视化分析系统 — 技术文档

目录

1. 项目概述
2. 技术栈
3. 项目结构
4. 系统架构
5. 数据库设计
6. 后端路由设计
7. 数据分析引擎
8. 前端页面设计
9. API 接口文档
10. 用户认证与权限
11. 管理后台
12. 部署与运行
13. 依赖清单

1. 项目概述

本系统是一个基于 Flask 框架的电商超市数据可视化分析平台，通过对超市销售数据的多维度分析，提供销售趋势、产品分析、客户画像、时间序列、地理分布和数据挖掘等六大分析模块，共 45 个分析方法，生成 47 种图表，帮助管理者做出数据驱动的经营决策。

核心功能：

• 用户登录注册与权限管理（管理员/普通用户）
• 数据总览仪表盘（8 个 KPI 指标卡片 + 6 个概览图表）
• 六大分析模块（销售/产品/客户/时间/地理/数据挖掘）
• 管理后台（用户管理 + 销售数据 CRUD）
• 个人中心（头像上传、信息编辑、密码修改）

2. 技术栈

3. 项目结构

code/ ├── app.py # 主应用入口：路由定义、数据库初始化 ├── config.py # 配置类（密钥、数据库路径、数据文件路径） ├── requirements.txt # Python 依赖清单 ├── 技术文档.md # 本文档 │ ├── models/ # 数据模型层 │ ├── __init__.py # db 实例创建 + 模型导入 │ ├── user.py # User 模型（用户表） │ └── sales.py # SalesData 模型（销售数据表） │ ├── utils/ # 工具层 │ ├── __init__.py │ └── data_analyzer.py # SalesAnalyzer 类（45 个分析方法） │ ├── data/ # 数据文件 │ ├── sales_data.csv # 主数据源（UTF-8-sig 编码） │ ├── 超市销售分析.xls # 原始 Excel 数据 │ └── supermarket.db # SQLite 数据库文件（自动生成） │ ├── templates/ # Jinja2 模板（12 个文件） │ ├── base.html # 基础布局（侧边栏、头部、底部、CSS/JS 引入） │ ├── dashboard.html # 数据总览页 │ ├── auth/ │ │ ├── login.html # 登录页 │ │ └── register.html # 注册页 │ ├── profile/ │ │ └── index.html # 个人中心页 │ ├── admin/ │ │ └── dashboard.html # 管理后台页（用户管理 + 数据管理） │ ├── sales/ │ │ └── analysis.html # 销售分析页（8 图表） │ ├── product/ │ │ └── analysis.html # 产品分析页（8 图表） │ ├── customer/ │ │ └── analysis.html # 客户分析页（8 图表） │ ├── time/ │ │ └── analysis.html # 时间分析页（9 图表） │ ├── geo/ │ │ └── analysis.html # 地理分析页（8 图表） │ └── mining/ │ └── analysis.html # 数据挖掘页（6 图表） │ └── static/ # 静态资源 ├── css/ # 17 个 CSS 文件 │ ├── bootstrap.min.css # Bootstrap 4 │ ├── style.css # moban 模板主样式 │ └── custom.css # 自定义覆盖样式 ├── js/ # 61 个 JS 文件 │ ├── echarts.min.js # ECharts 图表库 │ ├── jquery.min.js # jQuery │ ├── bootstrap.min.js # Bootstrap JS │ └── main.js # 自定义 JS（菜单、计数器动画） └── img/ # 图片资源 ├── logo.png # 侧边栏 Logo ├── admin.jpg # 默认头像 └── auth-bg.jpg # 登录注册背景图

4. 系统架构

4.1 三层架构

┌─────────────────────────────────────────────────────┐ │ 前端展示层 │ │ Jinja2 模板 + Bootstrap + ECharts + jQuery AJAX │ │ 用户浏览器渲染页面，通过 AJAX 调用 API 获取图表数据 │ └───────────────────────┬─────────────────────────────┘ │ HTTP (GET/POST) ┌───────────────────────┴─────────────────────────────┐ │ 后端路由层 │ │ app.py: 22 个页面路由 + 6 个 API 路由族 │ │ 处理请求、调用分析方法、返回 JSON 或渲染模板 │ └───────────────────────┬─────────────────────────────┘ │ ┌───────────────┴───────────────┐ │ │ ┌───────┴────────┐ ┌─────────┴──────────┐ │ 数据分析层 │ │ 数据持久层 │ │ SalesAnalyzer │ │ SQLAlchemy ORM │ │ pandas + numpy│ │ SQLite 数据库 │ │ 45 个分析方法 │ │ User / SalesData │ │ 读取 CSV │ │ 读写 DB │ └────────────────┘ └────────────────────┘

4.2 数据流

1. 页面加载：浏览器请求页面路由 → Flask 渲染 Jinja2 模板返回 HTML
2. 图表加载：页面 JS 通过fetch('/api/<module>/<chart_type>')请求 API
3. 数据处理：API 路由调用SalesAnalyzer对应方法 → pandas 计算 → 返回 JSON
4. 图表渲染：前端 JS 将 JSON 数据传入 ECharts 配置渲染图表

4.3 关键设计模式

• 懒加载单例：SalesAnalyzer在首次 API 调用时初始化，将 CSV 全量加载到内存 DataFrame，后续调用复用同一实例
• 路由分发模式：每个 API 路由族使用data_map字典将 URL 中的chart_type参数映射到具体的分析方法
• AJAX 异步加载：分析页面 HTML 只包含图表容器，图表数据通过 AJAX 独立加载，互不阻塞

5. 数据库设计

5.1 User 表（users）

方法：

• set_password(password)— 生成密码哈希
• check_password(password)— 验证密码
• is_admin()— 判断是否管理员

5.2 SalesData 表（sales_data）

5.3 初始化逻辑

应用启动时执行init_db()：

1. 创建所有表（db.create_all()）
2. 若users表为空，插入两个默认用户：
   • admin / admin123（角色：admin）
   • user / user123（角色：user）
3. 若sales_data表为空，从data/sales_data.csv批量导入数据（每批 1000 条）

6. 后端路由设计

6.1 认证路由

6.2 页面路由（需登录）

6.3 API 路由（需登录，返回 JSON）

6.4 用户路由（需登录）

6.5 管理路由（需管理员权限）

7. 数据分析引擎

7.1 SalesAnalyzer 类

文件：utils/data_analyzer.py

初始化：__init__(self, csv_path)— 读取 CSV 文件，计算派生列（年份、月份、季度、发货天数），存入内存 DataFrame。

单例获取：通过get_analyzer()函数懒加载，全局只初始化一次。

7.2 分析方法清单（45 个）

数据总览（6 个方法）

销售分析（8 个方法）

产品分析（8 个方法）

客户分析（8 个方法）

时间分析（9 个方法）

地理分析（8 个方法）

数据挖掘（6 个方法）

8. 前端页面设计

8.1 基础布局（base.html）

侧边栏导航结构：

头部区域：Logo、菜单折叠按钮、页面标题、实时时钟、用户头像下拉菜单（个人中心、退出登录）

CSS/JS 加载链：

normalize.min.css → bootstrap.min.css → font-awesome.min.css → themify-icons.css → pe-icon-7-stroke.min.css → style.css → custom.css echarts.min.js → jquery.min.js → popper.min.js → bootstrap.min.js → main.js

8.2 数据总览页（dashboard.html）

KPI 卡片（8 个，两行）：

• 第一行：总销售额、总利润、总订单数、客户总数
• 第二行：平均客单价、产品数量、平均折扣、利润率

图表（6 个）：

1. 月度销售趋势（双 Y 轴折线图：销售额 + 利润）
2. 销售额 TOP10 产品（水平条形图）
3. 品类销售占比（环形饼图）
4. 年度销售对比（分组柱状图）
5. 地区销售分布（柱状图）

8.3 分析页面模板

每个分析页面遵循统一模式：

• 页面 HTML 只包含图表容器<div id="chart-xxx" class="chart-container">
• {% block extra_js %}中定义loadChart(url, callback)函数
• 每个图表通过loadChart('/api/<module>/<type>', function(data) { ... })异步加载
• 回调函数中初始化 ECharts 实例、设置 option、绑定 resize 事件

8.4 图表配色方案

8.5 登录注册页

• 超市背景图片（static/img/auth-bg.jpg）+ 半透明黑色遮罩
• 白色卡片居中，绿色顶部条（#00c292）
• Bootstrap 标准表单组件
• 注册页含密码强度指示器（弱/中等/强）

9. API 接口文档

9.1 通用规则

• 认证：所有 API 需要登录（@login_required），未登录返回 302 重定向到/login
• 请求方式：GET
• 响应格式：JSON
• 数据来源：SalesAnalyzer实例方法
• 错误处理：无效的chart_type返回{"error": "无效的图表类型"}，HTTP 400

9.2 API 调用示例

// 前端调用模式functionloadChart(url,cb){fetch(url).then(r=>r.json()).then(cb).catch(e=>console.error(e));}// 使用loadChart('/api/sales/scatter',function(data){varchart=echarts.init(document.getElementById('chart-scatter'));chart.setOption({// ECharts 配置...series:[{data:data.map(d=>[d['销售额'],d['利润']])}]});});

9.3 API 返回示例

GET/api/time/growth_rate

[{"年份":2020,"销售额":2299900.86,"增长率":null},{"年份":2021,"销售额":2574078.43,"增长率":11.92},{"年份":2022,"销售额":2950065.87,"增长率":14.60},{"年份":2023,"销售额":3276097.04,"增长率":11.05}]

10. 用户认证与权限

10.1 认证机制

• 使用Flask-Login管理用户会话
• 密码使用werkzeug.security的generate_password_hash/check_password_hash（PBKDF2 算法）
• Session 密钥配置在config.py的SECRET_KEY

10.2 权限模型

10.3 权限检查

• 页面路由：@login_required装饰器
• 管理路由：@login_required+current_user.is_admin()手动检查
• 前端侧边栏：{% if current_user.is_admin() %}控制管理后台链接可见性

11. 管理后台

11.1 用户管理

• 用户列表表格（显示 ID、用户名、邮箱、手机号、角色、注册时间）
• 角色切换：下拉选择框直接提交表单
• 删除用户：带确认弹窗，不可删除自己

11.2 数据管理

• Tab 切换界面（用户管理 / 数据管理）
• 数据列表：分页显示（每页 20 条），含 ID、订单编号、客户、产品名称、大类、地区、销售额、利润
• 添加数据：模态框表单（19 个字段）
• 编辑数据：模态框表单（自动回填当前值）
• 删除数据：带确认弹窗
• 利润正数显示绿色，负数显示红色

11.3 Tab 状态保持

操作（添加/编辑/删除/翻页）后通过 URL 参数?tab=data保持在数据管理 Tab。

12. 部署与运行

12.1 环境准备

# 克隆项目后进入 code 目录cdcode# 安装依赖pipinstall-rrequirements.txt

12.2 启动应用

python app.py

启动时自动：

1. 创建 SQLite 数据库表
2. 插入默认用户（admin/user）
3. 从 CSV 导入销售数据
4. 在http://localhost:5003启动服务

12.3 默认账号

12.4 配置说明

编辑config.py可修改：

• SECRET_KEY— Session 密钥（生产环境应更换）
• SQLALCHEMY_DATABASE_URI— 数据库连接字符串
• DATA_FILE— CSV 数据文件路径

13. 依赖清单

requirements.txt

Flask==3.0.0 Flask-Login==0.6.3 Flask-SQLAlchemy==3.1.1 pandas==2.1.4 numpy==1.26.2 scikit-learn==1.3.2 xlrd==2.0.1 Werkzeug==3.0.1

前端 CDN 依赖（本地已包含）