基于Mysql、JavaScript、PHP、ajax开发的MBTI性格测试网站（前端+后端）

最新推荐文章于 2025-04-15 12:20:43 发布
最新推荐文章于 2025-04-15 12:20:43 发布
阅读量2.5k 收藏 28
点赞数 22
文章标签： 前端 javascript php 后端 MBTI ajax mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2302_79553009/article/details/143350998
版权

源码地址：https://download.youkuaiyun.com/download/2302_79553009/89933699

项目简介

         本项目旨在构建一个基于MBTI（迈尔斯-布里格斯性格分类指标）理论的在线平台——“16Personalities”。该平台利用PHP、MySQL、JavaScript等技术栈开发，旨在帮助用户更好地理解和运用MBTI理论来评估个人性格类型，并应用于职业规划、团队建设和人际交往等多个方面。

用户端功能 包括账号注册与登录、在线性格测试、性格类型浏览、团队评估及在线交友等模块。用户可以通过完成性格测试来获得详细的MBTI性格分析，并通过平台提供的功能与其他具有不同性格类型的用户互动。

管理端功能 则包括了数据可视化、用户管理、测试题目管理和性格类型信息维护等功能。管理员可以通过数据可视化大屏监控网站运营状况，包括但不限于用户数量、性格类型分布等信息，并能对用户数据和测试题目进行维护。

技术实现 上，项目采用了header-body-footer三层架构，并通过Ajax技术实现了局部页面刷新，提升了用户体验。同时，为了保证数据的安全性和管理的便利性，项目还设计了专门的数据库结构，并引入了多种第三方库以增强平台的功能性和美观性。

项目效果预览

 

 

项目功能

        用户端

用户端实现功能：

1、用户进行账号注册登录。

2、用户点击性格测试可进行答题判定16人格属性。完成答题后展示相应

性格结果以及MBTI四维度属性可视化。

3、用户点击性格类型可自主查看16人格详细性格描述以及相关网络昵称。

4、用户点击团队评估，可自行完成3、4、5人团队组建。网站会更具团队

人数以及团队成员的MBTI性格给出评估结果。针对四个维度进行相应分析，并给出针对于该团队的建议。

5、用户点击交友论坛可进入线上聊天模块，用户将以注册账号与已完成测

试的MBTI性格对应头像示人，与其他用户进行线上交流。

        管理端

管理端实现功能：

1、进行用户管理员权限判定，进入后台界面。

2、管理员可以打开数据可视化大屏查看包括当前用户人数、网站最稀有人格、用户男女比例、用户活跃时间等数据。

3、管理员点击用户管理进入用户管理界面，可对当前网站所有已注册用户进行删除、修改和查询操作。

4、管理员点击MBTI题目管理，可对当前网站数据库已经存储的题目进行增加、删除、修改的操作，完成对题目集的管理。

5、管理员点击MBTI数据管理，可以进行当前网站16人格的详细描述信息预览，并进行实时更新信息。完成对16人人格的信息数据管理。

        数据库设计

开发准备

        工具引入

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="layui/layui.js"></script>
    <script src="echarts.js/echarts.min.js"></script>
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">

 

项目开发

        用户端开发

                用户注册

用户完成信息输入，网站将插入该用户信息进入数据库进行保存完成注册。用户注册页面如下。

 

代码：

<?
    $username=$_POST['username1'];
    $password=trim($_POST['password1']);
    $sex=$_POST['sex'];
    $age=$_POST['age'];
    $email=$_POST['email'];
    

//连接数据库

require "conn.php";


//判断是否输入名字
if( ! strlen($username) || ! strlen($password)){
    echo "<script>alert('用户名和密码都必须填写!');history.back();</script>";
    exit();
}


