You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
6.5 KiB
6.5 KiB
实现“添加交易”对话框
概述
您的银行应用现在已经具备了稳健的状态管理和数据持久化功能，但缺少了一个真实银行应用所需的重要功能：允许用户添加自己的交易。在本作业中，您将实现一个完整的“添加交易”对话框，并与现有的状态管理系统无缝集成。
本作业将汇集您在四个银行课程中所学的所有内容：HTML 模板、表单处理、API 集成和状态管理。
学习目标
完成本作业后，您将能够：
- 创建 适合用户输入的友好对话框界面
- 实现 具有键盘和屏幕阅读器支持的无障碍表单设计
- 集成 新功能到现有的状态管理系统
- 练习 API 通信和错误处理
- 应用 现代网页开发模式于真实功能
操作说明
第一步：添加交易按钮
创建 一个“添加交易”按钮，放置在仪表盘页面，方便用户查找和访问。
要求：
- 将 按钮放在仪表盘的合适位置
- 使用 明确、面向动作的按钮文本
- 按照 现有用户界面设计风格为按钮美化样式
- 确保 按钮支持键盘访问
第二步：对话框实现
选择以下两种方法之一来实现您的对话框：
方案 A：独立页面
- 创建 一个新的 HTML 模板用于交易表单
- 在 路由系统中添加新路由
- 实现 往返表单页面的导航
方案 B：模态对话框（推荐）
- 使用 JavaScript 在不离开仪表盘的情况下显示/隐藏对话框
- 采用
hidden属性 或 CSS 类实现显示控制 - 营造 流畅的用户体验，并正确管理焦点
第三步：无障碍实现
确保 您的对话框符合模态对话框的无障碍标准：
键盘导航：
- 支持 使用 Esc 键关闭对话框
- 限制 在对话框打开时焦点在对话框内部循环
- 关闭后 将焦点返回触发按钮
屏幕阅读器支持：
- 添加 合适的 ARIA 标签和角色
- 向 屏幕阅读器通报对话框的打开和关闭
- 提供 清晰的表单字段标签和错误消息
第四步：表单创建
设计 一个 HTML 表单来收集交易数据：
必填字段：
- 日期：交易发生时间
- 描述：交易用途说明
- 金额：交易金额（收入为正数，支出为负数）
表单功能：
- 提交前 验证用户输入内容
- 为 无效数据提供明确的错误提示
- 包含 有用的占位符文本和标签
- 样式 与现有设计保持一致
第五步：API 集成
将 您的表单连接到后端 API：
实现步骤：
- 查阅 服务器 API 规范 以获取正确的端点和数据格式
- 将表单输入 转换为 JSON 数据
- 使用 适当的错误处理将数据发送到 API
- 向用户显示 成功/失败消息
- 优雅处理 网络错误
第六步：状态管理集成
在仪表盘 更新新添加的交易：
集成要求：
- 成功添加交易后 刷新账户数据
- 更新 仪表盘显示，无需页面刷新
- 确保 新交易立即显示
- 保持 整个过程中的状态一致性
技术规格
API 端点详情： 请参阅服务器 API 文档了解：
- 交易数据所需的 JSON 格式
- HTTP 方法和端点 URL
- 期望的响应格式
- 错误响应处理
预期效果： 完成本作业后，您的银行应用应具备一个功能齐全的“添加交易”功能，外观与行为均专业：
测试您的实现
功能测试：
- 确认 “添加交易”按钮清晰可见且可访问
- 测试 对话框能正常打开和关闭
- 验证 表单验证适用于所有必填字段
- 检查 成功的交易能立即显示在仪表盘
- 确保 无效数据和网络问题的错误处理有效
无障碍测试：
- 使用 仅键盘操作完成整个流程
- 使用 屏幕阅读器测试对话框开关及通知
- 验证 焦点管理是否正确
- 检查 所有表单控件是否具有适当标签
评估标准
| 标准 | 优秀 | 合格 | 需改进 |
|---|---|---|---|
| 功能性 | 添加交易功能完美运行，用户体验优秀，遵循课程所有最佳实践 | 添加交易功能正常工作，但可能未遵循部分最佳实践或存在轻微可用性问题 | 添加交易功能部分可用，存在较大可用性问题 |
| 代码质量 | 代码结构良好，遵循既定模式，包含适当错误处理，与现有状态管理无缝集成 | 代码功能正常，但结构存在些许问题，与现有代码库模式不够一致 | 代码存在重大结构性问题，或无法很好地与现有模式集成 |
| 无障碍性 | 完整支持键盘导航，兼容屏幕阅读器，遵循 WCAG 指南且焦点管理优秀 | 实现基本无障碍功能，但可能缺失某些键盘导航或屏幕阅读器支持 | 无或极少考虑无障碍需求 |
| 用户体验 | 界面直观且精良，反馈清晰，交互流畅，专业美观 | 用户体验良好，但反馈或视觉设计存在微小改进空间 | 用户体验差，界面混乱或缺乏有效用户反馈 |
其他挑战（可选）
完成基础要求后，您可以考虑以下增强功能：
增强功能：
- 添加 交易类别（餐饮、交通、娱乐等）
- 实现 实时反馈的输入验证
- 创建 面向高级用户的键盘快捷键
- 添加 交易编辑和删除功能
高级集成：
- 实现 最近添加交易的撤销功能
- 添加 从 CSV 文件批量导入交易
- 创建 交易搜索和筛选功能
- 实现 数据导出功能
这些可选功能将帮助您练习更高级的网页开发概念，打造更完整的银行应用！
免责声明： 本文件使用AI翻译服务Co-op Translator进行翻译。尽管我们努力确保准确性，但请注意，自动翻译可能包含错误或不准确之处。原始语言的文件应被视为权威版本。对于关键信息，建议采用专业人工翻译。因使用本翻译而产生的任何误解或误释，我们概不负责。