第一次作业前后端分离计算器系统课程信息说明项目内容832402108解皓喆Assignment Requirements前后端分离计算器系统Objectives of This Assignment理解前后端职责划分、HTTP API、表达式解析和数据库持久化Deadline2026 年 10 月 7 日 23:59目录课程信息说明Git 仓库和代码规范链接PSP 表成品展示设计与实现过程代码说明部署和测试个人总结Git 仓库和代码规范链接Frontend Repository: GitHub - jasonxie2026-fzu/832402108_calculator_frontend · GitHubBackend Repository: jasonxie2026-fzu/calculator_backendFrontend Code Standard: 832402108_calculator_frontend/codestyle.md at main · jasonxie2026-fzu/832402108_calculator_frontend · GitHubBackend Code Standard: jasonxie2026-fzu/calculator_backendFrontend Deployment Address: CalculatorBackend Deployment Address: https://calculator-backend-1-ua8m.onrender.comPSP 表阶段预计时间分钟实际时间分钟需求分析3020系统设计4050前端开发90120后端开发12060表达式计算模块9060数据库设计3090前后端联调6025测试6015部署60120博客写作90100上表记录了各阶段的实际耗时用于对比计划与实际的差异。成品展示1. 基础计算前端部署地址为Calculator页面采用两栏布局左侧为计算器右侧为历史记录。计算结果由后端 API 返回前端负责显示。图 1部署后的初始计算器页面图 21 2返回3图 31 2 * 3返回7图 4-5 8返回3图 50.5 1.25返回1.752. 复合表达式测试1 2 * 3时后端返回7说明乘法优先于加法。测试(1 2) * 3时后端返回9说明括号优先级生效。3. 错误处理输入2 / 0后页面显示Division by zero说明后端识别了除零错误并返回错误信息。非法表达式也由后端校验前端不会自行计算或伪造结果。4. 历史记录成功计算后历史列表显示表达式、结果、时间和删除按钮。刷新页面后历史记录仍从后端数据库读取。历史记录功能展示如下图 6历史记录列表图 7刷新后的历史记录图 8删除指定记录后的历史列表删除记录的操作可以使用下面两张截图进行前后对比图 9历史记录列表中仍然包含待删除的计算记录点击该记录右侧的“删除”按钮。图 10删除请求完成后页面重新读取后端历史列表目标记录不再显示。5. 取余运算项目还支持%取余运算。例如输入10 % 3后后端返回结果1并将本次计算保存到历史记录中。图 11输入10%3后返回结果1说明后端正确处理了取余运算。如果只输入%符号而不输入操作数后端会返回错误提示前端将错误信息显示在计算器下方。设计与实现过程需求分析本次作业要求实现一个前后端分离的计算器。前端负责用户输入、按钮操作、结果展示和历史展示后端负责输入校验、表达式解析、计算、异常处理以及数据库操作。系统架构浏览器前端 ├── 输入表达式 ├── 发送 HTTP JSON 请求 └── 展示后端返回结果和历史 │ ▼ Node.js 后端 ├── POST /api/calculate ├── GET /api/history ├── DELETE /api/history/:id ├── 表达式解析器 └── SQLite 数据库前端和后端通过 JSON API 通信。前端不计算最终结果只把表达式发送给后端。数据库设计数据库使用 SQLite表名为calculation_history字段类型说明idINTEGER主键expressionTEXT用户提交的表达式resultREAL后端计算结果created_atTEXT计算时间每次计算成功后后端插入一条记录页面刷新时重新请求数据库中的历史删除操作通过后端 DELETE 接口完成。代码说明前端请求前端调用fetch(${API_BASE}/api/calculate, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ expression }) });前端只发送表达式结果使用后端返回的result字段。后端计算后端使用递归下降解析器把表达式拆分为数字、运算符和括号再按照表达式、项、一元运算和基本值的层级解析。这样可以正确处理运算符优先级、括号、小数以及一元正负号。项目没有使用eval、exec或其他任意代码执行方式处理用户输入。错误处理非法表达式、括号不匹配和除零会返回 HTTP 400 和错误消息前端将消息显示在计算器下方。部署和测试后端公开 API 地址为https://calculator-backend-1-ua8m.onrender.com前端部署地址为https://eight32402108-calculator-frontend3.onrender.com前端在app.js中通过API_BASE连接后端const API_BASE https://calculator-backend-1-ua8m.onrender.com;部署后测试打开前端公开地址确认页面显示API ready。测试1 2 * 3和(1 2) * 3。测试非法表达式和除零。刷新页面确认历史仍然存在。删除一条历史确认页面更新。直接访问/api/history确认后端接口可用。后端历史接口地址https://calculator-backend-1-ua8m.onrender.com/api/history个人总结这次作业让我更清楚地理解了前端和后端的职责划分。开始时我把注意力放在计算器界面后来发现真正的难点是让前端只负责交互把表达式校验和计算放到后端并且把历史记录持久化到数据库。实现过程中表达式解析需要处理运算符优先级、括号和一元负号不能直接把用户输入当成程序执行。前后端联调时还需要检查请求格式、错误状态和跨域配置。后续可以继续增加历史搜索、统计信息或科学计算功能。