基于机器学习思路的 用户购物行为预测与可视化大屏 全栈项目——智购先知 · 用户购物行为预测分析系统

智购先知 · 用户购物行为预测分析系统基于机器学习思路的用户购物行为预测与可视化大屏全栈项目。面向电商运营、数据分析、课程设计与毕设演示场景提供登录鉴权、三维交互大屏、全球四级地图下钻、多维 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.5Composition API、单页应用构建工具Vite 5^5.4开发服务器、生产打包路由Vue Router 4^4.6路由守卫、按角色控制菜单状态Pinia^4用户信息、主题配置UIElement Plus^2.14表单、表格、上传、对话框图表ECharts 5 echarts-gl^5.5 / ^2.0二维/三维图表、地图三维Three.js^0.185大屏主题模型、预测页产品孪生HTTPAxios^1.19拦截器注入 Token、统一错误提示ExcelSheetJS (xlsx)^0.18购物数据导入导出样式Sass / SCSS—全局深色主题变量后端Express 5ESMREST API数据库better-sqlite3—本地文件库零运维鉴权jsonwebtoken bcryptjs—登录态与密码哈希上传Multer—商品图 / Excel运行环境建议Node.js ≥ 20.15推荐 20.19。Windows / macOS / Linux 均可。四、功能模块详解4.1 登录与权限/login视觉淘宝风格布局 —— 顶部 Logo、橙色促销横幅、右侧白色登录浮层。登录方式账号密码登录手机号 密码登录图形验证码校验独立一行验证码图约 128×42淘宝橙色系 SVG扫码登录为演示示意角色模型角色示例账号密码能力范围管理员adminadminadmin123全部页面与系统配置分析师analystanalystanalyst123大屏、图表、预测、数据读写访客viewerviewerviewer123大屏 / 图表 / 预测只读手机号示例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 数据管理/dataadmin / analyst购物行为数据分页、筛选、增删改。Excel导入 / 导出SheetJS。深色表格样式覆盖避免 Element Plus 默认白底。4.6 用户管理/usersadmin用户增删改、角色分配、手机号维护。密码以 bcrypt 哈希存储。4.7 样式设置/settingsadmin可配置背景色、主题色、强调色、字体、字号、默认 3D 主题等。实时预览持久化到system_settings。4.8 数据库设置/dbadmin查看当前 SQLite 文件路径。切换 / 连接新库文件自动建表必要时初始化演示数据。五、全球购物分类地图四级下钻页面路径/worldmap核心文件src/views/WorldMap.vue、server/geoShopping.js5.1 四级结构层级含义地图地形来源业务数据一级·世界国家热力EChartsworld.jsonjsDelivr / fastly各国购物分类指数、GMV、热门品类二级·国家省 / 州中国DataV100000_full国外示意多边形省级区域列表 品类柱图三级·省级地级市中国DataV{省adcode}_full如广东 21 市国外示意城市图城市列表与购物热力四级·市级区县 / 分区中国DataV{市adcode}_full如广州 11 区国外示意分区图区县列表与品类分布5.2 交互说明点击地图区域或侧栏「进入下一级」按钮进行下钻。面包屑显示「一级·… / 二级·… / 三级·… / 四级·…」可回退任意层级。右侧面板展示行为指数、热门品类、GMV、购物分类分布柱图。中国区域名称与 DataV GeoJSONproperties.name对齐前端另有名称归一化与缺省区域补齐保证整图可着色。5.3 相关接口方法路径说明GET/api/geo/world一级世界国家列表GET/api/geo/country/:code二级国家 → 省/州中国返回useChinaMap、mapAdcodeGET/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-v36.1 思路概览引擎并非训练深度神经网络而是面向演示的可解释混合评分历史先验全库转化率、同品类转化率、性别 × 品类交叉先验。kNN 近邻在特征空间找相似样本按距离加权投票。行为特征浏览时长分桶、价格分位、加购、数量、渠道、设备等。图片分支可选解析宽高与体积评估清晰度结合文件名 / 品类关键词做相关性加分。Logistic 融合各因子加权后经 sigmoid 映射为购买概率并给出置信度与贡献拆解。6.2 典型输出字段probability购买概率0~1confidence置信度label/ 文案结论高意向、观望等contributions特征贡献列表便于侧栏解释geoDistribution省份热力供预测页中国 mapimageAnalysis图片质量与相关性提示若上传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:all8.3 访问浏览器打开http://localhost:5173使用演示账号登录后建议按以下路径体验/dashboard—— 切换 3D 主题点击模型查看指标/worldmap—— 中国 → 某省 → 某市观察四级地图与侧栏品类/charts—— 浏览各页签图表/predict—— 调参 上传商品图查看概率与省份 map8.4 生产构建# 前端打包 npm run build npm run preview ​ # 后端生产启动 cd server npm start生产环境需自行将静态资源与 API 同源部署或配置反向代理Nginx 等转发/api与/uploads。九、页面路由与权限路径页面权限/login登录公开/dashboard3D 模型大屏登录用户/worldmap全球购物分类地图登录用户/charts图表分析登录用户/predict行为预测登录用户/data数据管理admin / analyst/users用户管理admin/settings样式设置admin/db数据库设置admin未登录访问业务页会跳转/login无角色权限时提示并拦截。十、数据库设计默认路径server/data/shopping.db引擎SQLitebetter-sqlite310.1 主要表表名用途users用户账号、手机号、角色、密码哈希、头像等shopping_behavior购物行为样本品类、价格、浏览、加购、区域、渠道、设备、是否购买等predictions预测历史输入参数、概率、置信度、关联图片等system_settings主题与样式键值配置db_config当前库路径等配置10.2 首次启动种子数据后端首次检测到空库时会自动创建上述表结构写入演示账号admin / analyst / viewer写入约500 条购物行为样本多品类、区域、渠道、设备写入默认主题样式可通过/db页切换到其他.db文件切换后会按需重建表与演示数据。十一、主要 API除验证码与登录外业务接口需携带Authorization: Bearer token11.1 鉴权与用户方法路径说明权限GET/api/captcha获取图形验证码公开POST/api/login登录账号或手机号 验证码公开GET/api/me当前用户信息登录GET/api/users用户列表adminPOST/api/users新建用户adminPUT/api/users/:id更新用户adminDELETE/api/users/:id删除用户admin11.2 购物数据与统计方法路径说明权限GET/api/shopping分页查询购物行为登录POST/api/shopping新增admin / analystPUT/api/shopping/:id更新admin / analystDELETE/api/shopping/:id删除admin / analystGET/api/shopping/export导出 Excel登录POST/api/shopping/import导入 Exceladmin / analystGET/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更新样式adminGET/api/db-config当前数据库路径adminPOST/api/db-config切换数据库路径admin十二、配置与代理12.1 端口服务默认端口前端 Vite5173后端 Express300112.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启动后端servernpm 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 Secretserver/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