第一次作业清算——前后端分离计算器项目内容本作业所属课程2601_FZU-MU_SE作业要求第一次作业——前后端分离计算器系统作业目标掌握 HTTP API 交互、安全表达式解析、数据库持久化及前后端职责划分姓名孙梓焜福大学号832401315梅努斯学号24125261其他参考资料Python PEP 8、Google JavaScript Style Guide、Python Decimal 和 SQLite 文档Git 仓库与代码规范链接前端仓库frontend。后端仓库backend。前端代码规范codestyle.md。后端代码规范codestyle.md。公开访问地址清算计算器。目录第一次作业清算——前后端分离计算器Git 仓库与代码规范链接PSP 表成品展示1. 主界面2. 加法3. 减法4. 乘法5. 除法6. 小数7. 优先级8. 括号9. 一元负号10. 无效表达式11. 除零12. 刷新持久化13. 指定删除14. 搜索15. 主题16. 后端停止运行截图设计与实现过程需求与技术选择功能结构与架构API 设计数据库设计关键代码说明表达式解析前端请求历史插入与删除测试与部署个人经历与收获本次公网部署说明PSP 表作业要求在开发前估算、开发后记录实际用时。本次未提供个人计时记录因此如实标注未记录AI 辅助生成与验证不等同于个人开发用时。下表不满足完整 PSP 记录要求后续实际投入应另行记录。工作阶段预计用时分钟实际用时分钟需求分析未记录未记录系统设计未记录未记录前端开发未记录未记录后端 API 开发未记录未记录表达式解析模块未记录未记录数据库设计与历史模块未记录未记录前后端联调未记录未记录测试与修复未记录未记录部署未记录未记录博客编写未记录未记录合计未记录未记录成品展示以下图片来自本地项目真实运行。图片对应 Python 本地版的真实运行公开版沿用相同界面与 HTTP 接口。1. 主界面左侧输入和计算右侧展示历史按钮与键盘均可输入。2. 加法输入128后端返回 20并保存计算记录。3. 减法8-3的计算结果为 5。4. 乘法5*8的计算结果为 40也支持输入乘号 ×。5. 除法10/2的计算结果为 5也支持输入除号 ÷。6. 小数使用 Decimal 计算0.10.2得到 0.3。7. 优先级12*3先乘后加得到 7。8. 括号(12)*3先计算括号得到 9。9. 一元负号3*-2识别负数得到 -6一元正号也受支持。10. 无效表达式1缺少操作数后端返回错误页面展示错误信息而不产生新记录。11. 除零1/0返回“除数不能为零”不会入库。12. 刷新持久化刷新页面后输入和结果清空数据库历史仍然显示。13. 指定删除删除128的演示记录后重新查询数据库其他记录保留。14. 搜索输入0.1搜索后端返回匹配记录。另有每页 10 条的分页功能。15. 主题主题按钮可切换浅色和深色。主题当前不跨刷新保存。16. 后端停止停止后端并输入99后页面仍可输入但无法独立获得结果显示连接失败。运行截图以下真实运行截图展示表达式输入、后端计算结果、错误提示、数据库历史和主题切换。上方列出各功能的输入与预期行为。截图 1计算器功能与历史记录的运行展示。截图 2计算器功能与历史记录的运行展示。截图 3计算器功能与历史记录的运行展示。截图 4计算器功能与历史记录的运行展示。截图 5计算器功能与历史记录的运行展示。截图 6计算器功能与历史记录的运行展示。截图 7计算器功能与历史记录的运行展示。截图 8计算器功能与历史记录的运行展示。截图 9计算器功能与历史记录的运行展示。截图 10计算器功能与历史记录的运行展示。截图 11计算器功能与历史记录的运行展示。截图 12计算器功能与历史记录的运行展示。截图 13计算器功能与历史记录的运行展示。截图 14计算器功能与历史记录的运行展示。截图 15计算器功能与历史记录的运行展示。截图 16计算器功能与历史记录的运行展示。设计与实现过程需求与技术选择项目必须支持四则运算、复合表达式、持久化历史和按 ID 删除。采用原生 HTML/CSS/JavaScript 前端先实现 Python 标准库 HTTP 后端和 SQLite 数据库方便本地运行。公开版为了适配托管环境使用独立的服务端 TypeScript HTTP API、BigInt 有理数解析器和 D1 SQLite 数据库。前端计算始终通过 HTTP 请求后端两个 GitHub 仓库分别保存前端与后端源码后端 deployment/source.zip 包含完整公开部署源码。功能结构与架构清算计算器前端交互后端计算服务历史管理按钮与键盘输入结果与错误展示主题与表达式复用输入校验递归下降解析Decimal 运算SQLite 持久化搜索与分页按 ID 删除SQLitePython API浏览器前端SQLitePython API浏览器前端POST /api/calculateexpression校验、解析、计算参数化 INSERT记录 IDJSON 结果与时间GET /api/historySELECT历史记录JSON 列表前端没有数学求值函数。发送的请求只包含 expression结果由后端产生并写入数据库。接口失败时前端清空结果区并展示错误避免把上一条结果当成当前结果。API 设计方法路径请求响应POST/api/calculateexpression 字符串201结果、ID、时间GET/api/historypage、q200items、total、page、page_sizeDELETE/api/history/{id}记录 ID200成功404不存在GET/api/health无200服务存活错误统一包含success: false和 message。无效 JSON、表达式、页码使用 400Python 本地版数据库异常使用 500公开版使用 503 表示数据库暂时不可用。一条成功计算返回例如{success:true,id:1,expression:(12)*3,result:9,created_at:2026-10-02T00:00:0000:00}这里的时间仅用于说明响应结构。真实时间见截图和运行数据库。result 使用字符串保留十进制表示。数据库设计字段类型说明idINTEGER PRIMARY KEY AUTOINCREMENT唯一记录 IDexpressionTEXT NOT NULL输入表达式resultTEXT NOT NULL十进制结果字符串created_atTEXT NOT NULLUTC ISO 8601 时间SQLite 文件保存在后端 data 目录。后端重启后连接同一文件即可读取历史。浏览器不通过 LocalStorage 保存计算记录。所有数据库连接通过上下文管理器提交事务并关闭连接。关键代码说明表达式解析解析器采用以下递归下降文法expression : term ((|-) term)* term : factor ((*|/) factor)* factor : (|-) factor | number | ( expression )expression 先调用 term因此乘除优先于加减factor 处理括号和一元正负号因此能够识别3*-2。运算符循环让减法和除法保持左结合。解析后还检查所有 token 是否已消费拒绝缺少运算符或夹带其他文本。ifoperator/andright0:raiseCalculationError(除数不能为零)valuevalue*rightifoperator*elsevalue/right表达式最多 500 字符、递归深度最多 64 层有效位数为 28 位循环小数会舍入。没有 eval、exec 或任意代码执行。当前不支持幂、函数、隐式乘法、科学计数法。前端请求constdataawaitrequest(/api/calculate,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({expression:input.value}),});document.querySelector(#result).textContentdata.result;request 统一处理 HTTP 状态和后端 success 字段并设置 10 秒超时。按钮在请求期间禁用避免重复提交。用户表达式通过 textContent 展示避免作为 HTML 执行。历史插入与删除database.execute(INSERT INTO history(expression,result,created_at) VALUES(?,?,?),(expression.strip(),result,created_at),)database.execute(DELETE FROM history WHERE id?,(record_id,))参数化 SQL 将数据和 SQL 语句分离。删除操作由后端执行前端随后重新读取历史不仅隐藏页面元素。历史按 ID 倒序每页查询 10 条搜索使用 instr 做表达式子串匹配。测试与部署自动测试包含 7 个测试方法覆盖 11 个有效表达式、12 个无效输入以及 HTTP 校验、数据库重启持久化、指定删除、搜索、分页、CORS 预检、左结合和极端页码/编号。2026 年 10 月 2 日本地执行全部通过。浏览器另验证必做功能并保存上述 16 张截图。本轮复核还修复了 ± 按钮的含义未选中文本时对整个表达式取反再次点击恢复选中文本时对选中片段取反。前端只改变表达式文本结果仍由后端计算。本地运行分别在 backend 目录执行python src/server.py在 frontend 目录执行python -m http.server 5500 --bind 127.0.0.1访问 http://localhost:5500。公开部署已使用 Sites 完成在线访问。前端通过 HTTP JSON API 访问后端历史保存在 D1 SQLite 持久数据库GitHub Pages 前端使用 config.js 中的公开 API 地址后端允许 https://blue-jay-sun.github.io 来源。部署平台确认发布成功。本版本为公共演示历史无登录隔离所有访客共享同一个历史库。正式多用户系统可增加用户认证、独立历史和限流。个人经历与收获本项目使用 AI 辅助实现、检查和本地验证。以下总结来自项目实际设计与发现的问题不将自动执行时间当作个人开发时间。这次作业的关键是职责划分。前端只负责编辑表达式和展示响应后端承担解析、计算和持久化。停止后端时页面仍能输入但不能获得新结果这比仅检查目录是否分开更能说明实际架构。表达式处理采用三层文法加减层调用乘除层乘除层调用处理数字、括号和一元符号的层。由调用顺序保证优先级也能解释为什么 12*3 与 (12)*3 的结果不同。Decimal 改善十进制表示但循环小数仍需按明确精度舍入不能声称支持无限精度。复核中发现 ± 按钮原先只插入减号与用户理解的取反含义不一致后来改为对表达式或选中片段取反。后端还补上极大页码与编号的输入边界并显式关闭数据库连接。由此可见必做样例通过后仍需要检查边界和界面含义。历史是否持久化需要真实重启验证删除也需要回到数据库查询不能只从界面隐藏一行。跨域配置必须使用来源地址localhost 与 127.0.0.1 不同公开部署还需注意 HTTPS。下一步的改进可以是独立用户历史、科学运算和监控。后续需要继续通过运行样例理解接口、解析文法和数据库操作。本次公网部署说明部署采用 Sites无需 PythonAnywhere 账号。界面继续使用独立 HTML/CSS/JavaScript云端适配后端为 HTTP JSON APID1 SQLite 持久保存历史。Python 本地版仍保留。部署适配版使用 BigInt 有理数计算在最终结果处按 28 位有效数字舍入与 Python Decimal 每步舍入存在边界差异。发布状态已确认成功本地适配版的计算、读库、删除和健康检查通过。部署适配源码已放入 deployment/source.zip可下载检查完整路由、依赖、数据库迁移与界面。公开版在最终结果处舍入本地版每步舍入精度边界有所不同。