基于 Vue 3 + ECharts + Express + SQLite 构建的鞋类零售数据分析与毛利预测平台——基于深度学习的鞋类销售数据分析系统

基于深度学习的鞋类销售数据分析系统

基于 Vue 3 + ECharts + Express + SQLite 构建的鞋类零售数据分析与毛利预测平台。系统覆盖用户权限登录、销售数据全生命周期管理、四页可视化大屏，以及可调参的深度学习毛利预测模块，适合毕业设计 / 课程设计 / 数据可视化演示场景。

项目简介

本系统面向鞋类零售场景，围绕「成交金额」「毛利」「区域销售」三类核心指标，实现：

数据层：使用 SQLite 本地文件库存储用户与销售记录，支持前端增删改查、CSV 导入导出、数据库路径切换。
展示层：基于 ECharts 构建四页数据可视化大屏，包含中国地图下钻、面积图、瀑布图、矩阵微折线、流式视觉映射、地理等值区划与大规模街道线图等。
智能层：使用纯 JavaScript 实现的轻量 MLP（多层感知机）对毛利进行训练与预测，支持手动参数调试与文件上传预测。
权限层：管理员 / 分析师 / 访客三级角色，JWT 鉴权，支持账号登录与手机号登录，登录页含图形验证码。

功能特性

模块	能力说明
用户登录	账号登录、手机号登录、图形验证码、JWT 会话
权限控制	`admin` / `analyst` / `viewer` 菜单与接口权限分离
销售数据	分页查询、筛选、新增、编辑、删除、批量删除
导入导出	CSV 导入（中英文字段兼容）、CSV 导出（可按大区筛选）
数据库设置	查看当前库信息、切换路径、测试连接、恢复默认库
地图大屏	全国销售地图，点击省份跳转对应大区可视化
成交金额页	大数据量面积图、渐变堆叠面积图、缓动函数、阶梯瀑布图
趋势矩阵页	品牌×月份微型折线矩阵、堆叠柱归一化/绝对变化、品类瀑布图
地理流式页	流式渲染+视觉映射、地理等值区划+散点、近百万级街道线网
毛利预测	学习率/轮次/隐藏层/训练比例可调；单样本预测；CSV 上传训练

技术栈

前端

技术	用途
Vue 3	组合式 API 构建界面
Vite 6	开发与构建工具
Vue Router 4	路由与页面权限守卫
Pinia	登录态与用户信息状态管理
Element Plus	表单、表格、弹窗等管理端组件
ECharts 5	数据可视化大屏图表
Axios	HTTP 请求与鉴权拦截

后端

技术	用途
Node.js + Express	REST API 服务
better-sqlite3	SQLite 本地数据库
bcryptjs	密码哈希
jsonwebtoken	JWT 登录令牌
multer	文件上传（CSV）
csv-parse / csv-stringify	CSV 解析与导出

预测模型

纯 JS 实现的 TinyMLP（单隐藏层全连接网络）
可调参数：学习率、训练轮次、隐藏层神经元数、训练集比例
输出指标：MSE、MAE、R²、损失曲线、未来 12 期预测、实际 vs 预测对比

系统架构

复制代码

浏览器 (Vue3)
    │  /api 代理 (Vite → :3001)
    ▼
Express API
    ├── /auth      登录、验证码、当前用户
    ├── /users     用户增删改查（管理员）
    ├── /sales     销售 CRUD、统计、导入导出
    ├── /settings  SQLite 连接设置（管理员）
    └── /predict   MLP 训练与预测
    ▼
SQLite (backend/data/shoe_sales.db)
    ├── users
    └── sales

前端开发态由 Vite 将 /api 代理到 http://localhost:3001，无需额外配置跨域。

环境要求

Node.js 18+（推荐 20 LTS）
npm 9+
Windows / macOS / Linux 均可
说明：better-sqlite3 为原生模块，首次 npm install 时可能需要本机编译环境；若安装失败，请安装对应平台的构建工具后再试

快速开始

1. 启动后端

复制代码

cd backend
npm install
npm run seed          # 初始化演示用户 + 约 1200 条销售数据
npm run dev           # http://localhost:3001

2. 启动前端

新开一个终端：

复制代码

cd frontend
npm install
npm run dev           # http://localhost:5173

3. 访问系统

浏览器打开：http://localhost:5173

默认进入登录页。登录后跳转全国销售地图大屏。

