一、项目简介使用 Spring Boot、Spring Data JPA、H2 数据库结合原生 HTMLJavaScript 实现简易在线计算器。实现前后端交互前端负责接收用户输入算式通过异步请求提交后端后端完成表达式运算处理各类运算异常将计算记录保存至 H2 数据库支持查看全部历史记录、删除单条历史记录。技术栈后端SpringBootSpring Data JPAH2 数据库exp4j 表达式解析工具前端原生 HTML JavaScript异步 AJAX 请求页面无刷新二、功能说明表达式计算支持加减乘除、括号、小数的数学表达式运算。异常处理除零处理当输入1/0这类除零算式后端识别无穷结果前端展示错误提示。历史持久化合法计算完成后自动保存表达式、运算结果、运算时间存入 H2 数据库。查询历史记录页面加载自动拉取全部历史运算记录展示。删除记录对单条历史记录执行删除操作。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 // 前端交互页面四、接口说明请求方式接口地址功能POST/api/calc/compute提交算式执行计算保存运算记录GET/api/calc/history查询全部历史计算记录DELETE/api/calc/history/{id}根据 id 删除一条历史记录五、项目运行步骤IDEA 导入项目使用 JDK17等待 Maven 加载全部依赖。运行启动类CalculatorBackendApplication。浏览器访问http://localhost:8080/index.html使用计算器。H2 数据库控制台访问地址http://localhost:8080/h2consoleJDBC URLjdbc:h2:file:./data/calc_db;DB_CLOSE_ON_EXITFALSE 用户名sa密码六、测试演示截图 1IDEA 项目目录结构截图截图 2正常运算测试输入(12)*5页面输出结果历史列表新增记录截图 3除零测试输入1/0页面红色提示运算错误除数不能为截图 4H2 控制台执行 SQLSELECT * FROM calc_history;展示数据库中存储的计算记录测试过程正常运算输入(12)*5得到结果 15数据存入数据库页面历史列表刷新。除零运算输入1/0捕获除零错误前端展示错误不会保存错误记录。删除功能点击历史记录后的删除按钮对应记录从页面和数据库移除。
一、项目简介使用 Spring Boot、Spring Data JPA、H2 数据库结合原生 HTMLJavaScript 实现简易在线计算器。实现前后端交互前端负责接收用户输入算式通过异步请求提交后端后端完成表达式运算处理各类运算异常将计算记录保存至 H2 数据库支持查看全部历史记录、删除单条历史记录。技术栈后端SpringBootSpring Data JPAH2 数据库exp4j 表达式解析工具前端原生 HTML JavaScript异步 AJAX 请求页面无刷新二、功能说明表达式计算支持加减乘除、括号、小数的数学表达式运算。异常处理除零处理当输入1/0这类除零算式后端识别无穷结果前端展示错误提示。历史持久化合法计算完成后自动保存表达式、运算结果、运算时间存入 H2 数据库。查询历史记录页面加载自动拉取全部历史运算记录展示。删除记录对单条历史记录执行删除操作。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 // 前端交互页面四、接口说明请求方式接口地址功能POST/api/calc/compute提交算式执行计算保存运算记录GET/api/calc/history查询全部历史计算记录DELETE/api/calc/history/{id}根据 id 删除一条历史记录五、项目运行步骤IDEA 导入项目使用 JDK17等待 Maven 加载全部依赖。运行启动类CalculatorBackendApplication。浏览器访问http://localhost:8080/index.html使用计算器。H2 数据库控制台访问地址http://localhost:8080/h2consoleJDBC URLjdbc:h2:file:./data/calc_db;DB_CLOSE_ON_EXITFALSE 用户名sa密码六、测试演示截图 1IDEA 项目目录结构截图截图 2正常运算测试输入(12)*5页面输出结果历史列表新增记录截图 3除零测试输入1/0页面红色提示运算错误除数不能为截图 4H2 控制台执行 SQLSELECT * FROM calc_history;展示数据库中存储的计算记录测试过程正常运算输入(12)*5得到结果 15数据存入数据库页面历史列表刷新。除零运算输入1/0捕获除零错误前端展示错误不会保存错误记录。删除功能点击历史记录后的删除按钮对应记录从页面和数据库移除。
