一、项目简介

使用 Spring Boot、Spring Data JPA、H2 数据库，结合原生 HTML+JavaScript 实现简易在线计算器。实现前后端交互，前端负责接收用户输入算式，通过异步请求提交后端；后端完成表达式运算，处理各类运算异常，将计算记录保存至 H2 数据库；支持查看全部历史记录、删除单条历史记录。

技术栈

• 后端：SpringBoot，Spring Data JPA，H2 数据库，exp4j 表达式解析工具
• 前端：原生 HTML + JavaScript，异步 AJAX 请求，页面无刷新

二、功能说明

1. 表达式计算：支持加减乘除、括号、小数的数学表达式运算。
2. 异常处理

除零处理：当输入1/0这类除零算式，后端识别无穷结果，前端展示错误提示。

1. 历史持久化：合法计算完成后，自动保存表达式、运算结果、运算时间存入 H2 数据库。
2. 查询历史记录：页面加载自动拉取全部历史运算记录展示。
3. 删除记录：对单条历史记录执行删除操作。
4. H2 控制台：可视化查看数据库内部存储的数据。

三、项目结构

src

└── main

├── java/com/student/calculator

│ ├── CalculationHistory.java // 数据库实体类

│ ├── CalculationHistoryRepository.java // JPA数据访问接口

│ ├── CalculatorController.java // Controller接口层

│ └── CalculatorBackendApplication.java // SpringBoot启动类

└── resources

├── application.yml // H2、JPA、服务端口配置

└── static

└── index.html // 前端交互页面

四、接口说明

五、项目运行步骤

1. IDEA 导入项目，使用 JDK17，等待 Maven 加载全部依赖。
2. 运行启动类CalculatorBackendApplication。
3. 浏览器访问：http://localhost:8080/index.html，使用计算器。
4. H2 数据库控制台访问地址：http://localhost:8080/h2console

JDBC URL：jdbc:h2:file:./data/calc_db;DB_CLOSE_ON_EXIT=FALSE 用户名：sa，密码

六、测试演示

截图 1：IDEA 项目目录结构截图

截图 2：正常运算测试，输入(1+2)*5，页面输出结果，历史列表新增记录

截图 3：除零测试，输入1/0，页面红色提示：运算错误：除数不能为

截图 4：H2 控制台执行 SQL：SELECT * FROM calc_history;，展示数据库中存储的计算记录

测试过程：

正常运算：输入(1+2)*5，得到结果 15，数据存入数据库，页面历史列表刷新。

除零运算：输入1/0，捕获除零错误，前端展示错误，不会保存错误记录。

删除功能：点击历史记录后的删除按钮，对应记录从页面和数据库移除。