本文档提供了银行应用程序系统的技术概述，这是一个单页 Web 应用程序（SPA），展示了现代前端 Web 开发概念，包括路由、表单、数据获取和状态管理。该项目是使用原生 JavaScript 构建客户端银行应用程序的实际示例。
银行应用程序是一个客户端渲染的 SPA，模拟了一个基本的银行系统。它允许用户注册新账户、登录现有账户、查看余额和交易历史记录，以及管理其银行数据——所有这些都无需重新加载整个页面。
主要功能
来源：7-bank-project/1-template-route/README.md9-11 7-bank-project/4-state-management/README.md9-11 7-bank-project/3-data/README.md9-11 7-bank-project/3-data/README.md9-11
银行应用程序遵循模块化架构模式，具有清晰分离的职责。它使用 HTML 模板作为视图，JavaScript 作为应用程序逻辑，并与基于 Node.js 的 RESTful API 进行通信。
来源：7-bank-project/1-template-route/README.md38-45 7-bank-project/4-state-management/README.md25-35 7-bank-project/3-data/README.md26-35
该应用程序使用 HTML 模板来定义不同的屏幕。模板使用 `` 元素定义，并通过 JavaScript 动态实例化。
两个主要模板是
模板存储在 HTML 文档中，默认不显示。它们会在需要时被实例化并附加到 DOM。
来源：7-bank-project/1-template-route/README.md38-100
路由系统支持在不同视图之间导航，而无需刷新页面。它将 URL 路径映射到 HTML 模板并初始化相应的视图。
| URL 路径 | 模板 ID | 初始化函数 |
|---|---|---|
| /login | login | 不适用 |
| /dashboard | dashboard | refresh() |
路由系统包括
来源：7-bank-project/1-template-route/README.md104-145 7-bank-project/1-template-route/README.md146-194 7-bank-project/1-template-route/README.md195-292
该应用程序实现了两个主要表单
表单使用 JavaScript 提交，而不是默认的 HTML 表单提交，从而防止页面刷新。表单数据使用 `FormData` API 收集，并使用 JavaScript 进行处理。
该应用程序同时使用客户端和服务器端验证
客户端验证 使用 HTML5 属性
服务器端验证 检查
来源：7-bank-project/2-forms/README.md33-102 7-bank-project/2-forms/README.md235-280
该应用程序通过以下方式与服务器 API 进行通信
API 调用使用 `fetch` API 并结合 async/await 来实现，以获得更清晰的异步代码。
关键 API 端点
| 端点 | 方法 | 目的 |
|---|---|---|
| /api/accounts | POST | 创建新账户 |
| /api/accounts/:user | GET | 检索账户数据 |
| /api/accounts/:user/transactions | POST | 创建新交易 |
来源：7-bank-project/2-forms/README.md170-199 7-bank-project/3-data/README.md56-66
该应用程序使用集中式状态对象来维护状态。状态更新通过单个函数进行处理，以确保一致性。
状态管理的关键方面
来源：7-bank-project/4-state-management/README.md81-112 7-bank-project/4-state-management/README.md164-194
应用程序中的完整数据流遵循此模式
来源：7-bank-project/4-state-management/README.md25-50 7-bank-project/3-data/README.md26-35
仪表板显示
交易通过克隆的 HTML 模板显示，该模板用账户状态中的数据填充。
来源：7-bank-project/3-data/README.md170-315
为确保显示的数据保持最新，应用程序实现了一个刷新机制
这种方法可确保用户始终看到最新的账户信息。
来源：7-bank-project/4-state-management/README.md202-261
该应用程序连接到一个基于 Node.js 的 RESTful API 服务器，该服务器提供用于管理银行账户和交易的端点。服务器使用 Express.js 构建，并支持 CORS 以进行跨域请求。
来源：7-bank-project/api/package.json1-30 7-bank-project/3-data/README.md15-23
银行应用程序实施了多项现代 Web 开发最佳实践
这些实践有助于实现可维护、用户友好的应用程序架构。
来源： 7-bank-project/4-state-management/README.md35-50 7-bank-project/1-template-route/README.md264-290 7-bank-project/3-data/README.md111-115
银行应用程序展示了使用原生 JavaScript 实现的完整单页应用程序。它展示了
这些概念的实现不依赖于任何前端框架，展示了适用于各种技术的基础 Web 开发原则。