Web-Dev-For-Beginners 银行应用Bank App示例解决方案零框架 SPA 架构拆解与本地运行指南【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本篇技术指南围绕 7-bank-project 课程项目提供的“银行应用Squirrel Banking”完整示例解决方案展开它使用纯 HTML5、CSS 与原生 JavaScript 构建不依赖任何框架或库。通过本文你将掌握该解决方案的整体架构模板与路由、登录/注册表单、数据层与状态管理、本地快速启动方式API 服务 lite-server双端口运行并从源码级理解每一层实现背后的设计意图可直接用于把课程四个分节的知识串联成可运行的真实应用。本仓库7-bank-project由微软 Web-Dev-For-Beginners 课程中的第 7 大主题“Build a Bank”构成配套的英文示例解决方案说明见 7-bank-project/solution/README.md。本文所述的“示例解决方案”即 7-bank-project/solution 目录下的成品它与课程四节内容一一对应模板与路由、登录/注册表单、数据获取与使用、状态管理。解决方案整体概览你要运行的是什么示例解决方案的定位一句话概括引自英文 README 原文Example solution for the bank app project, built with vanilla HTML5, CSS and JavaScript (no frameworks or libraries used).它本质上是一个无构建步骤的前端单页应用SPA所有页面结构以 HTMLtemplate形式静态声明视图切换由一段极简 hash/History API 路由驱动数据读写封装在独立的“伪 API”层最终把账户与交易数据持久化到浏览器localStorage。整个前端由三份静态文件组成文件职责7-bank-project/solution/index.html页面挂载点、登录/注册视图模板、仪表盘视图模板、交易弹窗模板与新增交易表单模板7-bank-project/solution/styles.css设计令牌design tokens、明暗主题、布局与组件样式7-bank-project/solution/app.js常量、格式化工具、数据层、状态管理、路由、认证与仪表盘逻辑、初始化入口7-bank-project/solution/logo.svg应用品牌 Logo最终的界面效果正是你在浏览器打开后会看到的两大页面——登录/注册页与账户仪表盘页银行应用登录与注册界面银行应用账户仪表盘界面启动前置条件与整体运行架构在启动前端之前先理解整个项目采用**双服务双端口**结构API 服务由 7-bank-project/api/server.js 提供的 Express 后端监听端口5000负责账户与交易数据存取。前端静态服务示例解决方案本身是纯静态文件任何 Web 服务器均可托管课程默认使用npx lite-server在端口3000启动开发服务器。解决方案 README 的启动要求原文为“First make sure you have the API server running”确保 API 服务器已先运行。API 服务的安装与启动方式详见 7-bank-project/api/README.md进入api目录后执行npm install安装依赖再执行npm start服务器即开始监听5000端口。需要特别说明的是API 服务器会与前端服务器同时运行请勿关闭英文原文档明确指出 “This server will be running together with the main bank app server terminal (listening on port 3000), do not close it.”。同时API 的所有条目存储在内存中、不做持久化——服务一旦停止全部数据即丢失而前端当前实现则将账户数据镜像持久化在浏览器localStorage中两种数据存储边界需要区分清楚详见下文“数据层”章节。本地启动的完整步骤结合英文原文档与仓库实际结构完整的三步启动流程如下克隆仓库将本仓库通过git clone拉取到本地进入仓库根目录。先启动 API 服务终端 Acd 7-bank-project/api npm install # 安装依赖耗时取决于网络状况 npm start # 启动后监听 http://localhost:5000api目录中还提供了一份可交互的 REST 请求样例文件 7-bank-project/api/api.http安装 VS Code 的 REST Client 扩展后可直接逐个发送请求验证接口。再启动前端静态服务终端 Bcd 7-bank-project/solution npx lite-server .该命令会以当前目录为根启动一个开发用 Web 服务器默认监听端口3000。此时打开浏览器访问http://localhost:3000即可看到应用。提示由于需要运行 API本地已必然装有 Node.js因此 README 直接推荐npx lite-server .而不再额外要求安装任何静态服务器。若端口3000被占用lite-server会自动尝试寻找下一个可用端口请注意观察终端输出中的实际地址。后端 API 一览前端依赖的接口契约虽然当前示例前端的最终数据层实现在本地完成见下一节但它预留了指向真实 API 的地址常量API 的完整路由契约见 7-bank-project/api/README.md 及 server.js 中每个处理器如下方法路径说明GET/api/获取服务器信息POST/api/accounts/创建账户示例请求体{ user: Yohan, description: My budget, currency: EUR, balance: 100 }GET/api/accounts/:user获取指定账户全部数据DELETE/api/accounts/:user删除指定账户POST/api/accounts/:user/transactions新增交易示例请求体{ date: 2020-07-23T18:25:43.511Z, object: Bought a book, amount: -20 }DELETE/api/accounts/:user/transactions/:id删除指定交易从 server.js 的源码可以印证几个实现细节服务端口读取环境变量const port process.env.PORT || 5000可用PORT覆盖默认值内存数据库db预置了一个演示账户test货币符号$、余额75含 3 条演示交易方便 API 链路快速验证账户创建接口对缺失参数返回400、账户重复返回409交易 ID 并非随机数而是对date object amount取MD5 哈希生成同一笔交易重复提交会被409拒绝去重设计CORS 白名单限定了http://(127.x.x.x|localhost)来源保证本地双端口联调可用。在 VS Code 中配合 7-bank-project/api/api.http内含创建账户、查询、删除账户、添加/删除交易的完整示例可以快速手工联调这组接口。架构纵深纯 JavaScript 如何支撑一个可用的 SPA从源码结构看示例解决方案没有使用 Vue/React 等框架而是用四套自制机制完成了 SPA 的全部能力。这与课程四个分节的训练目标一一对应是理解整个示例的最佳切入点。1. 模板与路由对应 1-template-route 课程所有“页面”以 HTMLtemplate元素静态声明在 index.html 中#login模板index.html 第 25 行起登录 注册双面板#dashboard模板第 100 行起余额摘要、交易表格、新增交易弹窗#transaction模板第 211 行起单行交易记录。路由层在 app.js 中实现为一张表 History APIconst routes { /dashboard: { title: My Account, templateId: dashboard, init: refresh }, /login: { title: Login, templateId: login, init: attachAuthHandlers } };navigate(path)调用history.pushState写入 URLupdateRoute()根据当前路径取出对应template克隆其内容并渲染进#app挂载点随后执行该路由的init钩子popstate监听器负责浏览器前进/后退。路由粒度非常轻——一套{ title, templateId, init }元数据即描述了一个页面。2. 认证与表单对应 2-forms 课程登录与注册逻辑位于 app.js提交前先调用form.checkValidity()做浏览器原生校验不通过则reportValidity()通过后读取表单字段调用数据层接口失败时将错误写入带rolealert的错误容器成功后updateState保存账户并navigate(/dashboard)跳转。3. 数据层对应 3-data 课程这是最值得留意的一处实现选择。当前示例的最终代码将数据访问全部封装成“可替换的伪 API”常量serverUrl http://localhost:5000/apiapp.js 第 5 行注释为 “reserved for future server swap”保留给未来切换真实服务端具体实现getAccount、createAccount、createTransactionapp.js 第 90–170 行则基于localStorage存取并用setTimeout60–80ms模拟网络延迟保持函数签名与将来替换为真实fetch调用一致。例如createAccount会校验用户名非空、用户不重复并对currency调用isIsoCurrency规范化createTransaction生成uuid()作为交易 ID、累加账户余额并追加交易记录。这种“接口先行、实现可换”的结构正是课程第 3 节“数据获取与使用”所训练的抽象思维落地。4. 状态管理对应 4-state-management 课程状态集中在 app.jsstate对象通过Object.freeze保持不可变任何更新都必须经updateState(property, newData)——它内部以{ ...state, [property]: newData }生成新对象并重新冻结同时把活跃账户写入localStoragekey 为savedAccount。此外还实现了两项进阶能力跨标签页同步监听全局storage事件当其他标签页改动了账户/交易数据时自动触发refresh()Schema 迁移脚手架migrateSchema()读取schemaVersion为将来数据结构升级预留了迁移入口app.js 第 80–88 行。所有账户则保存在另一把 keyaccounts下getAccounts/saveAccounts是仅有的两个读写入口数据读取统一经safeParse兜底避免脏 JSON 导致崩溃。5. 仪表盘渲染细节updateDashboard()app.js 第 320–358 行负责把状态渲染成界面金额通过toCurrency()做本地化货币格式化交易按日期降序排序后逐行克隆#transaction模板填充正负金额分别挂上credit/debitCSS 类以便视觉区分。新增交易以无原生dialog的方式自行实现模态弹窗.dialog.show类并具备完整的焦点管理打开即聚焦日期输入框Escape键关闭并归还焦点到“Add transaction”按钮——这符合 Web 无障碍指南中对话框键盘交互的要求。无障碍与主题细节styles.css 中的工程化实践7-bank-project/solution/styles.css 并非简单样式表而是体现了若干值得借鉴的工程实践CSS 设计令牌--primary、--surface、--radius、--space-*等自定义属性统一定义品牌色、中性色、圆角与间距styles.css 第 5–48 行随系统明暗自适应media (prefers-color-scheme: dark)自动切换深色令牌组html contenteditable="false">【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Web-Dev-For-Beginners 银行应用（Bank App）示例解决方案：零框架 SPA 架构拆解与本地运行指南
Web-Dev-For-Beginners 银行应用Bank App示例解决方案零框架 SPA 架构拆解与本地运行指南【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本篇技术指南围绕 7-bank-project 课程项目提供的“银行应用Squirrel Banking”完整示例解决方案展开它使用纯 HTML5、CSS 与原生 JavaScript 构建不依赖任何框架或库。通过本文你将掌握该解决方案的整体架构模板与路由、登录/注册表单、数据层与状态管理、本地快速启动方式API 服务 lite-server双端口运行并从源码级理解每一层实现背后的设计意图可直接用于把课程四个分节的知识串联成可运行的真实应用。本仓库7-bank-project由微软 Web-Dev-For-Beginners 课程中的第 7 大主题“Build a Bank”构成配套的英文示例解决方案说明见 7-bank-project/solution/README.md。本文所述的“示例解决方案”即 7-bank-project/solution 目录下的成品它与课程四节内容一一对应模板与路由、登录/注册表单、数据获取与使用、状态管理。解决方案整体概览你要运行的是什么示例解决方案的定位一句话概括引自英文 README 原文Example solution for the bank app project, built with vanilla HTML5, CSS and JavaScript (no frameworks or libraries used).它本质上是一个无构建步骤的前端单页应用SPA所有页面结构以 HTMLtemplate形式静态声明视图切换由一段极简 hash/History API 路由驱动数据读写封装在独立的“伪 API”层最终把账户与交易数据持久化到浏览器localStorage。整个前端由三份静态文件组成文件职责7-bank-project/solution/index.html页面挂载点、登录/注册视图模板、仪表盘视图模板、交易弹窗模板与新增交易表单模板7-bank-project/solution/styles.css设计令牌design tokens、明暗主题、布局与组件样式7-bank-project/solution/app.js常量、格式化工具、数据层、状态管理、路由、认证与仪表盘逻辑、初始化入口7-bank-project/solution/logo.svg应用品牌 Logo最终的界面效果正是你在浏览器打开后会看到的两大页面——登录/注册页与账户仪表盘页银行应用登录与注册界面银行应用账户仪表盘界面启动前置条件与整体运行架构在启动前端之前先理解整个项目采用**双服务双端口**结构API 服务由 7-bank-project/api/server.js 提供的 Express 后端监听端口5000负责账户与交易数据存取。前端静态服务示例解决方案本身是纯静态文件任何 Web 服务器均可托管课程默认使用npx lite-server在端口3000启动开发服务器。解决方案 README 的启动要求原文为“First make sure you have the API server running”确保 API 服务器已先运行。API 服务的安装与启动方式详见 7-bank-project/api/README.md进入api目录后执行npm install安装依赖再执行npm start服务器即开始监听5000端口。需要特别说明的是API 服务器会与前端服务器同时运行请勿关闭英文原文档明确指出 “This server will be running together with the main bank app server terminal (listening on port 3000), do not close it.”。同时API 的所有条目存储在内存中、不做持久化——服务一旦停止全部数据即丢失而前端当前实现则将账户数据镜像持久化在浏览器localStorage中两种数据存储边界需要区分清楚详见下文“数据层”章节。本地启动的完整步骤结合英文原文档与仓库实际结构完整的三步启动流程如下克隆仓库将本仓库通过git clone拉取到本地进入仓库根目录。先启动 API 服务终端 Acd 7-bank-project/api npm install # 安装依赖耗时取决于网络状况 npm start # 启动后监听 http://localhost:5000api目录中还提供了一份可交互的 REST 请求样例文件 7-bank-project/api/api.http安装 VS Code 的 REST Client 扩展后可直接逐个发送请求验证接口。再启动前端静态服务终端 Bcd 7-bank-project/solution npx lite-server .该命令会以当前目录为根启动一个开发用 Web 服务器默认监听端口3000。此时打开浏览器访问http://localhost:3000即可看到应用。提示由于需要运行 API本地已必然装有 Node.js因此 README 直接推荐npx lite-server .而不再额外要求安装任何静态服务器。若端口3000被占用lite-server会自动尝试寻找下一个可用端口请注意观察终端输出中的实际地址。后端 API 一览前端依赖的接口契约虽然当前示例前端的最终数据层实现在本地完成见下一节但它预留了指向真实 API 的地址常量API 的完整路由契约见 7-bank-project/api/README.md 及 server.js 中每个处理器如下方法路径说明GET/api/获取服务器信息POST/api/accounts/创建账户示例请求体{ user: Yohan, description: My budget, currency: EUR, balance: 100 }GET/api/accounts/:user获取指定账户全部数据DELETE/api/accounts/:user删除指定账户POST/api/accounts/:user/transactions新增交易示例请求体{ date: 2020-07-23T18:25:43.511Z, object: Bought a book, amount: -20 }DELETE/api/accounts/:user/transactions/:id删除指定交易从 server.js 的源码可以印证几个实现细节服务端口读取环境变量const port process.env.PORT || 5000可用PORT覆盖默认值内存数据库db预置了一个演示账户test货币符号$、余额75含 3 条演示交易方便 API 链路快速验证账户创建接口对缺失参数返回400、账户重复返回409交易 ID 并非随机数而是对date object amount取MD5 哈希生成同一笔交易重复提交会被409拒绝去重设计CORS 白名单限定了http://(127.x.x.x|localhost)来源保证本地双端口联调可用。在 VS Code 中配合 7-bank-project/api/api.http内含创建账户、查询、删除账户、添加/删除交易的完整示例可以快速手工联调这组接口。架构纵深纯 JavaScript 如何支撑一个可用的 SPA从源码结构看示例解决方案没有使用 Vue/React 等框架而是用四套自制机制完成了 SPA 的全部能力。这与课程四个分节的训练目标一一对应是理解整个示例的最佳切入点。1. 模板与路由对应 1-template-route 课程所有“页面”以 HTMLtemplate元素静态声明在 index.html 中#login模板index.html 第 25 行起登录 注册双面板#dashboard模板第 100 行起余额摘要、交易表格、新增交易弹窗#transaction模板第 211 行起单行交易记录。路由层在 app.js 中实现为一张表 History APIconst routes { /dashboard: { title: My Account, templateId: dashboard, init: refresh }, /login: { title: Login, templateId: login, init: attachAuthHandlers } };navigate(path)调用history.pushState写入 URLupdateRoute()根据当前路径取出对应template克隆其内容并渲染进#app挂载点随后执行该路由的init钩子popstate监听器负责浏览器前进/后退。路由粒度非常轻——一套{ title, templateId, init }元数据即描述了一个页面。2. 认证与表单对应 2-forms 课程登录与注册逻辑位于 app.js提交前先调用form.checkValidity()做浏览器原生校验不通过则reportValidity()通过后读取表单字段调用数据层接口失败时将错误写入带rolealert的错误容器成功后updateState保存账户并navigate(/dashboard)跳转。3. 数据层对应 3-data 课程这是最值得留意的一处实现选择。当前示例的最终代码将数据访问全部封装成“可替换的伪 API”常量serverUrl http://localhost:5000/apiapp.js 第 5 行注释为 “reserved for future server swap”保留给未来切换真实服务端具体实现getAccount、createAccount、createTransactionapp.js 第 90–170 行则基于localStorage存取并用setTimeout60–80ms模拟网络延迟保持函数签名与将来替换为真实fetch调用一致。例如createAccount会校验用户名非空、用户不重复并对currency调用isIsoCurrency规范化createTransaction生成uuid()作为交易 ID、累加账户余额并追加交易记录。这种“接口先行、实现可换”的结构正是课程第 3 节“数据获取与使用”所训练的抽象思维落地。4. 状态管理对应 4-state-management 课程状态集中在 app.jsstate对象通过Object.freeze保持不可变任何更新都必须经updateState(property, newData)——它内部以{ ...state, [property]: newData }生成新对象并重新冻结同时把活跃账户写入localStoragekey 为savedAccount。此外还实现了两项进阶能力跨标签页同步监听全局storage事件当其他标签页改动了账户/交易数据时自动触发refresh()Schema 迁移脚手架migrateSchema()读取schemaVersion为将来数据结构升级预留了迁移入口app.js 第 80–88 行。所有账户则保存在另一把 keyaccounts下getAccounts/saveAccounts是仅有的两个读写入口数据读取统一经safeParse兜底避免脏 JSON 导致崩溃。5. 仪表盘渲染细节updateDashboard()app.js 第 320–358 行负责把状态渲染成界面金额通过toCurrency()做本地化货币格式化交易按日期降序排序后逐行克隆#transaction模板填充正负金额分别挂上credit/debitCSS 类以便视觉区分。新增交易以无原生dialog的方式自行实现模态弹窗.dialog.show类并具备完整的焦点管理打开即聚焦日期输入框Escape键关闭并归还焦点到“Add transaction”按钮——这符合 Web 无障碍指南中对话框键盘交互的要求。无障碍与主题细节styles.css 中的工程化实践7-bank-project/solution/styles.css 并非简单样式表而是体现了若干值得借鉴的工程实践CSS 设计令牌--primary、--surface、--radius、--space-*等自定义属性统一定义品牌色、中性色、圆角与间距styles.css 第 5–48 行随系统明暗自适应media (prefers-color-scheme: dark)自动切换深色令牌组html contenteditable="false">【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考