从零开发MBTI人格测试系统：全栈实战记录

1.项目背景

最近在完成一个课程设计，我们选择开发一个MBTI人格测试系统。这个系统允许用户注册、登录，完成经典的MBTI性格测试，查看详细的测试结果和历史记录。这是我第一次完整地实践前后端分离开发，收获颇丰，特此记录分享。

2.项目功能

用户系统：注册、登录、密码加密存储

MBTI测试：完整的测试题库、实时计算、结果分析

数据管理：测试历史记录存储与查询

响应式界面：适配不同电脑得浏览器

3.技术栈

层级	技术	用途
后端	Java + Spring Boot	本地Web服务器框架
	MyBatis	数据库操作
	MySQL 8.0	数据存储
前端	HTML5 + CSS3	页面结构与样式
	JavaScript (ES6+)	交互逻辑
	Fetch API	前后端通信

4.项目结构

text
mbti-system/
├── backend/ # Spring Boot后端
│ ├── src/main/java/
│ │ ├── controller/ # API控制器
│ │ ├── service/ # 业务逻辑
│ │ ├── mapper/ # 数据库操作
│ │ └── entity/ # 数据模型
│ └── application.yml # 配置文件
│
├── frontend/ # 前端页面
│ ├── css/
│ ├── js/
│ ├── pages/
│ └── index.html
│
└── database/ # SQL脚本

5.核心实现步骤

(一)环境搭建

首先准备好开发环境：

工具	用途	版本要求
JDK	Java运行环境	JDK17
IntelliJ IDEA	Java开发IDE	2025.3
MySQL	数据库	8.0
Node.js	前端包管理	16+

(二)数据库的设计:创建了两张核心表格

-- 用户表
CREATE TABLE user (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) UNIQUE NOT NULL,
    password VARCHAR(64) NOT NULL, -- SHA-256加密
    email VARCHAR(100),
    created_time DATETIME DEFAULT CURRENT_TIMESTAMP
);

-- 测试记录表
CREATE TABLE test_history (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT NOT NULL,
    mbti_type CHAR(4) NOT NULL,
    test_date DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES user(id)
);

(三)后端开发

实体类（User.java）：

java
@Data
public class User {
    private Integer id;
    private String username;
    private String password; // 加密存储
    private String email;
    private Date createdTime;
}

控制器（UserController.java）：

java
@RestController
@RequestMapping("/api/user")
public class UserController {
    @PostMapping("/register")
    public String register(@RequestBody User user) {
        // 注册逻辑
    }
    
    @PostMapping("/login")
    public String login(@RequestParam String username, 
                        @RequestParam String password) {
        // 登录逻辑
    }
}

密码加密：使用SHA-256算法，确保用户密码安全存储。

(四)前端开发

登录页面（login.html）：

html
<div class="login-container">
    <h2> MBTI人格测试系统</h2>
    <form id="loginForm">
        <input type="text" id="username" placeholder="用户名">
        <input type="password" id="password" placeholder="密码">
        <button type="submit">登录</button>
    </form>
</div>

API调用（api.js）：

javascript
async function login(username, password) {
    const response = await fetch(
        `http://localhost:8080/api/user/login?username=${username}&password=${password}`,
        { method: 'POST' }
    );
    return await response.text();
}

MBTI测试算法：

javascript
function calculateMBTI(answers) {
    // 统计四个维度的得分
    const scores = { E:0, I:0, S:0, N:0, T:0, F:0, J:0, P:0 };
    
    // 根据答案计算
    answers.forEach(answer => {
        scores[answer.dimension] += answer.value;
    });
    
    // 确定类型
    const type = 
        (scores.E >= scores.I ? 'E' : 'I') +
        (scores.S >= scores.N ? 'S' : 'N') +
        (scores.T >= scores.F ? 'T' : 'F') +
        (scores.J >= scores.P ? 'J' : 'P');
    
    return type;
}

5.界面展示

注册登录页面

用户注册页面

用户登录页面

测试页面

结果页面

6.技术亮点

技术亮点	说明
完整的用户系统	注册、登录、密码加密、状态保持
数据持久化	测试记录永久保存，可追溯历史
响应式设计	适配各种设备屏幕
RESTful API	标准化的接口设计

7.总结

(一)问题跟解决方法:常见问题与解决方案

问题场景	具体问题描述	解决方案
数据安全	用户密码明文存储存在泄露风险	使用SHA-256哈希算法加密密码，数据库仅存储加密后的哈希值
用户状态管理	登录后页面刷新/跳转时，用户身份状态丢失	用localStorage存储用户ID，每次请求自动附带该信息以验证身份
数据关联	测试记录需与用户绑定，但多表关联易出现数据不一致	数据库中设置外键（test_history.user_id关联user.id），保证数据关联性
前端体验	测试题目过多导致首屏加载慢	采用懒加载策略，分批加载题目，优先渲染首屏内容
多设备适配	不同尺寸屏幕下界面布局错乱	使用响应式设计，通过CSS媒体查询适配不同设备的屏幕尺寸
接口规范性	前后端接口格式不统一，协作效率低	采用 API规范设计接口，统一请求方式、参数格式与响应格式

(二)收获

本次 MBTI 测试系统项目是由两人共同协作完成，通过明确的分工：由后端同学承担数据库设计、API 开发与服务器部署工作，然后前端同学专注于界面设计、交互逻辑搭建和用户体验优化。
项目实践让我们收获颇丰，不仅熟练掌握了前后端分离的开发模式，还深入理解了 Web 应用从需求分析、技术选型、编码实现到最终部署的完整开发周期，系统提升了问题排查与解决能力。更重要的是，让我们培养了系统设计思维，积累了团队协作与项目管理的实战经验，这些能力的提升远超技术栈本身的学习价值。尽管项目规模不大，但完整的开发流程为我们后续的软件开发工作奠定了坚实基础。

(三)结语

这个MBTI测试系统虽然不算复杂，但涵盖了Web开发的完整流程。从需求分析、技术选型、编码实现到最终部署，每一步都让我们对软件开发有了更深的理解。

最大的收获不是代码本身，而是解决问题的能力和完整的项目经验。