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

基于 Flask 的电商超市数据可视化分析系统 — 技术文档目录项目概述技术栈项目结构系统架构数据库设计后端路由设计数据分析引擎前端页面设计API 接口文档用户认证与权限管理后台部署与运行依赖清单1. 项目概述本系统是一个基于 Flask 框架的电商超市数据可视化分析平台通过对超市销售数据的多维度分析提供销售趋势、产品分析、客户画像、时间序列、地理分布和数据挖掘等六大分析模块共 45 个分析方法生成 47 种图表帮助管理者做出数据驱动的经营决策。核心功能用户登录注册与权限管理管理员/普通用户数据总览仪表盘8 个 KPI 指标卡片 6 个概览图表六大分析模块销售/产品/客户/时间/地理/数据挖掘管理后台用户管理 销售数据 CRUD个人中心头像上传、信息编辑、密码修改2. 技术栈层级技术版本用途后端框架Flask3.0.0Web 应用框架ORMFlask-SQLAlchemy3.1.1数据库操作认证Flask-Login0.6.3用户会话管理数据库SQLite—数据持久化存储数据分析pandas2.1.4数据加载、清洗、聚合数据分析numpy1.26.2数值计算前端模板Jinja2—服务端页面渲染图表库ECharts5.x数据可视化主要UI 框架Bootstrap4.x页面布局与组件图标库Font Awesome4.x图标JS 库jQuery3.xDOM 操作、AJAX服务端Werkzeug3.0.1WSGI 工具库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 数据流页面加载浏览器请求页面路由 → Flask 渲染 Jinja2 模板返回 HTML图表加载页面 JS 通过fetch(/api/module/chart_type)请求 API数据处理API 路由调用SalesAnalyzer对应方法 → pandas 计算 → 返回 JSON图表渲染前端 JS 将 JSON 数据传入 ECharts 配置渲染图表4.3 关键设计模式懒加载单例SalesAnalyzer在首次 API 调用时初始化将 CSV 全量加载到内存 DataFrame后续调用复用同一实例路由分发模式每个 API 路由族使用data_map字典将 URL 中的chart_type参数映射到具体的分析方法AJAX 异步加载分析页面 HTML 只包含图表容器图表数据通过 AJAX 独立加载互不阻塞5. 数据库设计5.1 User 表users字段类型约束说明idInteger主键自增用户 IDusernameString(80)UNIQUE, NOT NULL用户名emailString(120)UNIQUE, NOT NULL邮箱password_hashString(256)NOT NULL密码哈希werkzeugavatarString(200)DEFAULT ‘img/default-avatar.png’头像路径roleString(20)DEFAULT ‘user’角色user / adminphoneString(20)DEFAULT ‘’手机号created_atDateTimeSERVER DEFAULT now()注册时间方法set_password(password)— 生成密码哈希check_password(password)— 验证密码is_admin()— 判断是否管理员5.2 SalesData 表sales_data字段类型对应 CSV 列名说明idInteger—主键自增order_idString(50)订单编号订单唯一标识order_dateString(20)订货日期订货日期字符串ship_dateString(20)发货日期发货日期字符串ship_modeString(50)邮寄方式标准/二级/一级/当日customer_idString(50)客户ID客户唯一标识customer_nameString(100)客户名称客户姓名segmentString(50)细类消费者/公司/家庭办公cityString(100)城市城市名provinceString(100)省/自治区省级行政区countryString(100)国家国家名regionString(50)地区东/南/西/北/中product_idString(100)产品ID产品唯一标识categoryString(50)大类家具/办公用品/技术sub_categoryString(50)子类书架/椅子/电话 等product_nameString(200)产品名称产品完整名称salesFloat销售额销售金额quantityInteger数量购买数量discountFloat折扣折扣率 (0~1)profitFloat利润利润金额可为负5.3 初始化逻辑应用启动时执行init_db()创建所有表db.create_all()若users表为空插入两个默认用户admin / admin123角色adminuser / user123角色user若sales_data表为空从data/sales_data.csv批量导入数据每批 1000 条6. 后端路由设计6.1 认证路由路由方法函数说明/loginGET, POSTlogin()登录页面。POST 验证用户名密码登录成功重定向到//registerGET, POSTregister()注册页面。POST 创建新用户默认角色 user/logoutGETlogout()退出登录重定向到/login6.2 页面路由需登录路由函数说明/dashboard()数据总览传递 6 组统计数据给模板/salessales_analysis()销售分析页图表通过 AJAX 加载/productproduct_analysis()产品分析页/customercustomer_analysis()客户分析页/timetime_analysis()时间分析页/geogeo_analysis()地理分析页/miningmining_analysis()数据挖掘页/profileprofile()个人中心页6.3 API 路由需登录返回 JSON路由模式函数图表类型参数/api/sales/chart_typeapi_sales()scatter, ship_mode, discount_impact, segment, quarterly, subcategory, city_top, heatmap/api/product/chart_typeapi_product()category_pie, subcategory_detail, product_top, quantity_dist, category_discount, price_range, profit_rate, product_trend/api/customer/chart_typeapi_customer()segment_pie, value_tiers, region_dist, frequency, scatter, retention, segment_monthly, value_heatmap/api/time/chart_typeapi_time()year_quarter_heatmap, monthly_prediction, growth_rate, shipping, year_compare, weekday, hourly, cumulative, seasonal/api/geo/chart_typeapi_geo()province_map, region_pie, province_profit, city_top, region_trend, province_quantity, region_profit_compare, logistics/api/mining/chart_typeapi_mining()rfm, basket, profit_prediction, clv, clusters, anomaly6.4 用户路由需登录路由方法函数说明/profile/updatePOSTprofile_update()更新用户名、邮箱、手机号、头像/profile/passwordPOSTchange_password()修改密码验证旧密码6.5 管理路由需管理员权限路由方法函数说明/adminGETadmin_dashboard()管理后台用户列表 分页数据列表/admin/user/delete/idPOSTadmin_delete_user()删除用户不可删自己/admin/user/role/idPOSTadmin_change_role()修改用户角色/admin/data/addPOSTadmin_data_add()添加销售数据/admin/data/edit/idPOSTadmin_data_edit()编辑销售数据/admin/data/delete/idPOSTadmin_data_delete()删除销售数据7. 数据分析引擎7.1 SalesAnalyzer 类文件utils/data_analyzer.py初始化__init__(self, csv_path)— 读取 CSV 文件计算派生列年份、月份、季度、发货天数存入内存 DataFrame。单例获取通过get_analyzer()函数懒加载全局只初始化一次。7.2 分析方法清单45 个数据总览6 个方法方法返回结构说明get_overview_stats()Dict总销售额、总利润、总订单数、客户总数、产品数量、平均客单价、平均折扣、利润率get_yearly_sales()List[Dict]按年汇总年份、销售额、利润、订单数get_monthly_sales()List[Dict]按月汇总月份(period)、销售额、利润get_region_sales()List[Dict]按地区汇总地区、销售额、利润、订单数降序get_category_sales()List[Dict]按大类汇总大类、销售额、利润、数量get_top_products(n)List[Dict]销售额 Top N 产品产品名称、销售额、利润、数量销售分析8 个方法方法返回结构说明get_sales_profit_scatter()List[Dict]散点图数据最多 2000 条采样销售额、利润、大类、折扣get_ship_mode_analysis()List[Dict]按邮寄方式邮寄方式、销售额、利润、订单数、平均发货天数get_discount_impact()List[Dict]折扣影响折扣、平均销售额、平均利润、订单数get_segment_analysis()List[Dict]按细类细类、销售额、利润、客户数、平均订单金额get_quarterly_trend()List[Dict]季度趋势年季(如2023Q1)、销售额、利润get_subcategory_rank()List[Dict]子类排名子类、销售额、利润、数量升序get_city_top(n)List[Dict]Top N 城市城市、销售额、利润get_monthly_heatmap()List[Dict]月度热力图年份、月份、销售额产品分析8 个方法方法返回结构说明get_category_pie()List[Dict]大类占比大类、销售额get_subcategory_detail()List[Dict]子类明细大类、子类、销售额、利润、数量get_product_top(n)List[Dict]Top N 产品产品名称、销售额、利润、数量get_quantity_dist()List[Dict]数量分布数量、订单数、销售额get_category_discount()List[Dict]大类折扣大类、平均折扣、最大折扣、折扣订单比例get_price_range_dist()List[Dict]价格区间分布价格区间、订单数、总利润get_profit_rate_by_category()List[Dict]大类利润率大类、销售额、利润、利润率get_product_trend()List[Dict]产品趋势年份、大类、销售额客户分析8 个方法方法返回结构说明get_customer_segment_pie()List[Dict]细类占比细类、销售额get_customer_value_tiers()List[Dict]价值分层价值层级、客户数、平均消费、平均订单数5 层1k, 1k-5k, 5k-10k, 10k-50k, 50kget_customer_region_dist()List[Dict]地区分布地区、客户数、销售额get_purchase_frequency()List[Dict]购买频次频次区间、客户数5 个区间get_customer_scatter()List[Dict]散点图最多 500 条客户ID、总销售额、总利润、细类get_customer_retention()List[Dict]留存分析年份、留存客户数、留存率get_segment_monthly()List[Dict]细类月度月份、细类、销售额get_customer_value_heatmap()List[Dict]热力图地区、细类、销售额时间分析9 个方法方法返回结构说明get_year_quarter_heatmap()List[Dict]年-季度热力图年份、季度、销售额get_monthly_trend_with_prediction()List[Dict]月度趋势预测月份、销售额、is_prediction含 6 个月线性回归预测get_growth_rate()List[Dict]增长率年份、销售额、增长率YoY%get_shipping_analysis()List[Dict]发货分析邮寄方式、平均发货天数、订单数get_year_comparison()List[Dict]年度对比年份、销售额、利润、订单数、客户数get_weekday_analysis()List[Dict]星期分布星期、销售额、订单数get_hourly_pattern()List[Dict]月度模式月份、销售额、订单数get_cumulative_sales()List[Dict]累计趋势月份、销售额、累计销售额get_seasonal_decomposition()List[Dict]季节指数月序号、销售额、季节指数地理分析8 个方法方法返回结构说明get_province_sales_map()List[Dict]省级销售地图省/自治区、销售额、利润、订单数get_region_pie()List[Dict]地区占比地区、销售额get_province_profit_map()List[Dict]省级利润地图省/自治区、利润、利润率get_city_top_geo(n)List[Dict]Top N 城市城市、地区、销售额、利润get_region_trend()List[Dict]地区趋势月份、地区、销售额get_province_quantity()List[Dict]省级数量省/自治区、数量、平均数量get_region_profit_compare()List[Dict]地区利润对比地区、大类、销售额、利润get_logistics_efficiency()List[Dict]物流效率地区、邮寄方式、平均发货天数、订单数数据挖掘6 个方法方法返回结构说明get_rfm_analysis()List[Dict]RFM 分群客户分群、客户数、平均消费、平均频率4 类重要价值/发展/保持/挽留客户get_market_basket()List[Dict]购物篮分析类别1、类别2、共现次数get_profit_prediction_data()List[Dict]利润预测数据月份、销售额、利润、订单数、平均折扣、月份序号get_customer_lifetime_value()List[Dict]客户终身价值最多 500 条客户ID、总销售额、CLV、订单数、月均消费get_sales_pattern_clusters()List[Dict]聚类数据最多 300 条大类、总销售额、总利润、平均折扣、销售数量标准化值get_anomaly_detection()Dict异常检测normal最多 200 条和anomalies最多 50 条含 Z 分数阈值 |z| 2.58. 前端页面设计8.1 基础布局base.html侧边栏导航结构分组菜单项图标路由—数据总览fa-laptop/数据分析销售分析fa-line-chart/sales数据分析产品分析fa-cube/product数据分析客户分析fa-users/customer数据分析时间分析fa-clock-o/time数据分析地理分析fa-map-marker/geo高级分析数据挖掘fa-database/mining系统管理个人中心fa-user/profile系统管理管理后台fa-cog/admin仅管理员可见头部区域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.js8.2 数据总览页dashboard.htmlKPI 卡片8 个两行第一行总销售额、总利润、总订单数、客户总数第二行平均客单价、产品数量、平均折扣、利润率图表6 个月度销售趋势双 Y 轴折线图销售额 利润销售额 TOP10 产品水平条形图品类销售占比环形饼图年度销售对比分组柱状图地区销售分布柱状图8.3 分析页面模板每个分析页面遵循统一模式页面 HTML 只包含图表容器div idchart-xxx classchart-container{% block extra_js %}中定义loadChart(url, callback)函数每个图表通过loadChart(/api/module/type, function(data) { ... })异步加载回调函数中初始化 ECharts 实例、设置 option、绑定 resize 事件8.4 图表配色方案颜色色值用途主色金色#d4943a销售额、主要指标绿色#67C23A利润、正值橙色#F5A623辅助指标红色#D0021B负值、预警紫色#ab8ce4辅助系列8.5 登录注册页超市背景图片static/img/auth-bg.jpg 半透明黑色遮罩白色卡片居中绿色顶部条#00c292Bootstrap 标准表单组件注册页含密码强度指示器弱/中等/强9. API 接口文档9.1 通用规则认证所有 API 需要登录login_required未登录返回 302 重定向到/login请求方式GET响应格式JSON数据来源SalesAnalyzer实例方法错误处理无效的chart_type返回{error: 无效的图表类型}HTTP 4009.2 API 调用示例// 前端调用模式functionloadChart(url,cb){fetch(url).then(rr.json()).then(cb).catch(econsole.error(e));}// 使用loadChart(/api/sales/scatter,function(data){varchartecharts.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_hashPBKDF2 算法Session 密钥配置在config.py的SECRET_KEY10.2 权限模型角色权限普通用户 (user)查看所有分析页面、编辑个人信息、修改密码管理员 (admin)普通用户全部权限 管理后台用户管理 数据 CRUD10.3 权限检查页面路由login_required装饰器管理路由login_requiredcurrent_user.is_admin()手动检查前端侧边栏{% if current_user.is_admin() %}控制管理后台链接可见性11. 管理后台11.1 用户管理用户列表表格显示 ID、用户名、邮箱、手机号、角色、注册时间角色切换下拉选择框直接提交表单删除用户带确认弹窗不可删除自己11.2 数据管理Tab 切换界面用户管理 / 数据管理数据列表分页显示每页 20 条含 ID、订单编号、客户、产品名称、大类、地区、销售额、利润添加数据模态框表单19 个字段编辑数据模态框表单自动回填当前值删除数据带确认弹窗利润正数显示绿色负数显示红色11.3 Tab 状态保持操作添加/编辑/删除/翻页后通过 URL 参数?tabdata保持在数据管理 Tab。12. 部署与运行12.1 环境准备# 克隆项目后进入 code 目录cdcode# 安装依赖pipinstall-rrequirements.txt12.2 启动应用python app.py启动时自动创建 SQLite 数据库表插入默认用户admin/user从 CSV 导入销售数据在http://localhost:5003启动服务12.3 默认账号用户名密码角色adminadmin123管理员useruser123普通用户12.4 配置说明编辑config.py可修改SECRET_KEY— Session 密钥生产环境应更换SQLALCHEMY_DATABASE_URI— 数据库连接字符串DATA_FILE— CSV 数据文件路径13. 依赖清单requirements.txtFlask3.0.0 Flask-Login0.6.3 Flask-SQLAlchemy3.1.1 pandas2.1.4 numpy1.26.2 scikit-learn1.3.2 xlrd2.0.1 Werkzeug3.0.1前端 CDN 依赖本地已包含库版本文件jQuery3.xstatic/js/jquery.min.jsBootstrap4.xstatic/css/bootstrap.min.cssstatic/js/bootstrap.min.jsECharts5.xstatic/js/echarts.min.jsFont Awesome4.xstatic/css/font-awesome.min.cssPopper.js1.xstatic/js/popper.min.js