企业官网建设流程全解析

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-project（Build 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 就完事"的静态页面，而是一个前后端分离的联调应用：

在 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.js（npm 随附）。原文档指出：由于运行 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 install

npm 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）。你可以：

1. 注册：填写 Username、Currency（如INR或$）、Description 与初始余额后提交；
2. 登录：输入已存在的用户名（如直接登录内置的test）进入仪表盘（图 2）；
3. 记账：点击 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.pushState+<template>克隆实现无刷新页面切换，并用popstate事件让浏览器前进/后退按钮正常工作（app.js）。页面骨架见 solution/index.html，其中<template id="login">、<template id="dashboard">与<template id="transaction">分别对应登录页、仪表盘和交易行模板，而<div id="app">是唯一的 SPA 挂载点。

4.3 金额与日期的国际化格式化

App 没有依赖任何格式化库，而是直接用浏览器内置的IntlAPI：

• toCurrency()：用Intl.NumberFormat以accounting会计风格格式化货币，负数用括号显示（app.js）；
• formatDate()：以dateStyle: 'medium'输出本地化日期；
• 用户语言取自navigator.language（默认回退en-IN）。

五、配套 API 快速参考

虽然 API 已预先提供、不属于练习范围，但运行联调时你会直接面对这些端点。以下路由表摘自 7-bank-project/api/README.md，便于调试时查阅：

CORS 方面，server.js 使用cors({ origin: /http:\/\/(127(\.\d){3}|localhost)/})白名单放行 localhost/127.0.0.1 来源，正好覆盖http://localhost:3000下运行的前端。

六、常见问题排查清单

总之，本解决方案的运行本质是一个 Express API（5000）+ 一个静态页面服务器（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