//判断用户名是否被占用
$sql="select * from user where account='$username'";
$result=mysqli_query($conn,$sql);
$num=mysqli_num_rows($result);
if($num){
    echo "<script>alert('该账号已存在，请更换账号!');history.back();</script>";
    exit();
}
if(!empty($email)){
    if(!preg_match('/^[a-zA-Z0-9_\-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/',$email)){
      echo "<script>alert('邮箱格式不正确!');history.back();</script>";
      exit();

}
}

$sql1="insert into user(account,passwd,sex,email,age)  values('$username','$password','$sex','$email','$age')";
$result1=mysqli_query($conn,$sql1);

if($result1){
    echo "<script>alert('注册成功!');history.back();</script>";
}else{
    echo "<script>alert('注册失败!');history.back();</script>";
}

?>

                用户登录

用户登录完成账号密码输入，经过网站验证。成功后进入网站用户端首页。

用户登录页面如图

代码：

<?
    session_start();
    $username=trim($_POST['username']);
    $password=trim($_POST['password']);
    
if( ! strlen($username) || ! strlen($password)){
    echo "<script>alert('账号和密码都必须填写!');history.back();</script>";
    exit();
}
else{
    if(!preg_match('/^[a-zA-Z0-9_*]{6,10}$/',$password)){
    echo "<script>alert('密码必须填写，且只能为大小写字母和数字，以及*，_构成，长度为6-10个字符!');history.back();</script>";
    exit();
}
    
}

require "conn.php";

$sql="select * from user where account='$username' and passwd='$password'";
$result=mysqli_query($conn,$sql);
$r = mysqli_fetch_assoc($result);
$num = mysqli_num_rows($result);

if($num){
    $_SESSION['userid']=$r['id'];
    $id = $_SESSION['userid'];
        if($r['admin']==1){
            echo "<script>alert('欢迎管理员登录!');location.href='management.php';</script>";
        }else{
            echo "<script>alert('登录成功!');location.href='mbti_test.php';</script>";
        }
           
}
else{
    echo "<script>alert('登录失败!');history.back();</script>";
}

?>

                MBTI性格测试

 性格测试页面效果图如图

点击导航栏性格测试，将可以在本页面进行MBTI题目测试。每道题网站将根据同意与反对的程度来进行MBTI四种维度的判别。题目展示主要依靠表单input的radio属性来进行展示。一页展示五道题目，点击下一个按钮将展示第二部分题目。一共四部分测试题，分别对应MBTI四种维度属性，分别判断四个字母，形成最后的MBTI测试结果。并将测试结果添加至当前用户信息中。题目切换如图

关键代码：

 <div class="main" id="main">
          
        <div style="background-color: #33A474;height: 400px;">
            <div style="text-align: center;height: 200px;">   
            <h1 style="font-size: 60px;color: white;padding-top: 100px;">MBTI性格测试</h1>
            <p style="color: white;font-size: 20px;margin-top: 20px;">完成下方题目获取您的性格类型</p>
            </div>
            <div style="display: flex;">
                <div style="margin: auto; display: flex;margin-top: 150px;">
              <div class="card" style="width: 300px;height: 300px;background: rgba(255,255,255,0.7)" >
                  <div style="text-align: center;width: 300px;height: 200px;">
                <img src="images/icon1.png" class="card-img-top"  style="width: 50%;height: 50%;margin-top: 20px;">
                  </div>
                <div class="card-body">
                  <b><p class="card-text" style="font-size: 20px;text-align: center;">借助我们的精选材料，塑造你想要的自我。</p></b>
                </div>
              </div>
              <div class="card" style="width: 300px;height: 300px;margin-left: 50px;background: rgba(255,255,255,0.7)">
                  <div style="text-align: center;width: 300px;height: 200px;">
                <img src="images/icon2.png" class="card-img-top"  style="width: 40%;height: 70%;margin-top: 20px;" >
                       </div>
                <div class="card-body">
                 <b> <p class="card-text" style="font-size: 20px;text-align: center;">做你自己，诚实回答，找出你的性格类型。</p></b>
                </div>
                
              </div>
              <div class="card" style="width: 300px;height: 300px;margin-left: 50px;background: rgba(255,255,255,0.7)">
                  <div style="text-align: center;width: 300px;height: 200px;">
                <img src="images/icon3.png" class="card-img-top"  style="width: 50%;height: 50%;margin-top: 20px;" >
                       </div>
                <div class="card-body">
                 <b> <p class="card-text" style="font-size: 20px;text-align: center;">了解你的性格类型在你生活的各个领域中产生影响。</p></b>
                </div>
              </div>
                </div>
            </div>
            
        </div>
        <div>
            <img style="width: 100%" src="images/border2.png">
        </div>  
          
          