一键脚本（可选）

项目根目录 package.json 提供：

复制代码

npm run install:all   # 同时安装前后端依赖
npm run seed          # 写入种子数据
npm run dev:backend   # 启动后端
npm run dev:frontend  # 启动前端

演示账号与权限

用户名	手机号	密码	角色	可访问内容
admin	13800000001	123456	管理员	全部功能（大屏、预测、用户、数据、导入导出、数据库）
analyst	13800000002	123456	分析师	大屏、销售数据、导入导出、毛利预测
viewer	13800000003	123456	访客	仅可视化大屏

登录时需输入右侧图形验证码（点击图片可刷新）。验证码错误或过期会提示并自动刷新。

功能模块说明

1. 登录页

左侧：系统介绍、功能亮点、主题配图（鞋类分析 / 地图 / 预测示意）
右侧：账号 / 手机号切换登录 + 密码 + 验证码
登录成功后签发 JWT，前端存入 localStorage

2. 数据管理（销售）

关键词、大区、品类筛选
单条新增 / 编辑 / 删除，支持批量删除
页面主题：青绿色（与用户管理区分）

3. 用户管理

仅管理员可见
添加用户、编辑角色/手机号/密码、删除用户（不可删除当前登录账号）
页面主题：紫色

4. 导入导出

上传 CSV 批量导入销售记录
按大区筛选导出 CSV（带 BOM，Excel 可直接打开中文）
示例文件：backend/data/sample_import.csv

5. 数据库设置

查看当前库路径、文件大小、用户数、销售记录数
切换 SQLite 文件路径、测试连接、恢复默认库
配置持久化在 backend/data/db_settings.json

6. 毛利预测

见下方毛利预测说明。

可视化大屏说明

顶部导航可在四页大屏间切换。

第 1 页 · 地图总览（`/screen/map`）

KPI：成交金额、毛利、订单数、销售件数
中国地图（按省份着色），点击省份进入该大区区域大屏
大区成交柱状图、渠道占比饼图

区域大屏路由：/screen/region/:region（如 /screen/region/华东）

第 2 页 · 成交金额（`/screen/charts-2`）

图表	说明
大数据量面积图	小时级成交序列，支持 dataZoom 缩放
渐变堆叠面积图	金额 / 毛利 / 件量归一化堆叠
缓动函数可视化	linear、quadratic、cubic、sinusoidal、elastic 等
阶梯瀑布图	柱状图模拟月度增减

第 3 页 · 趋势矩阵（`/screen/charts-3`）

图表	说明
矩阵微型折线图	品牌 × 月份多宫格微趋势
堆叠柱归一化	渠道占比随月份变化（百分比）
堆叠柱绝对变化	渠道绝对金额堆叠
品类阶梯瀑布	各品类贡献与合计

第 4 页 · 地理流式（`/screen/charts-4`）

图表	说明
流式渲染与视觉映射	多条成交流线 + 散点，右侧 visualMap 可拖动映射
地理等值区划 + 散点	中国地图填色 + 省份毛利散点，可点击跳转大区
近百万级街道线图	曼哈顿风格线网，large + progressive 渐进渲染

毛利预测说明

页面路径：/predict（需分析师或管理员权限）

手动调参训练

可调参数：

参数	含义	建议范围
learningRate	学习率	0.001 ~ 0.1
epochs	训练轮次	20 ~ 500
hiddenUnits	隐藏层神经元	4 ~ 32
trainRatio	训练集占比	0.5 ~ 0.95

训练后展示：

损失曲线
测试集实际 vs 预测对比
Train/Test 的 MSE、MAE、R²
未来 12 期毛利预测柱状图
单条样本即时预测（数量、单价、成本、品类、品牌、大区）

文件上传预测

上传含数量、单价、成本、品类、品牌、毛利等字段的 CSV，系统将基于上传数据训练并返回预测对比结果。

API 接口一览

基础地址：http://localhost:3001/api 除登录与验证码外，请求头需携带：Authorization: Bearer <token>

认证

方法	路径	说明
GET	`/auth/captcha`	获取图形验证码
POST	`/auth/login`	登录（含验证码校验）
GET	`/auth/me`	当前用户信息

登录请求体示例：

复制代码

{
  "loginType": "account",
  "username": "admin",
  "password": "123456",
  "captchaId": "xxx",
  "captchaCode": "AB12"
}

