智购先知 · 用户购物行为预测分析系统
基于机器学习思路的用户购物行为预测与可视化大屏全栈项目。面向电商运营、数据分析、课程设计与毕设演示场景，提供登录鉴权、三维交互大屏、全球四级地图下钻、多维 ECharts 图表、购买意向智能预测、数据与用户管理等完整能力。
目录
项目简介
系统架构
技术栈
功能模块详解
全球购物分类地图（四级下钻）
预测引擎说明
目录结构
快速开始
页面路由与权限
数据库设计
主要 API
配置与代理
使用提示与常见问题
演示账号
二次开发建议
版本信息
一、项目简介
1.1 解决什么问题
电商场景中，运营与分析人员往往需要同时回答三类问题：
用户会不会买？—— 结合浏览、加购、价格、人群、品类与商品图，给出可解释的购买概率。
哪里在热卖？—— 从全球到国家、省级、市级，看购物分类与 GMV 热力分布。
怎么一眼看懂？—— 用 3D 模型大屏、多维图表、地图下钻把指标讲清楚。
本系统把「行为样本 → 意向评分 → 可视化决策」串成一条完整演示链路。
1.2 核心能力一览
| 能力 | 说明 |
|---|---|
| 登录鉴权 | 淘宝风格登录页；密码 / 手机号登录；图形验证码；JWT + 角色权限 |
| 3D 大屏 | Three.js 纯三维场景（购物车 / 购物袋 / 漏斗 / 魔方），无图表遮挡 |
| 全球地图 | 一级世界 → 二级国家 → 三级省级 → 四级市级，中国走 DataV 真实边界 |
| 图表中心 | ECharts / ECharts-GL 多页签组合（含三维业务语义坐标） |
| 智能预测 | Hybrid-Logit-kNN-v3；支持商品图上传；结果联动省份 map + 品类 3D |
| 数据管理 | 购物行为 CRUD、Excel 导入导出 |
| 系统管理 | 用户角色、主题样式、SQLite 路径切换 |
1.3 适用场景
课程设计 / 毕业设计演示
数据可视化大屏 Demo
电商运营分析方案原型
前后端全栈练手与二次开发起点
二、系统架构
┌─────────────────────────────────────────────────────────────┐ │ 浏览器 Vue3 + Pinia + Vue Router + Element Plus │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────────┐ │ │ │ 3D 大屏 │ │ 四级地图 │ │ 图表中心 │ │ 预测 / 管理 │ │ │ │ Three.js │ │ ECharts │ │ ECharts │ │ Element Plus │ │ │ │ │ │ DataV │ │ GL │ │ │ │ │ └────┬─────┘ └────┬─────┘ └────┬─────┘ └──────┬───────┘ │ │ └────────────┴────────────┴──────────────┘ │ │ Axios (/api, /uploads) │ └─────────────────────────────┬───────────────────────────────┘ │ Vite 开发代理 ┌─────────────────────────────▼───────────────────────────────┐ │ Express 5 (Node.js ESM) · 端口 3001 │ │ ┌────────┐ ┌──────────────┐ ┌────────────┐ ┌────────────┐ │ │ │ JWT 鉴权│ │ predictEngine│ │ geoShopping│ │ Multer 上传│ │ │ └────────┘ └──────────────┘ └────────────┘ └────────────┘ │ │ better-sqlite3 │ │ server/data/shopping.db │ └─────────────────────────────────────────────────────────────┘
请求流简述：
前端登录获取 JWT，后续请求 Header 携带
Authorization: Bearer <token>。Vite 将
/api、/uploads代理到http://localhost:3001。后端按角色校验后读写 SQLite，或调用预测 / 地理数据模块返回 JSON。
中国地图地形可通过
/api/geo/map/:adcode代理 DataV，再由 EChartsregisterMap注册。
三、技术栈
| 层级 | 技术 | 版本参考 | 说明 |
|---|---|---|---|
| 前端框架 | Vue 3 | ^3.5 | Composition API、单页应用 |
| 构建工具 | Vite 5 | ^5.4 | 开发服务器、生产打包 |
| 路由 | Vue Router 4 | ^4.6 | 路由守卫、按角色控制菜单 |
| 状态 | Pinia | ^4 | 用户信息、主题配置 |
| UI | Element Plus | ^2.14 | 表单、表格、上传、对话框 |
| 图表 | ECharts 5 + echarts-gl | ^5.5 / ^2.0 | 二维/三维图表、地图 |
| 三维 | Three.js | ^0.185 | 大屏主题模型、预测页产品孪生 |
| HTTP | Axios | ^1.19 | 拦截器注入 Token、统一错误提示 |
| Excel | SheetJS (xlsx) | ^0.18 | 购物数据导入导出 |
| 样式 | Sass / SCSS | — | 全局深色主题变量 |
| 后端 | Express 5 | ESM | REST API |
| 数据库 | better-sqlite3 | — | 本地文件库，零运维 |
| 鉴权 | jsonwebtoken + bcryptjs | — | 登录态与密码哈希 |
| 上传 | Multer | — | 商品图 / Excel |
运行环境建议：Node.js ≥ 20.15（推荐 20.19+）。Windows / macOS / Linux 均可。
四、功能模块详解
4.1 登录与权限（/login）
视觉：淘宝风格布局 —— 顶部 Logo、橙色促销横幅、右侧白色登录浮层。
登录方式：
账号密码登录
手机号 + 密码登录
图形验证码校验（独立一行，验证码图约 128×42，淘宝橙色系 SVG）
扫码登录为演示示意
角色模型：
| 角色 | 示例账号 | 密码 | 能力范围 |
|---|---|---|---|
管理员admin | admin | admin123 | 全部页面与系统配置 |
分析师analyst | analyst | analyst123 | 大屏、图表、预测、数据读写 |
访客viewer | viewer | viewer123 | 大屏 / 图表 / 预测只读 |
手机号示例：13800000000/admin123（对应 admin）。
路由守卫会拦截未登录访问，并按meta.roles限制管理类页面。
4.2 3D 模型大屏（/dashboard）
全屏 Three.js 场景，不叠加 ECharts，突出三维交互与主题叙事。
四套可切换主题模型：
| 主题 | 叙事重点 | 典型交互 |
|---|---|---|
| 购物车 | 行为总览，品类货品高度映射 | 悬停高亮、点击查看指标 |
| 购物袋 | 成交价值与区域轨道球 | 光环 / 轨道动效 |
| 转化漏斗 | 浏览 → 加购 → 下单 → 高意向 | 瀑布/层级动画 |
| 数据魔方 | 品类 / 渠道 / 人群多维单元 | 脉冲、单元点击 |
数据来自
/api/dashboard/stats，与库中购物行为样本联动。
4.3 图表分析中心（/charts）
多页签组合展示，覆盖运营常用与教学演示类图表，例如：
大数据量面积图、缓动函数示意、阶梯瀑布图、堆叠归一化柱状图
相关矩阵（热力图 / 散点）、微型折线矩阵、流式视觉映射
三维散点 / 三维柱状 / 三维 + 二维结合：坐标轴为业务语义（浏览时长、价格、购买意向等），Tooltip 展示商品、品类、区域等具体字段
农历日历图、中国区域等值区划 + 散点、主题河流图、象形柱图
说明：部分依赖地图的图表会正确注册 GeoJSON；避免使用无效
map: 'none'阻断后续系列渲染。
4.4 购物行为智能预测（/predict）
输入参数（滑条 / 选项）：年龄、浏览时长、价格、数量、性别、是否加购、品类、渠道、设备等。
商品图上传：
类型：JPG / PNG / WebP / GIF
大小限制：5MB
前端压缩：最长边约 1280，降低上传体积
本地预览 + 后端图片头解析（宽高、格式）与视觉评分
输出：
购买概率、置信度、可解释特征贡献
预测完成后自动展示中国省份 map 热力分布
按品类切换3D 产品孪生（手机、球鞋、香水、果篮、台灯、哑铃、书堆、奶瓶等）
预测记录写入
predictions表，可在历史中回溯。
4.5 数据管理（/data，admin / analyst）
购物行为数据分页、筛选、增删改。
Excel导入 / 导出（SheetJS）。
深色表格样式覆盖，避免 Element Plus 默认白底。
4.6 用户管理（/users，admin）
用户增删改、角色分配、手机号维护。
密码以 bcrypt 哈希存储。
4.7 样式设置（/settings，admin）
可配置：背景色、主题色、强调色、字体、字号、默认 3D 主题等。
实时预览，持久化到
system_settings。
4.8 数据库设置（/db，admin）
查看当前 SQLite 文件路径。
切换 / 连接新库文件：自动建表，必要时初始化演示数据。
五、全球购物分类地图（四级下钻）
页面路径：/worldmap核心文件：src/views/WorldMap.vue、server/geoShopping.js
5.1 四级结构
| 层级 | 含义 | 地图地形来源 | 业务数据 |
|---|---|---|---|
| 一级·世界 | 国家热力 | EChartsworld.json（jsDelivr / fastly） | 各国购物分类指数、GMV、热门品类 |
| 二级·国家 | 省 / 州 | 中国：DataV100000_full；国外：示意多边形 | 省级区域列表 + 品类柱图 |
| 三级·省级 | 地级市 | 中国：DataV{省adcode}_full（如广东 21 市）；国外：示意城市图 | 城市列表与购物热力 |
| 四级·市级 | 区县 / 分区 | 中国：DataV{市adcode}_full（如广州 11 区）；国外：示意分区图 | 区县列表与品类分布 |
5.2 交互说明
点击地图区域或侧栏「进入下一级」按钮进行下钻。
面包屑显示「一级·… / 二级·… / 三级·… / 四级·…」，可回退任意层级。
右侧面板展示：行为指数、热门品类、GMV、购物分类分布柱图。
中国区域名称与 DataV GeoJSON
properties.name对齐；前端另有名称归一化与缺省区域补齐，保证整图可着色。
5.3 相关接口
| 方法 | 路径 | 说明 |
|---|---|---|
| GET | /api/geo/world | 一级：世界国家列表 |
| GET | /api/geo/country/:code | 二级：国家 → 省/州（中国返回useChinaMap、mapAdcode） |
| GET | /api/geo/province/:adcode | 三级：省 → 市（优先拉取 DataV 完整地市名） |
| GET | /api/geo/city/:adcode | 四级：市 → 区县 |
| GET | /api/geo/map/:adcode | 中国行政区 GeoJSON 代理（供前端registerMap） |
中国地形优先：后端代理 DataV → 失败则前端直连 DataV CDN。国外使用buildCustomRegionGeo生成示意分区图。
5.4 品类维度
地图与侧栏统一使用八大购物分类：
数码家电、服饰鞋包、美妆护肤、食品生鲜、家居生活、运动户外、图书文娱、母婴用品
每个区域包含：value（行为指数）、topCategory、categories[]、gmv等字段。
六、预测引擎说明
核心文件：server/predictEngine.js模型标识：Hybrid-Logit-kNN-v3
6.1 思路概览
引擎并非训练深度神经网络，而是面向演示的可解释混合评分：
历史先验：全库转化率、同品类转化率、性别 × 品类交叉先验。
kNN 近邻：在特征空间找相似样本，按距离加权投票。
行为特征：浏览时长分桶、价格分位、加购、数量、渠道、设备等。
图片分支（可选）：解析宽高与体积，评估清晰度；结合文件名 / 品类关键词做相关性加分。
Logistic 融合：各因子加权后经 sigmoid 映射为购买概率，并给出置信度与贡献拆解。
6.2 典型输出字段
probability：购买概率（0~1）confidence：置信度label/ 文案结论（高意向、观望等）contributions：特征贡献列表（便于侧栏解释）geoDistribution：省份热力（供预测页中国 map）imageAnalysis：图片质量与相关性提示（若上传）
6.3 使用建议
先调参数看基线概率，再上传清晰商品图观察置信度变化。
库中样本越丰富，品类 / 近邻先验越稳定；可通过数据管理页补充样本。
七、目录结构
Vue23/ ├── index.html # 入口 HTML ├── package.json # 前端依赖与脚本 ├── vite.config.js # Vite：别名、代理 /api 与 /uploads ├── README.md # 本说明文档 ├── scripts/ │ └── dev.mjs # 一键同时启动前后端 ├── src/ │ ├── main.js # 应用入口 │ ├── App.vue │ ├── api/ │ │ └── http.js # Axios 封装（Token、401 跳转） │ ├── router/ │ │ └── index.js # 路由表与权限守卫 │ ├── stores/ │ │ └── index.js # 用户 / 主题 Pinia Store │ ├── styles/ │ │ └── global.scss # 深色主题、表格与滚动条 │ ├── layouts/ │ │ └── MainLayout.vue # 顶栏导航布局 │ ├── components/ │ │ ├── Model3D.vue # 大屏交互 3D 模型 │ │ └── ProductModel3D.vue # 预测页品类产品 3D │ └── views/ │ ├── Login.vue # 淘宝风格登录 │ ├── Dashboard.vue # 3D 模型大屏 │ ├── WorldMap.vue # 全球四级地图大屏 │ ├── ChartsPage.vue # 多维图表 │ ├── Predict.vue # 智能预测 │ ├── DataManage.vue # 购物数据管理 │ ├── UserManage.vue # 用户管理 │ ├── Settings.vue # 样式设置 │ └── DbConfig.vue # 数据库路径 └── server/ ├── package.json ├── index.js # Express API 入口 ├── db.js # SQLite 初始化、建表、种子数据 ├── predictEngine.js # Hybrid-Logit-kNN-v3 + 图片分析 ├── geoShopping.js # 四级地理购物数据 + DataV 拉取缓存 ├── data/ │ └── shopping.db # 运行后生成的默认库 └── uploads/ # 上传图片目录
八、快速开始
8.1 安装依赖
# 前端（项目根目录） npm install # 后端 cd server npm install cd ..
8.2 启动服务
方式 A：两个终端
# 终端 1 — 后端（默认 http://localhost:3001） cd server npm run dev # 终端 2 — 前端（默认 http://localhost:5173） npm run dev
方式 B：一键脚本（根目录）
npm run dev:all
8.3 访问
浏览器打开：http://localhost:5173
使用演示账号登录后，建议按以下路径体验：
/dashboard—— 切换 3D 主题，点击模型查看指标/worldmap—— 中国 → 某省 → 某市，观察四级地图与侧栏品类/charts—— 浏览各页签图表/predict—— 调参 + 上传商品图，查看概率与省份 map
8.4 生产构建
# 前端打包 npm run build npm run preview # 后端生产启动 cd server npm start
生产环境需自行将静态资源与 API 同源部署，或配置反向代理（Nginx 等）转发/api与/uploads。
九、页面路由与权限
| 路径 | 页面 | 权限 |
|---|---|---|
/login | 登录 | 公开 |
/dashboard | 3D 模型大屏 | 登录用户 |
/worldmap | 全球购物分类地图 | 登录用户 |
/charts | 图表分析 | 登录用户 |
/predict | 行为预测 | 登录用户 |
/data | 数据管理 | admin / analyst |
/users | 用户管理 | admin |
/settings | 样式设置 | admin |
/db | 数据库设置 | admin |
未登录访问业务页会跳转/login；无角色权限时提示并拦截。
十、数据库设计
默认路径：server/data/shopping.db引擎：SQLite（better-sqlite3）
10.1 主要表
| 表名 | 用途 |
|---|---|
users | 用户账号、手机号、角色、密码哈希、头像等 |
shopping_behavior | 购物行为样本（品类、价格、浏览、加购、区域、渠道、设备、是否购买等） |
predictions | 预测历史（输入参数、概率、置信度、关联图片等） |
system_settings | 主题与样式键值配置 |
db_config | 当前库路径等配置 |
10.2 首次启动种子数据
后端首次检测到空库时会自动：
创建上述表结构
写入演示账号（admin / analyst / viewer）
写入约500 条购物行为样本（多品类、区域、渠道、设备）
写入默认主题样式
可通过/db页切换到其他.db文件；切换后会按需重建表与演示数据。
十一、主要 API
除验证码与登录外，业务接口需携带：
Authorization: Bearer <token>
11.1 鉴权与用户
| 方法 | 路径 | 说明 | 权限 |
|---|---|---|---|
| GET | /api/captcha | 获取图形验证码 | 公开 |
| POST | /api/login | 登录（账号或手机号 + 验证码） | 公开 |
| GET | /api/me | 当前用户信息 | 登录 |
| GET | /api/users | 用户列表 | admin |
| POST | /api/users | 新建用户 | admin |
| PUT | /api/users/:id | 更新用户 | admin |
| DELETE | /api/users/:id | 删除用户 | admin |
11.2 购物数据与统计
| 方法 | 路径 | 说明 | 权限 |
|---|---|---|---|
| GET | /api/shopping | 分页查询购物行为 | 登录 |
| POST | /api/shopping | 新增 | admin / analyst |
| PUT | /api/shopping/:id | 更新 | admin / analyst |
| DELETE | /api/shopping/:id | 删除 | admin / analyst |
| GET | /api/shopping/export | 导出 Excel | 登录 |
| POST | /api/shopping/import | 导入 Excel | admin / analyst |
| GET | /api/dashboard/stats | 大屏 / 图表统计聚合 | 登录 |
11.3 预测
| 方法 | 路径 | 说明 | 权限 |
|---|---|---|---|
| POST | /api/predict | 行为预测（可 multipart 附带商品图） | 登录 |
| GET | /api/predictions | 预测历史列表 | 登录 |
11.4 地理地图（四级）
| 方法 | 路径 | 说明 | 权限 |
|---|---|---|---|
| GET | /api/geo/world | 一级世界数据 | 登录 |
| GET | /api/geo/country/:code | 二级国家下级 | 登录 |
| GET | /api/geo/province/:adcode | 三级省级下级 | 登录 |
| GET | /api/geo/city/:adcode | 四级市级下级 | 登录 |
| GET | /api/geo/map/:adcode | 中国行政区 GeoJSON 代理 | 登录 |
地理接口常见返回字段：list、levelIndex、levelLabel、useChinaMap、mapSource、mapAdcode、geo（国外示意地形）。
11.5 系统配置
| 方法 | 路径 | 说明 | 权限 |
|---|---|---|---|
| GET | /api/settings | 读取样式配置 | 登录 |
| PUT | /api/settings | 更新样式 | admin |
| GET | /api/db-config | 当前数据库路径 | admin |
| POST | /api/db-config | 切换数据库路径 | admin |
十二、配置与代理
12.1 端口
| 服务 | 默认端口 |
|---|---|
| 前端 Vite | 5173 |
| 后端 Express | 3001 |
12.2 Vite 代理（开发）
vite.config.js中将以下路径转发到后端：
/api→http://localhost:3001/uploads→http://localhost:3001
因此浏览器只需访问前端源，无需单独处理 CORS（开发态）。
12.3 常用 npm 脚本
| 位置 | 命令 | 作用 |
|---|---|---|
| 根目录 | npm run dev | 仅前端 |
| 根目录 | npm run dev:all | 前后端同时启动 |
| 根目录 | npm run build | 前端生产构建 |
| 根目录 | npm run server | 启动后端 |
| server | npm run dev/npm start | 后端开发 / 生产 |
十三、使用提示与常见问题
地图加载失败中国 / 世界地图依赖在线资源（DataV、jsDelivr）。网络受限时：
检查能否访问
geo.datav.aliyun.com优先使用后端
/api/geo/map/:adcode代理国外层级会回退到示意多边形，不影响演示主流程
后端进程异常退出（Windows 下偶见超大 exit code）多为手动结束旧进程或端口占用后重启，属于运维操作结果，不一定是业务代码错误。确认
Server running at http://localhost:3001即可。图片预测建议上传清晰商品主图；前端会压缩。上传可提升视觉特征权重与置信度文案。
表格白底 / 滚动管理页已覆盖深色表格样式；长内容页面使用
.page-scroll，可用页面滚动条查看全部内容。Node / native 模块安装失败请升级 Node 到 20.15+，删除
node_modules后重装；better-sqlite3需能完成本地编译或使用预编译包。验证码过期登录前请先获取验证码；过期或输错会返回明确错误信息，刷新验证码后重试。
十四、演示账号
角色 用户名 密码 手机号 管理员 admin admin123 13800000000 分析师 analyst analyst123 13700000000 访客 viewer viewer123 13900000000
仅用于本地演示。正式环境请修改默认密码，并更换 JWT Secret（
server/index.js中的JWT_SECRET）。
十五、二次开发建议
| 目标 | 建议切入点 |
|---|---|
| 调整预测逻辑 / 权重 | server/predictEngine.js |
| 扩充地理区域或品类 | server/geoShopping.js |
| 新增大屏主题模型 | src/components/Model3D.vue |
| 新增图表页签 | src/views/ChartsPage.vue |
| 改登录视觉 / 验证码 | src/views/Login.vue、server/index.jscaptcha |
| 改主题变量与表格样式 | src/styles/global.scss、/settings |
| 增加业务表字段 | server/db.js建表与种子逻辑，再同步前端表单 |
扩展四级地图时，优先保证GeoJSON 区域名与接口list[].name一致；中国区域尽量继续走 DataVadcode。
十六、版本信息
| 项 | 内容 |
|---|---|
| 项目名称 | 智购先知 · 用户购物行为预测分析系统 |
| 前端版本 | 1.0.0 |
| 预测模型 | Hybrid-Logit-kNN-v3 |
| 地图能力 | 四级下钻（世界 / 国家 / 省级 / 市级） |
| 许可证 | 仅供学习与演示使用 |
如有问题，请先确认前后端均已启动、Node 版本符合要求，并按第十三节排查网络与权限问题。
https://github.com/zhangsansh/Three.js-ECharts-SQLite-map-Vue3.githttps://github.com/zhangsansh/Three.js-ECharts-SQLite-map-Vue3.git