<!--          测试题目-->
        <div style="margin-top: 150px;">
            
            
          <form class="questionForm" action="" method="post" id="myForm" >
              
              <?
                require "conn.php";
                $sqlei = "select id,content from question where type ='EI' limit 5";
                $sqlsn = "select id,content from question where type ='SN' limit 5";
                $sqltf = "select id,content from question where type ='TF' limit 5";
                $sqljp = "select id,content from question where type ='JP' limit 5";
                $resultei =mysqli_query($conn,$sqlei);
                $resultsn =mysqli_query($conn,$sqlsn);
                $resulttf =mysqli_query($conn,$sqltf);
                $resultjp =mysqli_query($conn,$sqljp);
              ?>
      
              
            <div class="page" id="page1"> 
                <?
                    while($rowei = mysqli_fetch_array($resultei)){
                        list($idei,$contentei) = $rowei;
                ?>
                <legend style="margin-top: 20PX;"><?echo $contentei?></legend>
                <fieldset style="margin-top: 40PX;margin-bottom: 50px;">
                <h1 style="margin-top: 10px;margin-right: 20px; ">同意</h1>    
                <label>
                    <input class="R-3" type="radio" name="<?echo $idei?>" value="-3" required>
                </label>
                <label>
                    <input class="R-2" type="radio" name="<?echo $idei?>" value="-2">
                </label>
                <label>
                    <input class="R-1" type="radio" name="<?echo $idei?>" value="-1">
                </label>
                <label>
                    <input class="R0" type="radio" name="<?echo $idei?>" value="0">
                </label>
                <label>
                    <input class="R1" type="radio" name="<?echo $idei?>" value="1">
                </label>
                <label>
                    <input class="R2" type="radio" name="<?echo $idei?>" value="2">
                </label>
                <label>
                    <input class="R3" type="radio" name="<?echo $idei?>" value="3">
                </label>
                <h1 style="margin-top: 10px;">反对</h1>
                </fieldset>
                <hr>
                <?}?>
                <button type="button" onClick="nextPage(2)" id="scrollToTopButton">下一个</button>
            </div>  
<script>
    
        function isElementVisible(element) {
    return element.style.display !== 'none' && window.getComputedStyle(element).visibility !== 'hidden';
        }

        function getNextPage(currentPage, pageId) {
            // 隐藏当前页面
            if (currentPage) {
                currentPage.style.display = 'none';
            }

            // 显示目标页面
            const targetPage = document.getElementById(`page${pageId}`);
            if (targetPage) {
                targetPage.style.display = 'block';
            }
        }

        function nextPage(pageId) {
            const currentPage = Array.from(document.querySelectorAll('.page')).find(isElementVisible);
            getNextPage(currentPage, pageId);
        }

        function prevPage(pageId) {
            const currentPage = Array.from(document.querySelectorAll('.page')).find(isElementVisible);
            getNextPage(currentPage, pageId);
        }
        
        
        
