深度学习个性化图书推荐系统 · 数据可视化大屏基于Vue 3 ECharts Three.js Express SQLite的图书推荐与数据可视化平台。 系统围绕“个性化推荐”主题提供独立的3D 场景大屏、多页 ECharts 图表大屏、模型预测调试、以及完整的用户/图书/数据库管理能力。目录项目简介功能模块技术栈项目结构快速开始页面与路由说明3D 场景说明图表大屏说明模型预测说明权限与演示账号数据库说明主要 API常见问题项目简介本系统模拟一套基于深度学习的个性化图书推荐业务场景面向大屏展示与后台管理一体化需求登录鉴权微信风格登录页主题化改造支持账号/手机号 图形验证码。3D 可视化独立全屏 3D 页面四种图书主题场景可点击交互并展示数据。图表可视化独立 ECharts 数据大屏多分页组合展示推荐业务指标。推荐预测参数调优、封面图识别、输入喜欢书名推断兴趣类型与相关图书。数据管理图书 CRUD、Excel 导入导出、用户管理、SQLite 连接与表浏览。主题定制全局背景、字体、颜色、图表透明度等样式设置。默认登录成功后进入3D 场景大屏/screen3d。功能模块1. 用户登录左右分栏布局左侧系统介绍与图书视觉右侧登录表单微信风格支持账号登录 / 手机号登录图形验证码点击刷新JWT 登录态前端路由守卫校验角色admin/editor/user2. 3D 场景大屏独立页面不含 ECharts路径/screen3d场景说明点击反馈智慧书架木质书架 精装书册 分类铭牌书架点亮 / 书册抽出知识之塔螺旋书塔 光环 塔芯晶体塔芯共鸣推荐星图星球轨道 星尘粒子 引擎核心星轨聚焦兴趣网络兴趣簇节点 关联边 中枢兴趣共振交互能力拖拽旋转、滚轮缩放点击模型弹出右侧数据面板字段、洞察、关联推荐顶部 KPI、左侧场景说明与图例随场景变化相机缓动聚焦、模型呼吸高亮、屏幕涟漪特效3. 图表数据大屏独立页面纯 ECharts路径/dashboard分页内容包括但不限于大数据量面积图、渐变堆叠面积图缓动函数可视化、矩阵微型折线堆叠柱状归一化、阶梯瀑布图主题河流图、象形柱图、农历日历热力相关矩阵热力图 / 散点图、散点矩阵组合三维散点图、三维柱状图、Top 推荐榜4. 模型预测路径/predict喜欢的书名预测多书名输入/联想推断喜好类型分布 相关图书内容偏好 协同过滤参数调试训练NCF / WideDeep / 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-echarts2D/3D 图表Three.js3D 场景渲染与交互AxiosAPI 请求Sass样式后端技术用途ExpressHTTP APIbetter-sqlite3本地 SQLiteJWT bcryptjs鉴权与密码哈希svg-captcha验证码multer图片上传xlsxExcel 导入导出项目结构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.xWindows / 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登录公开账号/手机号 验证码/screen3d3D 场景大屏登录用户默认进入页纯 3D/dashboard图表数据大屏登录用户纯 ECharts 分页/predict模型预测登录用户调参 / 书名 / 封面预测/books图书管理admin, editorCRUD 导入导出/users用户管理admin用户与角色/db-settings数据库设置adminSQLite 连接与表浏览/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 置信度并返回相关图书权限与演示账号用户名密码手机号角色可用能力adminadmin12313800000001管理员全部功能editoreditor12313800000002编辑大屏、预测、图书管理、导入导出user1user12313800000003普通用户大屏、预测user2user12313900000004普通用户大屏、预测手机号登录示例手机号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导出 ExcelPOST/data/import导入 ExcelGET/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强制刷新CtrlF5清除旧缓存5. 管理页表格发白全局样式已对 Element Plus 表格做暗色透明覆盖若仍异常确认src/styles/global.scss已生效。6. 预测结果不准训练预测先点「一键最优参数」书名预测尽量从联想列表选择标准馆藏书名命中率更高开发说明前端开发服务器通过vite.config.js将/api代理到后端主题变量以 CSS Variables 形式注入--primary-color、--bg-gradient等页面长内容区域使用.page-scroll提供滚动条避免内容被裁切生产构建npm run build静态资源输出到dist/后端仍需单独运行 ExpressLicense仅供学习、演示与课程设计使用。https://github.com/zhangsansh/Vue3-ECharts-Three.js-SQLite.githttps://github.com/zhangsansh/Vue3-ECharts-Three.js-SQLite.git