云起云市场_国内正版独立SaaS抖音QQ微信百度支付宝小程序软件应用交易服务市场商店平台

 找回密码
 立即注册
查看: 3.3K|回复: 7

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

[复制链接]

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

[复制链接]
盗墓笔记印章美学MBTI人格测试广告图 (1).jpg
  1. 盗墓笔记印章美学MBTI人格测试H5全栈项目源码 基于角色匹配的互动心理测试完整实现
复制代码

  1. ## 项目概述

  2. 盗墓笔记印章美学MBTI是一个以小说《盗墓笔记》为主题的全栈互动H5应用。用户完成一套12道题的MBTI人格测试后,匹配到小说中的一位角色,并可生成带有印章美学的分享海报。

  3. ---

  4. ## 用户端功能

  5. ### 启动页
  6. 应用入口,展示印章动画和标题。加载时从服务端获取H5配置(测试开关、活动标题、协议内容等)。若测试已关闭则提示不可用。配置加载完成后自动跳转到引导页。

  7. ### 引导页
  8. 展示测试介绍、隐私协议和测试须知。用户需勾选同意隐私协议后才能点击"开始测试"按钮。点击后检查是否已完成测试(根据设备ID),若已完成则提示查看结果或重新测试。

  9. ### 答题页
  10. 顺序展示12道MBTI题目,每题有2个选项。每道题属于四个维度之一:外向/内向、实感/直觉、理智/情感、判断/知觉。用户选择答案后自动进入下一题并保存答题进度到本地存储。答完所有题目后自动提交答案到服务端计算MBTI类型,同时前端也独立计算一份做对比。提交后跳转到结果页。

  11. ### 结果页
  12. 展示匹配的角色信息:角色印章图像、书法图像、MBTI类型徽章、人格解读描述、角色语录、专属寄语。页面加载1.5秒后自动弹出信息填写对话框,表单字段(姓名、手机号、渠道、留言)由H5配置动态控制。填写信息后点击"生成分享海报"按钮调用AI图片生成接口,生成后跳转到海报页。

  13. ### 海报页
  14. 展示可分享的海报,有两种模式:若有AI生成的海报图片则直接显示,否则手动组装海报(包含角色印章、角色名、MBTI类型、分享文案、二维码、品牌信息)。支持保存海报到本地和通过Web Share API分享。分享和保存操作会上报统计数据。

  15. ---

  16. ## 管理后台功能

  17. ### 登录页
  18. 管理员使用用户名和密码登录。支持"记住我"功能(token存储在localStorage或sessionStorage)。登录成功后跳转数据看板。

  19. ### 数据看板
  20. 展示运营统计数据的可视化看板。包含:总测试人数、当日测试人数、有效信息采集数、MBTI类型分布饼图、角色人气排行条形图、海报生成次数、AI图片调用次数、用户分享次数。每60秒自动刷新。

  21. ### 题库管理
  22. 对12道MBTI题目进行增删改查。支持富文本编辑器编辑题目内容,设置所属维度,配置选项的标签和分值。支持按排序权重排列。支持批量导入和导出JSON格式的题库数据。

  23. ### 角色管理
  24. 对10个盗墓笔记角色进行管理。可设置角色名称、MBTI类型、上传或AI生成印章/书法/海报图片、编写角色描述/语录/寄语。支持图片上传预览。

  25. ### 用户数据管理
  26. 查看和管理所有参与测试的用户数据。支持按MBTI类型、角色、手机号、日期范围筛选。可查看用户详细信息(包括解密后的姓名和手机号、角色图片、答题原始数据)。支持单个删除、批量删除、导出为CSV文件、清空全部数据。

  27. ### 系统配置
  28. 配置前端H5的各项参数,分为四个标签页:H5基础配置(标题、展览名称、活动描述、LOGO图片)、社交配置(海报标题、分享标题和描述)、活动开关(开启测试开关、允许重复测试开关)、隐私协议(富文本编辑器编辑协议内容)。

  29. ### AI图片缓存
  30. 查看和管理AI生成的图片缓存。展示API调用次数统计、已生成素材数量、各类型分布。支持按类型和角色筛选,预览图片,重新生成,单个或全部删除。

  31. ### 个人中心
  32. 管理员可查看账号信息、修改密码(需验证旧密码)、查看系统运行状态(版本、环境、API连接状态)、浏览操作日志。

  33. ---

  34. ## 核心数据流

  35. 用户打开H5后,启动页获取配置并存储到本地。引导页读取配置决定是否允许测试。答题页从服务端获取题目,用户逐题作答,本地保存进度。答完提交到服务端计算MBTI类型,服务端根据各维度得分累加得出四字母类型。结果页根据MBTI类型匹配角色,用户填写信息后提交(姓名和手机号使用AES-256-CBC加密存储)。海报页生成分享海报,支持AI图片或手动组装两种模式。

  36. 管理后台全部操作需JWT鉴权,每次增删改操作均记录到操作日志。用户数据中的姓名和手机号在数据库中加密存储,管理员查看时解密显示。导出CSV时包含解密后的数据。

  37. ---

  38. ## 初始化数据

  39. - 12道MBTI题目,每个维度3题
  40. - 10个盗墓笔记角色,对应10种MBTI类型
  41. - 默认管理员账号 admin / 123456
  42. - 2条示例用户记录
  43. - H5配置、隐私协议、分享配置
复制代码
13424339877416429.jpeg




上一篇:音乐会电影院票务门票购买系统 - 在线选座购票与电子票...
回复

使用道具 举报

支持!!!
回复

使用道具 举报

ygh*** 前天 14:09 | 显示全部楼层
沙发!!
回复

使用道具 举报

支持!!!
回复

使用道具 举报

你好棒!!
回复

使用道具 举报

不错!!
回复

使用道具 举报

顶一下!!
回复

使用道具 举报

你历害!!
回复

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies |上传

本版积分规则

加载中0.229484

QQ|小黑屋|云起SaaS | 鲁ICP备15033450号-1 劰载中...|网站地图

GMT+8, 2026-5-28 01:42 , Processed in 0.310870 second(s), 50 queries .

Copyright © 菏泽云起网络科技有限公司.

快速回复 返回顶部 返回列表