Web-Dev-For-Beginners 银行应用示例解决方案零框架 Vanilla 银行 App 的前后端联调与运行指南【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本文以 translations/bn/7-bank-project/solution/README.md即 Bank app 示例解决方案说明为主体完整讲解如何运行这个用原生 HTML5、CSS 与 JavaScript未使用任何框架或库构建的银行应用示例并结合 7-bank-project 仓库中的 solution/app.js、solution/index.html 与 api/server.js 源码带你理解它的启动流程、API 依赖、路由与状态管理实现。读完本文你将能独立在本机启动API 服务 静态页面双进程的完整银行 Demo并清楚每个关键代码片段在整体架构中的位置与作用。图 1银行应用示例的登录 / 注册入口界面包含 Username 登录表单与 Register 注册区二者共享 Squirrel Banking 品牌标识。图 2登录后的账户仪表盘展示账户余额、交易明细Date / Object / Amount与 Add transaction 入口是解决方案运行后的核心页面。一、这个示例解决方案是什么在 Web-Dev-For-Beginners 的7-bank-projectBuild a Bank课程中学员依次学习 HTML 模板与路由、登录注册表单、数据获取方式 与 状态管理 四课。课程提供了一份完整的示例答案即本关联文档所述内容技术栈vanilla HTML5 CSS JavaScript零框架、零第三方前端库代码位置7-bank-project/solution/ 目录包含index.html、styles.css、app.js与logo.svg项目形态一个单页应用SPA风格的虚构银行前端需要配套的 Express API 提供账户数据。值得注意的是源码中还内置了一个可用的演示账号在 api/server.js 中预置了user: test的账户余额 75含 Pocket money、Book、Sandwich 三条示例交易方便你无需注册即可登录体验。二、运行前的架构认知为什么需要两个进程阅读运行说明前先建立整体运行模型。这个示例解决方案不是一个打开 HTML 就完事的静态页面而是一个前后端分离的联调应用组件目录端口角色API 服务7-bank-project/api/5000Node.js Express 编写的账务接口提供账户创建、查询、交易增删前端 App7-bank-project/solution/3000纯静态页面通过 HTTP 请求访问 5000 端口的 API在 solution/app.js 顶部可以找到前端与 API 的对接常量的直接证据const serverUrl http://localhost:5000/api; // reserved for future server swap这段注释 reserved for future server swap预留未来更换服务器说明了它当前仅作为将来接入远程服务器的预留常量在本示例中前端的数据层其实是本地模拟 localStorage 持久化的实现详见第四节。因此先启动 API 服务终端 A占用 5000 端口保持不关闭再启动静态页面服务终端 B占用 3000 端口。这正是原文档强调First make sure you have the API server running先确保 API 服务器已启动的原因。三、分步运行指南含 API 服务3.1 准备环境由于 API 依赖 Node.js 生态Express、cors、body-parser运行前端时也建议使用 Node 自带的工具链因此本机需要先安装Node.jsnpm 随附。原文档指出由于运行 API 本身就需要 Node.js所以直接复用同一环境即可。3.2 第一步克隆仓库并安装 API 依赖打开一个终端克隆本仓库并在api目录下安装依赖git clone https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners cd 7-bank-project/api npm installnpm install依据 7-bank-project/api/package.json 安装 Express 等相关依赖耗时取决于网络状况。备选本仓库自带 7-bank-project/api/api.http如果你在 VS Code 中安装了 REST Client 插件也可以在启动服务后用它直接调试接口。3.3 第二步启动 API 服务npm start服务随即监听5000 端口。原文档特别提醒This server will be running together with the main bank app server terminal (listening on port 3000), do not close it.——这个终端要一直开着不能关闭。另一个需要记住的注意事项所有数据都保存在内存中in-memory服务一旦停止所有注册账户和交易数据都会丢失。从源码看api/server.js 直接用一个普通对象db存数据注释也写明 not suited for production use!这正是数据不持久化的原因。3.4 第三步启动前端 App保持 API 服务运行另开一个终端进入 solution 目录并启动开发用 Web 服务器cd 7-bank-project/solution npx lite-server .npx lite-server .会在当前目录起一个轻量开发服务器监听3000 端口。使用lite-server而非 python/http-server 的原因它是 Node 生态的零配置静态服务器支持 HTML5 路由回退与文件变更自动刷新符合原生 SPA 的开发体验且无需额外全局安装npx 会临时拉取。3.5 第四步浏览器访问http://localhost:3000打开后即可看到登录/注册界面图 1。你可以注册填写 Username、Currency如INR或$、Description 与初始余额后提交登录输入已存在的用户名如直接登录内置的test进入仪表盘图 2记账点击 Add transaction负数金额记支出debit、正数记收入credit。四、源码视角前端数据层与状态管理运行文档内容虽简短但 solution/app.js 为实现可独立运行做了完整设计理解它有助于你排查明明登录了却没数据这类问题。4.1 数据层本地模拟 localStorage 持久化对照第四节所说示例前端并未真的调用 5000 端口的serverUrl而是实现了一套与 API 返回形状一致的本地异步数据层账户列表存于localStorage的accounts键getAccounts/saveAccounts当前登录账户存于savedAccount键数据读取/写入封装为 Promise 并用setTimeout模拟网络延迟60~80ms从而复刻真实 API 的异步调用形态见 getAccount 与 createAccount。这与 3-data/README.md 中讲授的 fetch 概念在调用模式上保持一致方便学员将来把serverUrl接通真实后端时平滑迁移。因此即使 API 服务未启动页面也能打开但若要体验真实的 Express 账务接口仍需按第三节把 API 起在 5000 端口。值得注意的还有两处工程化细节Schema 迁移脚手架migrateSchema()用schemaVersion键记录数据版本为将来 localStorage 数据格式升级预留了迁移入口app.js跨标签页同步监听storage事件当其他标签页修改账户数据时自动刷新当前视图app.js。4.2 路由与状态freeze 不可变状态let state Object.freeze({ account: null }); function updateState(property, newData) { state Object.freeze({ ...state, [property]: newData }); localStorage.setItem(storageKey, JSON.stringify(state.account)); }这段代码对应第 4 课《状态管理》的核心思想用Object.freeze冻结状态对象、以展开语法生成新对象杜绝意外的原地修改状态更新同时写入localStorage实现刷新后会话恢复。路由方面则维护了一张routes表/dashboard与/login通过history.pushStatetemplate克隆实现无刷新页面切换并用popstate事件让浏览器前进/后退按钮正常工作app.js。页面骨架见 solution/index.html其中template idlogin、template iddashboard与template idtransaction分别对应登录页、仪表盘和交易行模板而div idapp是唯一的 SPA 挂载点。4.3 金额与日期的国际化格式化App 没有依赖任何格式化库而是直接用浏览器内置的IntlAPItoCurrency()用Intl.NumberFormat以accounting会计风格格式化货币负数用括号显示app.jsformatDate()以dateStyle: medium输出本地化日期用户语言取自navigator.language默认回退en-IN。五、配套 API 快速参考虽然 API 已预先提供、不属于练习范围但运行联调时你会直接面对这些端点。以下路由表摘自 7-bank-project/api/README.md便于调试时查阅路由说明请求示例GET /api/获取服务信息-POST /api/accounts/创建账户缺 user/currency 返回 400重复返回 409{ user: Yohan, description: My budget, currency: EUR, balance: 100 }GET /api/accounts/:user获取指定账户全部数据不存在返回 404-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删除指定交易-CORS 方面server.js 使用cors({ origin: /http:\/\/(127(\.\d){3}|localhost)/})白名单放行 localhost/127.0.0.1 来源正好覆盖http://localhost:3000下运行的前端。六、常见问题排查清单现象原因处理页面能打开但感觉没数据本示例数据层默认存于浏览器 localStorage直接注册新账号或用内置账号test登录API 请求跨域被拦截API 未启动或 CORS 未覆盖来源确认 5000 端口服务在运行、前端从localhost:3000打开重启后注册的账号不见了API 内存存储不持久化重新注册这是示例的预期行为页面停留Loading…JS 未执行或模板渲染异常确认浏览器未禁用 JavaScriptindex.html含noscript提示总之本解决方案的运行本质是一个 Express API5000 一个静态页面服务器3000的经典前后端分离双进程编排。先起 API、再起npx lite-server .、最后访问localhost:3000即可完整体验登录、注册、余额展示与记账全流程结合app.js中的模板路由、冻结状态与 Intl 格式化实现它同时是理解零框架原生 Web App 工程化写法的绝佳范例。【免费下载链接】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），仅供参考
