网站打不开部署自己的SBTI人格测试附源码链接最近在B站刷到了一个很火的SBTI人格测试觉得挺有意思的。作为一名开发者我决定自己动手实现一个可以本地部署的版本。本文将带你从零开始用Flask框架搭建一个完整的人格测试网站。技术栈Flask 原生HTML/CSS/JavaScript项目地址部署自己的SBTI一、SBTI测试原理解析1.1 什么是SBTISBTI人格测试采用量表打分 向量匹配的混合机制通过30道常规题目从5个模型的15个维度分析用户的人格特征。1.2 五大模型与15个维度模型维度说明自我模型SS1-自尊自信S2-自我清晰度S3-核心价值评估自我认知和价值观情感模型EE1-依恋安全感E2-情感投入度E3-边界与依赖评估情感模式和亲密关系态度模型AA1-世界观倾向A2-规则与灵活度A3-人生意义感评估对世界的态度行动驱力AcAc1-动机导向Ac2-决策风格Ac3-执行模式评估行动力和决策方式社交模型SoSo1-社交主动性So2-人际边界感So3-表达与真实度评估社交风格1.3 赋分机制选项分值A选项 1分低分B选项 2分中分C选项 3分高分维度等级转换每个维度由2道题组成总分转换为等级2-3分 → L低4分 → M中5-6分 → H高人格匹配将用户的15维度等级向量与25种预定义人格模式进行匹配选出最接近的类型。二、项目架构设计2.1 项目结构sbti/ ├── app.py # Flask后端主文件 ├── templates/ │ └── index.html # 前端页面 ├── requirements.txt # Python依赖 └── README.md # 项目文档2.2 技术选型后端框架Flask 3.0.0轻量、简单、易上手前端技术原生HTML/CSS/JavaScript无需打包开箱即用数据存储内存存储无需数据库适合小型项目三、后端实现详解3.1 Flask应用初始化fromflaskimportFlask,render_template,request,jsonifyimportrandom appFlask(__name__)3.2 数据结构设计人格类型定义PERSONALITIES{HHHH:{name:HHHH,emoji:,desc:全维度高分罕见的全能型人格},SEALH:{name:SEALH,emoji:,desc:自信稳定情感投入乐观行动派},SEAHH:{name:SEAHH,emoji:,desc:自信独立情感充沛高执行力},DRUNK:{name:DRUNK,emoji:,desc:保温杯里泡枸杞的养生朋克},# ... 共25种人格类型}题目数据结构QUESTIONS[{id:1,dim:S1,# 对应维度text:别人夸你的时候你的第一反应是,options:[A. 先怀疑是不是在讽刺,B. 表面谦虚心里还挺受用,C. 坦然接受觉得理所当然]},# ... 共30道题]特殊题彩蛋SPECIAL_QUESTIONS[{id:31,type:drunk,text:保温杯里泡枸杞你觉得,options:[A. 养生达人,B. 朋克养生,C. 保温杯里泡白酒],trigger:C# 触发条件}]3.3 核心API实现API 1获取题目列表app.route(/api/questions,methods[GET])defget_questions():获取随机打乱的题目questionsQUESTIONS.copy()random.shuffle(questions)# 随机打乱顺序# 随机插入1道特殊题special_qrandom.choice(SPECIAL_QUESTIONS)insert_posrandom.randint(10,25)questions.insert(insert_pos,special_q)returnjsonify(questions)API 2计算测试结果app.route(/api/calculate,methods[POST])defcalculate_result():计算测试结果datarequest.json answersdata.get(answers,{})# 1. 检查是否触发DRUNK彩蛋forqid,answerinanswers.items():qnext((qforqinSPECIAL_QUESTIONSifstr(q[id])qid),None)ifqandq.get(type)drunkandanswerq.get(trigger):returnjsonify({personality:DRUNK,emoji:,name:DRUNK,desc:保温杯里泡枸杞的养生朋克,match_rate:100})# 2. 计算15个维度的分数dim_scores{}forqinQUESTIONS:qidstr(q[id])ifqidinanswers:answeranswers[qid]# 计算分数A1, B2, C3ifanswerA:score3ifq.get(reverse)else1elifanswerB:score2else:# Cscore1ifq.get(reverse)else3dimq[dim]ifdimnotindim_scores:dim_scores[dim][]dim_scores[dim].append(score)# 3. 转换为L/M/H等级dim_levels{}fordim,scoresindim_scores.items():totalsum(scores)iftotal3:levelLeliftotal4:levelMelse:levelHdim_levels[dim]level# 4. 匹配最佳人格类型best_matchfind_best_personality(dim_levels)personality_infoPERSONALITIES.get(best_match)returnjsonify({personality:best_match,emoji:personality_info[emoji],name:personality_info[name],desc:personality_info[desc],match_rate:85,dimensions:dim_levels})人格匹配算法deffind_best_personality(dim_levels):根据维度等级匹配最佳人格# 计算各模型的平均等级s_avgget_avg_level([dim_levels.get(S1),dim_levels.get(S2),dim_levels.get(S3)])e_avgget_avg_level([dim_levels.get(E1),dim_levels.get(E2),dim_levels.get(E3)])a_avgget_avg_level([dim_levels.get(A1),dim_levels.get(A2),dim_levels.get(A3)])ac_avgget_avg_level([dim_levels.get(Ac1),dim_levels.get(Ac2),dim_levels.get(Ac3)])# 组合成人格模式patterns_avge_avga_avgac_avgifpatterninPERSONALITIES:returnpatternreturnHHHH# 默认返回defget_avg_level(levels):计算平均等级level_map{L:1,M:2,H:3}scores[level_map.get(l,2)forlinlevelsifl]ifnotscores:returnMavgsum(scores)/len(scores)ifavg1.5:returnLelifavg2.5:returnMelse:returnH四、前端实现详解4.1 UI设计思路参考原版网站采用清新的绿色主题:root{--bg:#f6faf6;/* 背景色 */--panel:#ffffff;/* 卡片背景 */--text:#1e2a22;/* 文字颜色 */--accent:#6c8d71;/* 主题色 */--accent-strong:#4d6a53;/* 深色主题 */--shadow:0 16px 40pxrgba(47,73,55,0.08);/* 阴影 */--radius:22px;/* 圆角 */}4.2 页面结构采用三屏切换设计!-- 首页 --dividhome-screenclassscreen activedivclasscard heroh1SBTI 人格测试/h1buttononclickstartTest()开始测试/button/div/div!-- 测试页面 --dividtest-screenclassscreendivclassprogressspanidprogress-bar/span/divdividquestion-container/divbuttononclicknextQuestion()下一题/button/div!-- 结果页面 --dividresult-screenclassscreendivclassresult-emoji/divdivclassresult-nameSEALH/divdivclassresult-desc自信稳定情感投入乐观行动派/div/div4.3 核心JavaScript逻辑开始测试asyncfunctionstartTest(){constresponseawaitfetch(/api/questions);questionsawaitresponse.json();showScreen(test-screen);renderQuestion();}渲染题目functionrenderQuestion(){constqquestions[currentIndex];constcontainerdocument.getElementById(question-container);container.innerHTMLdiv classquestion-card div classquestion-text${currentIndex1}.${q.text}/div div classoptions${q.options.map((opt,i)div classoption${answers[q.id]opt[0]?selected:} onclickselectOption(${q.id}, ${opt[0]})${opt}/div).join()}/div /div;updateProgress();}提交测试asyncfunctionsubmitTest(){constresponseawaitfetch(/api/calculate,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({answers})});constresultawaitresponse.json();showResult(result);}显示结果functionshowResult(result){document.getElementById(result-emoji).textContentresult.emoji;document.getElementById(result-name).textContentresult.name;document.getElementById(result-desc).textContentresult.desc;document.getElementById(result-match).textContent匹配度:${result.match_rate}%;// 显示维度分析constdimLabels{S1:自尊自信,S2:自我清晰度,S3:核心价值,E1:依恋安全感,E2:情感投入度,E3:边界与依赖,// ... 其他维度};// 渲染维度网格// ...showScreen(result-screen);}五、项目亮点与优化5.1 题目随机化每次测试时题目顺序都会随机打乱避免记忆答案questionsQUESTIONS.copy()random.shuffle(questions)5.2 隐藏彩蛋机制在题目中随机插入特殊题选择特定答案触发彩蛋# 检查是否触发DRUNK彩蛋ifanswerC:# 选择保温杯里泡白酒returnDRUNK人格5.3 反转题处理部分题目Q14、Q27的选项分值顺序相反ifanswerA:score3ifq.get(reverse)else1# 反转题A3分5.4 响应式设计使用CSS媒体查询适配移动端media(max-width:640px){.hero h1{font-size:32px;}.result-emoji{font-size:60px;}}5.5 进度条动画实时显示测试进度提升用户体验functionupdateProgress(){constprogress((currentIndex1)/questions.length)*100;document.getElementById(progress-bar).style.widthprogress%;}六、部署与运行6.1 本地运行# 1. 克隆项目gitclone https://github.com/yourusername/sbti-test.gitcdsbti-test# 2. 安装依赖pipinstallFlask3.0.0# 3. 运行项目python app.py# 4. 访问网站# 打开浏览器访问 http://localhost:50006.2 生产环境部署使用Gunicorn部署pipinstallgunicorn gunicorn-w4-b0.0.0.0:5000 app:app6.3 Docker部署FROM python:3.9-slim WORKDIR /app COPY requirements.txt . RUN pip install -r requirements.txt COPY . . CMD [python, app.py]七、效果展示首页测试页面结果页面八、常见问题Q1: 为什么选择Flask而不是DjangoA:Flask更轻量适合小型项目。本项目只需要几个API接口不需要Django的复杂功能。Q2: 为什么不使用数据库A:题目和人格类型数据是固定的不需要动态修改使用内存存储即可。如果需要保存用户测试记录可以后续添加数据库。Q3: 匹配算法准确吗A:本项目采用简化的匹配算法主要用于学习和娱乐。如需更精确的匹配可以使用曼哈顿距离或欧氏距离计算相似度。Q4: 可以商用吗A:本项目仅供学习交流使用原始测试设计版权归原作者所有。九、总结这是一个非常适合初学者的Flask实战项目代码简洁易懂功能完整。你可以在此基础上进行扩展添加更多有趣的功能。项目源码SBTI如果觉得有帮助欢迎Star⭐和Fork在这里插入图片描述需要注意仅供娱乐SBTI不是专业心理测评结果不具备心理学依据半随机性多次测试可能得到不同结果这很正常勿当真不要将测试结果用于诊断、面试、相亲等严肃场合作者初衷B站UP主蛆肉儿串儿最初是为了劝朋友戒酒而设计参考资料Flask官方文档https://flask.palletsprojects.com/原版SBTI测试https://sbti.unun.dev/提示本文所有代码均已在GitHub开源欢迎下载学习如有问题欢迎在评论区讨论。