//        切换题目后页面回到顶端
        document.getElementById('scrollToTopButton').addEventListener('click', function() {
    // 使用平滑滚动回到顶部
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});
                document.getElementById('scrollToTopButton1').addEventListener('click', function() {
    // 使用平滑滚动回到顶部
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});
                document.getElementById('scrollToTopButton2').addEventListener('click', function() {
    // 使用平滑滚动回到顶部
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});
                document.getElementById('scrollToTopButton3').addEventListener('click', function() {
    // 使用平滑滚动回到顶部
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});
                        document.getElementById('scrollToTopButton4').addEventListener('click', function() {
    // 使用平滑滚动回到顶部
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});
                        document.getElementById('scrollToTopButton5').addEventListener('click', function() {
    // 使用平滑滚动回到顶部
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});
        
        
          $('#myForm').on('submit', function(event) {
           
        event.preventDefault(); 
        var formData = $(this).serialize(); // 序列化表单数据
        $.ajax({
            url: 'test_result.php', // 处理表单数据的PHP文件路径
            type: 'POST', // 提交方式
            data: formData, // 要发送的数据
            success: function(response) {
                $('#main').html(response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('Error: ' + textStatus + ' ' + errorThrown);
            }
        });
            
    });


    $(document).ready(function() {  
            $('#loadtest').click(function() {  
                $.ajax({  
                    url: 'mbti_test.php',  
                    type: 'GET',  
                    success: function(data) {  
                        $('#all').html(data);   
                    },  
                    error: function() {  
                        alert('加载内容失败！');  
                    }  
                });  
            }); 
            
             $('#loadkinds').click(function() {  
                $.ajax({  
                    url: 'allkinds.php',  
                    type: 'GET',  
                    success: function(data) {  
                        $('#main').html(data);   
                    },  
                    error: function() {  
                        alert('加载内容失败！');  
                    }  
                });  
            });  

            $('#loadteams').click(function() {  
                $.ajax({  
                    url: 'teams.php',  
                    type: 'GET',  
                    success: function(data) {  
                        $('#main').html(data);   
                    },  
                    error: function() {  
                        alert('加载内容失败！');  
                    }  
                });  
            });  

            $('#loadcomment').click(function() {  
                $.ajax({  
                    url: 'comment.php',  
                    type: 'GET',  
                    success: function(data) {  
                        $('#main').html(data);   
                    },  
                    error: function() {  
                        alert('加载内容失败！');  
                    }  
                });
最低0.47元/天 解锁文章
mbti:mbti测试代码
03-27
mbti:mbti测试代码
微信小程序MBTI性格测试demo源码下载 .zip
12-26
MBTI性格测试demo源码
MBTI十六型人格职业性格测试源码完整版
专注于与编程相关的知识内容分享
03-12 437
运营级MBTI人格测试源码，十六型人格职业性格测试，自适应前端，代码完整无加密。环境：centos7.9宝塔+php7.4+mysql+nginx1.201.安装宝塔面板，创建网站，上传压缩包，解压2.网站运行目录设置为publicif (!s=$1 last;break;4.创建数据库，并将数据库sql文件导入// 数据库名// 用户名// 密码6.后台地址：网址/admin.php/index/login后台账号：admin后台密码：123456。
MBTI十六型人格职业性格测试源码完整版 亲测源码
最新发布
m0_73348158的博客
04-15 401
MBTI十六型人格职业性格测试源码完整版 亲测源码亲测完整可用，PC+H5自适应前端，代码完整无加密。测试环境：Nginx+PHP7.4+MySQL5.6测试环境：Nginx + PHP7.4 + MySQL5.61.安装宝塔面板，创建网站，上传压缩包，解压2.网站运行目录设置为public3.设置伪静态为thinkphp（宝塔中选择thinkphp伪静态即可）：if (!s=$1 last;break;4.创建数据库，将数据库文件.sql 导入。
MBTI 性格测试小程序实战
但行好事，莫问前程
08-11 2832
如何使用Taro跨端小程序框架从0到1快速开发小程序
mbti人格类型测试助手微信小程序源码.rar
06-23
mbti人格类型测试助手微信小程序源码.rar
MBTI十六型人格职业性格测试源码完整版.zip
03-11
环境：centos7.9宝塔+php7.4+mysql+nginx1.20 1.安装宝塔面板，创建网站，上传压缩包，解压 2.网站运行目录设置为public 3.设置伪静态为thinkphp（宝塔中选择thinkphp伪静态即可）： location / { if (!-e $request_filename){ rewrite ^(.*)$ /index.php?s=$1 last; break; } } 4.创建数据库，并将数据库sql文件导入 5.进入文件/application/database.php，修改数据库信息：
在线问卷调查系统，性格分析系统在线问卷调查系统，性格分析系统
12-03
总的来说，在线问卷调查系统结合性格分析，是一个综合性的IT项目，涵盖了Web开发的全栈技术，包括Java后端开发、前端交互、数据库管理和数据分析。这样的系统不仅在学术研究中有所应用，也能服务于商业市场，例如...
mbti人格类型测试助手微信小程序源码
05-26
这是一款云开发mbti人格类型测试助手微信小程序源码，这里先为大家简单介绍一下什么是mbti： MBTI是由美国作家伊莎贝尔·布里格斯·迈尔斯和她的母亲凯瑟琳·库克·布里格斯共同制定的一种人格类型理论模型， 以此来从多方面测试你的人格类型和性格等，该小小城不仅包含了mbti测试，还包含了多个板块和类目， 如：心理测试、治愈计划、聊天小猫、心情日记，并且可以真对某一个人格或性格的人进行建议， 让你可以帮助缓解用户的心理压力，治愈自己的情绪。
mbti：Myers-Briggs类型指示器测试（MBTI职业性格测试）
02-05
mbti测试 一个进行Myers-Briggs类型指示器测试的网站。 MBTI职业性格测试 __ __ ____ _____ ___ _____ _____ ____ _____ | \/ | __ )_ _|_ _| |_ _| ____/ ___|_ _| | |\/| | _ \ | | | |_____| | | _| \___ \ | | | | | | |_) || | | |_____| | | |___ ___) || | |_| |_|____/ |_| |___| |_| |_____|____/ |_| 随着时间的推移观星
MBTI测试
02-13
MBTI测试
MBTI
03-25
MBTI
mbti-express：MBTI个性测试和资源（Nodejs-Express-Jade）
02-17
快递 MBTI个性测试和资源（Nodejs-Express-Jade）
MBTI人格类型测试助手微信小程序源码
gitblog_09704的博客
09-06 633
MBTI人格类型测试助手微信小程序源码 17193.zip项目地址:https://gitcode.com/open-source-toolkit/13ba5 项目简介 本项目提供了一款基于云开发的MBTI人格类型测试助手微信小程序源码。通过该小程序，用户可以进行MBTI人格类型测试，了解自己的性格特点和人格类型。此外，小程序还包含了多个功能板块，如心理测试、治愈计划、聊天小猫、心情日记等，旨在...
【2025最新】基于微信小程序的机票订票系统
计算机毕设代写，专业从事计算机编程5年经验，个人开发者，全程护航包通过。
01-29 1178
【2025最新】基于微信小程序的机票订票系统
云开发mbti人格类型测试助手微信小程序源码
向上力
10-10 2194
云开发mbti人格类型测试助手微信小程序源码，这是一款云开发mbti人格类型测试助手微信小程序源码。这里先为大家简单介绍一下什么是mbti：MBTI是由美国作家伊莎贝尔·布里格斯·迈尔斯和她的母亲凯瑟琳·库克·布里格斯共同制定的一种人格类型理论模型，以此来从多方面测试你的人格类型和性格等。该小小城不仅包含了mbti测试，还包含了多个板块和类目，如：心理测试、治愈计划、聊天小猫、心情日记，并且可以真对某一个人格或性格的人进行建议，让你可以帮助缓解用户的心理压力，治愈自己的情绪。
java项目：基于springboot实现的MBTI性格测试系统(分前后端)
weixin_43860634的博客
03-25 1981
java项目：基于springboot实现的MBTI性格测试系统(分前后端)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值