手机号登录将 loginType 设为 "phone"，并传 phone 字段。

用户（管理员）

方法	路径	说明
GET	`/users`	用户列表
POST	`/users`	新增用户
PUT	`/users/:id`	更新用户
DELETE	`/users/:id`	删除用户
GET	`/users/roles/meta`	角色与权限元数据

销售

方法	路径	说明
GET	`/sales`	分页列表（支持 keyword/region/category 等）
POST	`/sales`	新增
PUT	`/sales/:id`	更新
DELETE	`/sales/:id`	删除单条
DELETE	`/sales`	批量删除（body: `{ ids: [] }`）
GET	`/sales/stats/overview`	总览统计（可传 region）
GET	`/sales/stats/chart-data`	专项图表数据（large-area / matrix）
POST	`/sales/import`	multipart 上传 CSV
GET	`/sales/export`	导出 CSV

数据库设置（管理员）

方法	路径	说明
GET	`/settings`	当前库信息
POST	`/settings/connect`	切换库路径
POST	`/settings/test`	测试连接
POST	`/settings/reset-default`	恢复默认库

预测（管理员 / 分析师）

方法	路径	说明
POST	`/predict/train`	基于库内销售数据训练
POST	`/predict/upload-predict`	上传 CSV 训练预测
POST	`/predict/single`	单样本毛利预测

健康检查：GET /api/health

数据表与 CSV 格式

users

字段	说明
id	主键
username	用户名（唯一）
password	bcrypt 哈希密码
phone	手机号（唯一，可空）
role	admin / analyst / viewer
real_name	姓名
created_at	创建时间

sales

字段	说明
order_no	订单号
product_name	商品名称
category	品类
brand	品牌
region	大区（华北/华东/华南/华中/西南/西北/东北）
province / city	省份 / 城市
quantity	数量
unit_price / cost_price	单价 / 成本价
amount / profit	成交金额 / 毛利
sale_date	销售日期
channel	渠道

CSV 导入字段（中英文均可）

复制代码

订单号,商品名称,品类,品牌,大区,省份,城市,数量,单价,成本价,销售日期,渠道

或：

复制代码

orderNo,productName,category,brand,region,province,city,quantity,unitPrice,costPrice,saleDate,channel

目录结构

复制代码

Vue9/
├── README.md                 # 项目说明（本文件）
├── package.json              # 根目录便捷脚本
├── backend/                  # 后端服务
│   ├── package.json
│   ├── data/
│   │   ├── shoe_sales.db     # 默认 SQLite 库（seed 后生成）
│   │   ├── sample_import.csv # 导入示例
│   │   └── db_settings.json  # 可选：自定义库路径配置
│   └── src/
│       ├── index.js          # 服务入口
│       ├── db.js             # 数据库连接与表结构
│       ├── seed.js           # 种子数据
│       ├── middleware/
│       │   └── auth.js       # JWT 与权限
│       └── routes/
│           ├── auth.js       # 登录 / 验证码
│           ├── users.js      # 用户管理
│           ├── sales.js      # 销售与统计
│           ├── settings.js   # 数据库设置
│           └── predict.js    # MLP 预测
└── frontend/                 # 前端应用
    ├── package.json
    ├── vite.config.js        # 含 /api 代理
    ├── index.html
    ├── public/               # 静态资源
    │   ├── favicon.svg
    │   └── images/
    │       └── login/        # 登录页配图（可替换 PNG/JPG/SVG）
    └── src/
        ├── main.js
        ├── App.vue
        ├── api/              # 接口封装
        ├── stores/           # Pinia 状态
        ├── router/           # 路由与权限守卫
        ├── components/       # ChartBox 等通用组件
        ├── utils/            # 地图加载、金额格式化等
        ├── assets/           # 全局样式
        └── views/
            ├── Login.vue
            ├── Layout.vue
            ├── Predict.vue
            ├── Dashboard/    # 四页大屏 + 区域大屏
            └── Admin/        # 用户 / 销售 / 导入导出 / 数据库

常用命令

后端

复制代码

npm run dev      # 开发（--watch 热重启）
npm start        # 生产启动
npm run seed     # 重置并写入演示数据（会清空 users/sales 后重建）

前端

复制代码

npm run dev      # 开发服务器 :5173
npm run build    # 生产构建 → dist/
npm run preview  # 预览构建结果

