第12组 · 谢相逸 · 第1次评审详情 - sebestp/coursewise GitHub Wiki
- 报告期次：第1次 ｜ 报告日期：2026-10-08 ｜ 项目组号：第12组 ｜ 项目名称：在线购物系统
-
已完成工作：建立公开仓库、固定 Wiki Home 与协作提交指南
-
成果物：仓库与接口文档成果
-
已完成工作：上传前端模块4个文件与说明，发布可下载前端版本 v0.1.0-frontend
-
成果物：前端界面成果
实际成果：公开仓库、固定Wiki Home、前端接口与五模块分工文档。完成人真实姓名：____。
前三项已经在线公开；课程文档本轮补齐。组员名单与实际完成情况须本人确认。
责任分工：谢相逸负责（GitHub 账号 LittleChenLiya，本仓库由其创建并持有）。组长为王暾（账号 wangtun773），负责 03 商品发布与历史模块。本次提交由组长授权通过 Codex 完成，当前代码采用 AI 辅助生成，需本人理解、验证并如实说明使用方式。
| 文件 | 功能 |
|---|---|
| index.html | 页面骨架、导航、内容容器 |
| style.css | 页面布局、样式和响应式设计 |
| app.js | 页面切换、表单、商品展示、交易确认和 API 请求 |
| README.md | 关键函数、变量、接口协作、答辩问答 |
查看源代码 · GitHub 源码下载 · 版本发布页
源码通过 GitHub 下载功能下载，建议保存名 online-shopping-mvp-v0.1.0-frontend.zip。此版本只包含前端，不是完整可独立运行的系统。
2026-10-07，本机 Node v24.14.1 执行 node --check "01_前端界面/app.js"，退出码 0。它证明 JavaScript 语法通过，不证明所有 UI 和后端集成均已验收。以前本机联调曾验证登录、发布、图片上传和意向提交；交易确认框改为页面内 dialog 后尚需完整浏览器回归验证。
这是谢相逸负责的前端模块（项目组号第十二组，组长王暾）。公开仓库本次提交本文件夹的 index.html、style.css、app.js 和 README.md，其他四个模块由对应组员自行上传。五个模块的源码现均已在 main，可按根目录 start.py 启动完整服务；页面级联调结果仍以实际验证为准。以下运行和 API 说明描述与后端集成后的约定。
版本：v0.1.0-frontend。JavaScript 语法检查已通过；五个模块源码都已进入 main，完整页面验收需按实际运行结果补充。课程要求的 PPT 已制作，测试执行录屏尚未录制。
负责整个系统的页面和交互：买家商品页、购买意向表单、卖家登录、发布商品与历史、交易管理、修改密码。使用其他四位成员提供的 JSON API，不直接读写数据库。界面禁用按钮只是提示，最终权限和状态由后端检查。
文件：index.html 定义页面骨架、导航和内容容器；style.css 定义配色、卡片、表格与手机布局；app.js 实现页面切换、表单和接口请求。必须从 python start.py 启动的 HTTP 服务访问，不能直接双击 HTML 文件。
| 函数 | 参数 / 返回值 | 用途 |
|---|---|---|
| api(path, data) | 接口地址、可选数据；返回 Promise | 无 data 发 GET，有 data 发 POST；统一处理错误和安全请求头 |
| render() | 无；异步完成页面更新 | 根据 URL hash 选择页面；进入后台前检查登录；处理加载失败 |
| shop(version) | 本次页面版本 | 查询当前商品，渲染商品或空状态；冻结时禁用购买按钮 |
| buy(version) | 本次页面版本 | 显示买家信息表单并提交购买意向 |
| productAdmin(version) | 本次页面版本 | 显示发布表单、当前商品限制及历史；处理图片预览 |
| tradeAdmin(version) | 本次页面版本 | 展示意向和过程记录，调用冻结、成交、失败接口 |
| accountPage() | 无 | 修改密码与退出登录页面 |
| loginPage() / bindLogin() | HTML 字符串 / 无 | 创建登录表单和绑定提交处理 |
| attachForm(id, handler) | 表单选择器、异步回调 | 阻止默认跳转、读取字段、提交时禁用按钮、统一提示错误 |
| readImage(file) | File；返回 Promise | 检查图片大小、类型并读取内容 |
| esc(value) | 任意值；返回转义文本 | 将特殊字符转为 HTML 实体，避免用户文字被当作标签执行 |
| money(cents) / badge(status) | 整数分 / 状态；字符串 | 格式化价格及状态标识 |
| toast(message, error) | 提示文字、错误标识 | 在页面底部显示成功或失败消息 |
| askConfirm(message) | 确认文字；返回 Promise | 使用页面内 dialog 提醒交易后果，确认后才请求后端，取消或 Esc 不执行 |
| intro() / productCard() | 标题等 / 商品对象 | 生成公共标题与商品卡片 |
-
app：页面主内容容器，页面切换时替换其内容。 -
labels：数据库状态英文值到中文界面标签的映射。 -
renderVersion：每次切页递增；异步请求返回时对比，避免旧请求覆盖新页面。 -
toastTimer：提示消息自动隐藏的计时器，显示新消息时清除旧计时器。 -
location.hash：#shop/#buy/#products/#trades/#account表示页面，无需后端提供五套 HTML。
商品读取和意向提交对接成员 2；商品发布和历史对接成员 3；交易和意向列表对接成员 4；账号和登录对接成员 5。完整接口表见根 README。前端传商品 id 和意向 id，不用商品名称作为关联字段。
验证：启动后分别查看空商品、在售、冻结、成交后的页面；用隐私窗口作为买家；提交表单时观察错误提示；将窗口缩窄检查布局。node --check app.js 可检查语法。冻结或下架后需刷新买家页面查看最新状态；即使页面没刷新，后端仍会拒绝过期提交。
问：为什么让一人负责全部前端？
答：统一页面风格和请求处理，避免四个后端模块各写一套界面；其他成员按接口约定提供数据即可。
问：为什么不用前端框架？
答：基线只有五类页面，原生 JavaScript 足够完成交互，部署只需要 Python，也方便逐个解释函数。
问：怎么做到切换页面不刷新？
答：监听 hashchange，render() 根据 hash 更新主容器；后端提供数据，前端负责渲染。
问：为什么要 renderVersion？
答：网络请求返回顺序可能与切页顺序不同；旧版本响应会被忽略，防止已经离开的页面重新显示。
问：禁止按钮就能保证不能购买吗？
答：不能。用户可以绕过界面调用接口，成员 2 在写入数据库前重新检查 active 状态。
问：姓名中写入 HTML 会怎样？
答：通过 esc() 转义后显示为文本；提示使用 textContent，不执行用户输入的 HTML。
问：提交意向为什么不付钱？
答：题目要求线下交钱交货，网页只登记意向和交易结果。
问：登录信息放在 localStorage 吗？
答：没有。浏览器携带服务器设置的 HttpOnly Cookie，JavaScript 不读取会话令牌。
（评审后填写）