基于 Vue 3 + ECharts + Three.js + Express + SQLite 的图书推荐与数据可视化平台——深度学习个性化图书推荐系统 · 数据可视化大屏
深度学习个性化图书推荐系统 · 数据可视化大屏
基于Vue 3 + ECharts + Three.js + Express + SQLite的图书推荐与数据可视化平台。 系统围绕“个性化推荐”主题，提供独立的3D 场景大屏、多页 ECharts 图表大屏、模型预测调试、以及完整的用户/图书/数据库管理能力。
目录
项目简介
功能模块
技术栈
项目结构
快速开始
页面与路由说明
3D 场景说明
图表大屏说明
模型预测说明
权限与演示账号
数据库说明
主要 API
常见问题
项目简介
本系统模拟一套基于深度学习的个性化图书推荐业务场景，面向大屏展示与后台管理一体化需求：
登录鉴权：微信风格登录页（主题化改造），支持账号/手机号 + 图形验证码。
3D 可视化：独立全屏 3D 页面，四种图书主题场景，可点击交互并展示数据。
图表可视化：独立 ECharts 数据大屏，多分页组合展示推荐业务指标。
推荐预测：参数调优、封面图识别、输入喜欢书名推断兴趣类型与相关图书。
数据管理：图书 CRUD、Excel 导入导出、用户管理、SQLite 连接与表浏览。
主题定制：全局背景、字体、颜色、图表透明度等样式设置。
默认登录成功后进入3D 场景大屏（/screen3d）。
功能模块
1. 用户登录
左右分栏布局：左侧系统介绍与图书视觉，右侧登录表单（微信风格）
支持账号登录 / 手机号登录
图形验证码（点击刷新）
JWT 登录态，前端路由守卫校验
角色：
admin/editor/user
2. 3D 场景大屏（独立页面，不含 ECharts）
路径：/screen3d
| 场景 | 说明 | 点击反馈 |
|---|---|---|
| 智慧书架 | 木质书架 + 精装书册 + 分类铭牌 | 书架点亮 / 书册抽出 |
| 知识之塔 | 螺旋书塔 + 光环 + 塔芯晶体 | 塔芯共鸣 |
| 推荐星图 | 星球轨道 + 星尘粒子 + 引擎核心 | 星轨聚焦 |
| 兴趣网络 | 兴趣簇节点 + 关联边 + 中枢 | 兴趣共振 |
交互能力：
拖拽旋转、滚轮缩放
点击模型弹出右侧数据面板（字段、洞察、关联推荐）
顶部 KPI、左侧场景说明与图例随场景变化
相机缓动聚焦、模型呼吸高亮、屏幕涟漪特效
3. 图表数据大屏（独立页面，纯 ECharts）
路径：/dashboard
分页内容包括但不限于：
大数据量面积图、渐变堆叠面积图
缓动函数可视化、矩阵微型折线
堆叠柱状归一化、阶梯瀑布图
主题河流图、象形柱图、农历日历热力
相关矩阵（热力图 / 散点图）、散点矩阵组合
三维散点图、三维柱状图、Top 推荐榜
4. 模型预测
路径：/predict
喜欢的书名预测：多书名输入/联想，推断喜好类型分布 + 相关图书（内容偏好 + 协同过滤）
参数调试训练：NCF / Wide&Deep / DeepFM / DIN / Transformer，滑条调参，一键最优参数
评估指标：Accuracy、Precision、Recall、F1、NDCG、MAP、HitRate、AUC、Loss
封面图片预测：类型/大小校验、预览、重新识别，结合文件名与馆藏分类推断
5. 图书管理（admin / editor）
路径：/books
图书增删改查、关键词与分类筛选
Excel 导入 / 导出
暗色透明表格（消除默认白底）
6. 用户管理（admin）
路径：/users
用户新增 / 编辑 / 删除
角色分配、手机号维护
7. 数据库设置（admin）
路径：/db-settings
查看/切换 SQLite 数据库路径
浏览数据表内容（分页）
8. 样式设置（admin）
路径：/style
背景色 / 渐变、主题色、强调色、文字色
字体、面板背景、图表透明度
预设主题：书香金典、墨韵青绿、深夜琥珀、科技蓝调
技术栈
前端
| 技术 | 用途 |
|---|---|
| Vue 3 | 页面与组件 |
| Vite | 开发构建 |
| Vue Router | 路由与权限守卫 |
| Pinia | 用户态 / 主题态 |
| Element Plus | 表单、表格、对话框等 |
| ECharts / ECharts-GL / vue-echarts | 2D/3D 图表 |
| Three.js | 3D 场景渲染与交互 |
| Axios | API 请求 |
| Sass | 样式 |
后端
| 技术 | 用途 |
|---|---|
| Express | HTTP API |
| better-sqlite3 | 本地 SQLite |
| JWT + bcryptjs | 鉴权与密码哈希 |
| svg-captcha | 验证码 |
| multer | 图片上传 |
| xlsx | Excel 导入导出 |
项目结构
Vue20/ ├── index.html ├── package.json ├── vite.config.js # 开发代理 /api -> :3001 ├── public/ ├── server/ │ ├── index.js # Express 入口 │ ├── db.js # SQLite 初始化与种子数据 │ ├── data/books.db # 运行后生成的数据库文件 │ ├── uploads/ # 上传临时目录 │ └── routes/ │ ├── auth.js # 登录 / 验证码 │ ├── users.js # 用户管理 │ ├── books.js # 图书与统计 │ ├── data.js # 导入导出 / 表浏览 │ ├── predict.js # 模型预测相关 │ └── settings.js # 主题样式 └── src/ ├── main.js ├── App.vue ├── api/index.js ├── router/index.js ├── stores/index.js ├── styles/global.scss ├── utils/chartOptions.js ├── layouts/MainLayout.vue ├── components/ │ ├── BookScene3D.vue # 3D 主场景 │ └── BookScene3DSwitcher.vue # 场景切换器 └── views/ ├── Login.vue ├── Screen3D.vue # 3D 大屏页 ├── Dashboard.vue # 图表大屏页 ├── Predict.vue ├── DataManage.vue ├── UserManage.vue ├── DbSettings.vue └── StyleSettings.vue
快速开始
环境要求
Node.js 建议18+（项目开发时使用过 20.x）
Windows / macOS / Linux 均可
首次安装
better-sqlite3可能需要本地编译环境（Windows 通常需 Build Tools）
安装依赖
npm install
启动（前后端同时）
npm run dev
该命令会并行启动：
后端：
node server/index.js→ http://localhost:3001前端：Vite → http://localhost:5173
浏览器访问：http://localhost:5173
其它脚本
npm run client # 仅启动前端 npm run server # 仅启动后端 npm run build # 生产构建 npm run preview # 预览构建产物
停止服务
结束占用5173/3001端口的进程，或在对应终端按Ctrl + C。
页面与路由说明
| 路径 | 页面 | 权限 | 说明 |
|---|---|---|---|
/login | 登录 | 公开 | 账号/手机号 + 验证码 |
/screen3d | 3D 场景大屏 | 登录用户 | 默认进入页，纯 3D |
/dashboard | 图表数据大屏 | 登录用户 | 纯 ECharts 分页 |
/predict | 模型预测 | 登录用户 | 调参 / 书名 / 封面预测 |
/books | 图书管理 | admin, editor | CRUD + 导入导出 |
/users | 用户管理 | admin | 用户与角色 |
/db-settings | 数据库设置 | admin | SQLite 连接与表浏览 |
/style | 样式设置 | admin | 全局主题 |
未登录访问受保护页面会跳转/login；无权限访问管理页会回到大屏。
3D 场景说明
每个场景都有独立的：
灯光与配色氛围
KPI 指标组合
左侧图例数据源
可点击对象与数据字段
点击动效名称与反馈文案
数据来自/api/books/stats（分类、Top 图书、模型统计等），点击后在右侧展示详情、洞察说明与关联推荐。
图表大屏说明
图表配置集中在
src/utils/chartOptions.js使用确定性伪随机，避免刷新时图表无意义跳动
第 5 页三维图表按需加载
echarts-gl布局为网格卡片，支持上下滚动查看全部内容
模型预测说明
书名兴趣预测
输入或从联想列表选择喜欢的书名（可多本）
系统优先精确/前缀/模糊匹配馆藏
聚合偏好类型（温度锐化）
使用内容偏好 + 协同过滤（ratings）+ 推荐日志集成排序相关图书
参数训练预测
支持多种深度推荐模型类型切换
「一键最优参数」默认偏向高精度组合（如 Transformer + 合适超参）
输出训练曲线与 Top-K 推荐列表（基于 SQLite 真实图书）
封面预测
校验图片类型与大小（≤ 5MB）
结合文件名关键词、书名匹配、分类分布进行推断
Softmax 锐化提升 Top-1 置信度，并返回相关图书
权限与演示账号
| 用户名 | 密码 | 手机号 | 角色 | 可用能力 |
|---|---|---|---|---|
| admin | admin123 | 13800000001 | 管理员 | 全部功能 |
| editor | editor123 | 13800000002 | 编辑 | 大屏、预测、图书管理、导入导出 |
| user1 | user123 | 13800000003 | 普通用户 | 大屏、预测 |
| user2 | user123 | 13900000004 | 普通用户 | 大屏、预测 |
手机号登录示例：
手机号：
13800000001密码：
admin123
数据库说明
默认数据库路径：
server/data/books.db
首次启动会自动创建并写入演示数据。
主要数据表
| 表名 | 说明 |
|---|---|
users | 用户账号、手机号、角色、密码哈希 |
books | 图书信息、评分、推荐分、分类等 |
ratings | 用户-图书评分（协同过滤来源） |
recommend_logs | 推荐日志 / 模型得分 |
categories | 分类及数量统计 |
system_settings | 系统配置（含主题 JSON） |
可在「数据库设置」页面查看表数据；管理员可尝试切换.db文件路径。
主要 API
基础前缀：/api（开发环境由 Vite 代理到3001）
| 方法 | 路径 | 说明 |
|---|---|---|
| GET | /auth/captcha | 获取验证码 |
| POST | /auth/login | 登录 |
| GET | /books | 图书分页列表 |
| GET | /books/stats | 大屏统计数据 |
| POST/PUT/DELETE | /books | 图书增改删 |
| GET/POST/PUT/DELETE | /users | 用户管理 |
| GET | /data/export | 导出 Excel |
| POST | /data/import | 导入 Excel |
| GET | /data/tables | 表列表 |
| GET | /data/table/:name | 表数据 |
| POST | /predict/run | 参数训练预测 |
| POST | /predict/by-title | 书名兴趣预测 |
| POST | /predict/image | 封面图预测 |
| GET | /predict/suggest | 书名联想 |
| GET/PUT | /settings/theme | 读取/保存主题 |
| GET | /health | 健康检查 |
| GET/POST | /db/info/db/connect | 数据库信息/重连（需管理员） |
除登录与验证码外，多数接口需请求头：
Authorization: Bearer <token>
常见问题
1.better-sqlite3安装失败
Windows 需安装构建工具，或使用已配置好的 Node 环境后重新npm install。
2. 端口被占用
前端默认
5173后端默认
3001结束占用进程后重试npm run dev。
3. 登录提示验证码错误
点击验证码图片刷新后再试；验证码区分大小写不敏感，但必须与当前图片一致。
4. 3D 页面空白或卡顿
确认已登录并进入
/screen3d检查浏览器是否支持 WebGL
强制刷新（Ctrl+F5）清除旧缓存
5. 管理页表格发白
全局样式已对 Element Plus 表格做暗色透明覆盖；若仍异常，确认src/styles/global.scss已生效。
6. 预测结果不准
训练预测：先点「一键最优参数」
书名预测：尽量从联想列表选择标准馆藏书名，命中率更高
开发说明
前端开发服务器通过
vite.config.js将/api代理到后端主题变量以 CSS Variables 形式注入（
--primary-color、--bg-gradient等）页面长内容区域使用
.page-scroll提供滚动条，避免内容被裁切生产构建：
npm run build，静态资源输出到dist/；后端仍需单独运行 Express
License
仅供学习、演示与课程设计使用。
https://github.com/zhangsansh/Vue3-ECharts-Three.js-SQLite.githttps://github.com/zhangsansh/Vue3-ECharts-Three.js-SQLite.git