常见问题

1. 页面黑屏 / 空白

强制刷新：Ctrl + F5
打开开发者工具 → Application → Local Storage，清除本站数据后重新登录
确认后端 3001 与前端 5173 均已启动

2. 登录提示验证码错误

点击验证码图片刷新后再试
验证码区分大小写已做忽略处理，但仍需与图片一致
验证码 5 分钟过期，超时请刷新

3. 中国地图不显示或很慢

地图 GeoJSON 默认从阿里云 DataV 加载；若网络受限，会回退到简化底图
区域下钻与散点仍可基于省份销售数据使用

4. better-sqlite3 安装失败

Windows：安装 "Desktop development with C++" 相关构建工具
或使用已预编译二进制匹配的 Node 版本后重试 npm install

5. 接口 401

Token 过期或未登录，重新登录即可
确保请求头包含 Authorization: Bearer <token>

6. 执行 seed 后自定义数据丢失

npm run seed 会清空并重建 users、sales 表，请谨慎使用
重要数据请先通过「导入导出」备份 CSV

开发说明

前端路由权限在 frontend/src/router/index.js 的 beforeEach 中校验 meta.perm
后端接口权限在各路由中通过 auth(['admin', 'analyst', ...]) 中间件控制
图表统一封装于 ChartBox.vue，支持 ResizeObserver 自适应容器尺寸
主题色：数据管理页偏青绿，用户管理页偏紫色，大屏整体为深蓝科技风

版本信息

项目名称：基于深度学习的鞋类销售数据分析系统
前端端口：5173
后端端口：3001
默认数据库：backend/data/shoe_sales.db

如需二次开发，建议从 backend/src/routes 与 frontend/src/views/Dashboard 入手扩展指标与图表。

GitHub - zhangsansh/Vue-3-ECharts-Express-SQLite4: 基于Vue 3 + ECharts + Express + SQLite构建的鞋类零售数据分析与毛利预测平台。系统覆盖用户权限登录、销售数据全生命周期管理、四页可视化大屏，以及可调参的深度学习毛利预测模块，适合毕业设计 / 课程设计 / 数据可视化演示场景------基于深度学习的鞋类销售数据分析系统 · GitHub基于Vue 3 + ECharts + Express + SQLite构建的鞋类零售数据分析与毛利预测平台。系统覆盖用户权限登录、销售数据全生命周期管理、四页可视化大屏，以及可调参的深度学习毛利预测模块，适合毕业设计 / 课程设计 / 数据可视化演示场景------基于深度学习的鞋类销售数据分析系统 - zhangsansh/Vue-3-ECharts-Express-SQLite4https://github.com/zhangsansh/Vue-3-ECharts-Express-SQLite4.git

基于 Vue 3 + ECharts + Express + SQLite 构建的鞋类零售数据分析与毛利预测平台——基于深度学习的鞋类销售数据分析系统

基于深度学习的鞋类销售数据分析系统

目录

项目简介

功能特性

技术栈

前端

后端

预测模型

系统架构

环境要求

快速开始

1. 启动后端

2. 启动前端

3. 访问系统

一键脚本（可选）

演示账号与权限

功能模块说明

1. 登录页

2. 数据管理（销售）

3. 用户管理

4. 导入导出

5. 数据库设置

6. 毛利预测

可视化大屏说明

第 1 页 · 地图总览（/screen/map）

第 2 页 · 成交金额（/screen/charts-2）

第 3 页 · 趋势矩阵（/screen/charts-3）

第 4 页 · 地理流式（/screen/charts-4）

毛利预测说明

手动调参训练

文件上传预测

API 接口一览

认证

用户（管理员）

销售

数据库设置（管理员）

预测（管理员 / 分析师）

数据表与 CSV 格式

users

sales

CSV 导入字段（中英文均可）

目录结构

常用命令

后端

前端

常见问题

1. 页面黑屏 / 空白

2. 登录提示验证码错误

3. 中国地图不显示或很慢

4. better-sqlite3 安装失败

5. 接口 401

6. 执行 seed 后自定义数据丢失

开发说明

版本信息

第 1 页 · 地图总览（`/screen/map`）

第 2 页 · 成交金额（`/screen/charts-2`）

第 3 页 · 趋势矩阵（`/screen/charts-3`）

第 4 页 · 地理流式（`/screen/charts-4`）