盗墓笔记印章美学MBTI人格测试H5全栈项目源码 基于角色匹...

1. 盗墓笔记印章美学MBTI人格测试H5全栈项目源码 基于角色匹配的互动心理测试完整实现

复制代码

1. ## 项目概述
   
2. 
   
3. 盗墓笔记印章美学MBTI是一个以小说《盗墓笔记》为主题的全栈互动H5应用。用户完成一套12道题的MBTI人格测试后，匹配到小说中的一位角色，并可生成带有印章美学的分享海报。
   
4. 
   
5. ---
   
6. 
   
7. ## 用户端功能
   
8. 
   
9. ### 启动页
   
10. 应用入口，展示印章动画和标题。加载时从服务端获取H5配置（测试开关、活动标题、协议内容等）。若测试已关闭则提示不可用。配置加载完成后自动跳转到引导页。
    
11. 
    
12. ### 引导页
    
13. 展示测试介绍、隐私协议和测试须知。用户需勾选同意隐私协议后才能点击"开始测试"按钮。点击后检查是否已完成测试（根据设备ID），若已完成则提示查看结果或重新测试。
    
14. 
    
15. ### 答题页
    
16. 顺序展示12道MBTI题目，每题有2个选项。每道题属于四个维度之一：外向/内向、实感/直觉、理智/情感、判断/知觉。用户选择答案后自动进入下一题并保存答题进度到本地存储。答完所有题目后自动提交答案到服务端计算MBTI类型，同时前端也独立计算一份做对比。提交后跳转到结果页。
    
17. 
    
18. ### 结果页
    
19. 展示匹配的角色信息：角色印章图像、书法图像、MBTI类型徽章、人格解读描述、角色语录、专属寄语。页面加载1.5秒后自动弹出信息填写对话框，表单字段（姓名、手机号、渠道、留言）由H5配置动态控制。填写信息后点击"生成分享海报"按钮调用AI图片生成接口，生成后跳转到海报页。
    
20. 
    
21. ### 海报页
    
22. 展示可分享的海报，有两种模式：若有AI生成的海报图片则直接显示，否则手动组装海报（包含角色印章、角色名、MBTI类型、分享文案、二维码、品牌信息）。支持保存海报到本地和通过Web Share API分享。分享和保存操作会上报统计数据。
    
23. 
    
24. ---
    
25. 
    
26. ## 管理后台功能
    
27. 
    
28. ### 登录页
    
29. 管理员使用用户名和密码登录。支持"记住我"功能（token存储在localStorage或sessionStorage）。登录成功后跳转数据看板。
    
30. 
    
31. ### 数据看板
    
32. 展示运营统计数据的可视化看板。包含：总测试人数、当日测试人数、有效信息采集数、MBTI类型分布饼图、角色人气排行条形图、海报生成次数、AI图片调用次数、用户分享次数。每60秒自动刷新。
    
33. 
    
34. ### 题库管理
    
35. 对12道MBTI题目进行增删改查。支持富文本编辑器编辑题目内容，设置所属维度，配置选项的标签和分值。支持按排序权重排列。支持批量导入和导出JSON格式的题库数据。
    
36. 
    
37. ### 角色管理
    
38. 对10个盗墓笔记角色进行管理。可设置角色名称、MBTI类型、上传或AI生成印章/书法/海报图片、编写角色描述/语录/寄语。支持图片上传预览。
    
39. 
    
40. ### 用户数据管理
    
41. 查看和管理所有参与测试的用户数据。支持按MBTI类型、角色、手机号、日期范围筛选。可查看用户详细信息（包括解密后的姓名和手机号、角色图片、答题原始数据）。支持单个删除、批量删除、导出为CSV文件、清空全部数据。
    
42. 
    
43. ### 系统配置
    
44. 配置前端H5的各项参数，分为四个标签页：H5基础配置（标题、展览名称、活动描述、LOGO图片）、社交配置（海报标题、分享标题和描述）、活动开关（开启测试开关、允许重复测试开关）、隐私协议（富文本编辑器编辑协议内容）。
    
45. 
    
46. ### AI图片缓存
    
47. 查看和管理AI生成的图片缓存。展示API调用次数统计、已生成素材数量、各类型分布。支持按类型和角色筛选，预览图片，重新生成，单个或全部删除。
    
48. 
    
49. ### 个人中心
    
50. 管理员可查看账号信息、修改密码（需验证旧密码）、查看系统运行状态（版本、环境、API连接状态）、浏览操作日志。
    
51. 
    
52. ---
    
53. 
    
54. ## 核心数据流
    
55. 
    
56. 用户打开H5后，启动页获取配置并存储到本地。引导页读取配置决定是否允许测试。答题页从服务端获取题目，用户逐题作答，本地保存进度。答完提交到服务端计算MBTI类型，服务端根据各维度得分累加得出四字母类型。结果页根据MBTI类型匹配角色，用户填写信息后提交（姓名和手机号使用AES-256-CBC加密存储）。海报页生成分享海报，支持AI图片或手动组装两种模式。
    
57. 
    
58. 管理后台全部操作需JWT鉴权，每次增删改操作均记录到操作日志。用户数据中的姓名和手机号在数据库中加密存储，管理员查看时解密显示。导出CSV时包含解密后的数据。
    
59. 
    
60. ---
    
61. 
    
62. ## 初始化数据
    
63. 
    
64. - 12道MBTI题目，每个维度3题
    
65. - 10个盗墓笔记角色，对应10种MBTI类型
    
66. - 默认管理员账号 admin / 123456
    
67. - 2条示例用户记录
    
68. - H5配置、隐私协议、分享配置

复制代码

支持！！！

沙发！！

支持！！！

你好棒！！

不错！！

顶一下！！

你历害！！