四则运算练习系统技术实现详解

本文将详细介绍我们开发的四则运算练习系统的技术架构、核心功能实现和开发过程中的技术挑战与解决方案。这个系统采用前后端分离架构，为用户提供了一个交互式的数学练习平台，包含多种功能模块和精心设计的用户体验。

由于开发功能较多，我们邀请了第三位同学参与完成了错题本功能的开发
2352615肖翔匀软件架构设计，后端开发，页面开发
2352619许奕宸错题本的ui设计，错题本的功能开发
2352635李成四则运算页面设计，实现运算的功能，测试软件bug并修改

试用网站链接：https://calculator-mgkhyvko3-xiangyunxiaos-projects.vercel.app
需要FQ才可以访问，作者没有国内的域名

系统架构概述

前端技术栈

HTML5/CSS3：构建响应式用户界面
原生JavaScript：实现前端交互逻辑
LocalStorage API：本地数据持久化存储

后端技术栈

Python：核心业务逻辑实现
Flask：轻量级Web框架
Flask-CORS：处理跨域资源共享

系统架构图

+------------------+      +------------------+      +------------------+
|                  |      |                  |      |                  |
|  前端用户界面     | <--> |  Flask Web服务器  | <--> |  数学题目生成器   |
|  (HTML/JS/CSS)   |      |  (server.py)     |      |  (math_generator)|
|                  |      |                  |      |                  |
+------------------+      +------------------+      +------------------+
         ^                        ^                         ^
         |                        |                         |
         v                        v                         v
+------------------+      +------------------+      +------------------+
|                  |      |                  |      |                  |
|  用户认证系统     |      |  错题本管理系统   |      |  每日打卡系统    |
|  (auth.js)       |      |  (wrong_problems)|      |  (user.js)      |
|                  |      |                  |      |                  |
+------------------+      +------------------+      +------------------+

核心模块详解

1. 数学题目生成器

数学题目生成器(math_generator.py)是系统的核心组件，负责生成四则运算题目。

技术实现

随机数生成：使用Python的random模块生成随机数字和运算符
运算符优先级处理：实现了乘除优先于加减的运算符优先级逻辑
题目有效性验证：确保生成的题目答案为整数且在合理范围内
题库预生成：系统启动时预生成1000道题目，提高响应速度
种子控制：支持通过种子参数生成固定的题目集，用于套题功能

# 核心题目生成算法示例
def generate_problem(self):
    while True:
        nums = self.generate_numbers()
        ops = [random.choice(list(self.operators.keys())) for _ in range(2)]
        
        # 处理运算符优先级
        try:
            mul_div_index = -1
            if '*' in ops or '/' in ops:
                mul_div_index = ops.index('*') if '*' in ops else ops.index('/')
            
            if mul_div_index == 0:
                result = self.operators[ops[0]](nums[0], nums[1])
                result = self.operators[ops[1]](result, nums[2])
            elif mul_div_index == 1:
                result = self.operators[ops[1]](nums[1], nums[2])
                result = self.operators[ops[0]](nums[0], result)
            else:
                result = self.operators[ops[0]](nums[0], nums[1])
                result = self.operators[ops[1]](result, nums[2])
        except:
            continue
        
        if self.is_valid_result(result):
            problem_str = f"{nums[0]} {ops[0]} {nums[1]} {ops[1]} {nums[2]}"
            return problem_str, int(result)

2. Web服务器

系统使用Flask框架(server.py)构建轻量级Web服务器，提供RESTful API接口。

主要API端点

端点	方法	功能描述
`/generate_problems`	GET	生成指定数量的题目
`/get_random_problem`	GET	获取随机题目(用于每日打卡)
`/get_problem_sets`	GET	获取套题列表及完成状态
`/add_wrong_problem`	POST	添加错题记录
`/get_wrong_problems`	GET	获取用户错题列表
`/mark_set_completed`	POST	标记套题为已完成

3. 用户认证系统

用户认证系统(auth.js和user.js)实现了用户注册、登录和会话管理功能。

技术实现

本地存储：使用浏览器的LocalStorage API存储用户数据
会话管理：维护用户登录状态和当前会话信息
数据加密：实际应用中应加密存储密码(当前为演示版本)

// 用户登录逻辑示例
login(username, password) {
    // 检查用户是否存在
    if (!this.users[username]) {
        return { success: false, message: '用户不存在' };
    }

    // 检查密码是否正确
    if (this.users[username].password !== password) {
        return { success: false, message: '密码错误' };
    }

    // 设置当前用户
    this.currentUser = this.users[username];
    localStorage.setItem(CURRENT_USER_KEY, JSON.stringify(this.currentUser));
    return { success: true, message: '登录成功', user: this.currentUser };
}

4. 错题本系统

错题本系统(wrong_problems.js)是一个重要的学习辅助功能，帮助用户记录和复习错误的题目。

技术实现

错题存储：服务器端存储用户错题记录
状态管理：跟踪错题的练习状态(未练习、已练习、已掌握)
排序功能：支持按时间、难度等多种方式排序错题
批量操作：支持选择多道题目进行批量练习或删除

5. 每日打卡系统

每日打卡系统(user.js中的DailyCheckManager类)实现了用户每日签到和运势功能。

技术实现

日期处理：使用JavaScript的Date API处理日期和时间
连续打卡计算：计算用户连续打卡天数
随机运势生成：生成随机的运势和宜忌项目
每日挑战题：每次打卡随机生成一道挑战题

// 连续打卡天数计算逻辑
getConsecutiveDays() {
    if (!this.isLoggedIn()) {
        return 0;
    }

    const userId = this.getUserId();
    if (!this.dailyChecks[userId] || this.dailyChecks[userId].length === 0) {
        return 0;
    }

    // 获取打卡记录并排序
    const checkDates = [...this.dailyChecks[userId]].sort();
    let consecutiveDays = 1;
    let currentDate = new Date(checkDates[checkDates.length - 1]);

    // 从最近的日期开始，向前检查是否连续
    for (let i = checkDates.length - 2; i >= 0; i--) {
        const prevDate = new Date(checkDates[i]);
        const diffDays = Math.floor((currentDate - prevDate) / (1000 * 60 * 60 * 24));
        
        if (diffDays === 1) {
            consecutiveDays++;
            currentDate = prevDate;
        } else if (diffDays > 1) {
            break;
        }
    }

    return consecutiveDays;
}