Web-Dev-For-Beginners 银行项目实战基于 Node.js 与 Express 的 Bank API 启动、端点解析与前端联调指南【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本指南以 translations/el/7-bank-project/api/README.md及其英文原文 7-bank-project/api/README.md为骨架完整讲解仓库中银行项目Build a Bank配套后端服务的定位、启动方式、全部 API 端点、数据模型与校验规则并结合 7-bank-project/api/server.js 源码逐行印证实现细节。读完你将能够独立启动该 API 服务、使用 curl 或 VS Code REST Client 调用全部端点并理解它如何与运行在 3000 端口的银行前端应用协作。一、Bank API 在整个银行项目中的定位在仓库的 7-bank-project/README.md 中银行项目包含四节课程HTML 模板与路由1-template-route、登录注册表单2-forms、数据获取与使用3-data、状态管理4-state-management。这四节课全部围绕前端构建展开而它们所需的账户与交易数据正是由本节介绍的Bank API提供的。原文档开门见山地强调了两点关键信息API 是预建好的不属于练习的一部分——学习者不需要自己编写这个后端直接启动使用即可如果想学习如何构建一个类似 API原文档指向了一套视频系列第 1721 集正好覆盖本 API以及一个交互式 Express API 教程仓库内的各课程 README 中也重复提到了这两份学习资源。API 文档本身已被翻译成多种语言仓库中 7-bank-project/api/translations 目录下保存了 8 个语言的翻译版本本文讲解的希腊语版本即其中之一。二、技术栈与项目结构在 7-bank-project/api/package.json 中可以看到该服务的完整依赖与脚本类别内容说明运行时依赖express ^4.21.2核心 HTTP 框架负责路由与中间件运行时依赖body-parser ^1.20.3解析请求体JSON 与表单编码运行时依赖cors ^2.8.5处理跨域资源共享开发依赖eslint ^7.5.0、prettier ^2.0.5代码检查与格式化脚本start: node server.js启动服务脚本lint: eslint、format: prettier --single-quote --write *.js质量保障引擎要求node 10运行 Node.js 的最低版本api目录结构非常精简只有三个核心文件server.js——全部后端逻辑约 197 行package.json——依赖与脚本配置api.http——面向 VS Code REST Client 扩展的接口调试脚本。server.js的整体流程可以概括为定义端口与内存数据库 → 创建 Express 实例并挂载解析/跨域中间件 → 通过express.Router()注册六个路由处理函数 → 统一挂载/api前缀 →app.listen()启动监听。全部代码都集中在一个文件中非常适合初学者通读。三、环境准备与服务器启动3.1 前置条件唯一的前置条件是安装Node.js版本需满足engines.node 10现代 LTS 版本均可满足。安装完成后即可开始。3.2 启动步骤按原文档的指引完整启动流程如下# 1. 克隆仓库若尚未克隆 git clone https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners # 2. 进入 API 目录 cd Web-Dev-For-Beginners/7-bank-project/api # 3. 安装依赖耗时取决于网络状况 npm install # 4. 启动服务 npm start启动成功后终端会输出Server listening on port 5000该输出来自 server.js 中app.listen的回调函数。3.3 端口约定与进程共存服务默认监听5000 端口也可以通过环境变量覆盖见源码 server.js 的const port process.env.PORT || 5000;。原文档特别强调这个 API 服务需要与银行主应用的前端服务器监听 3000 端口同时运行不要关闭它。也就是说开发时你会同时开启两个终端进程进程端口角色银行前端应用服务3000浏览器访问的页面Bank API5000提供账户与交易数据3.4 内存存储的重要特性注意所有记录都存储在内存中且不会持久化因此服务器一旦停止所有数据都会丢失。这是该 API 最核心的设计约束。源码 server.js 中的注释也明确写道Store data in-memory, not suited for production use!内存存储不适合生产环境使用。这意味着每次重启npm start数据库都会回到初始状态仅剩内置的test账户新增的账户、交易只在本次运行周期内有效该设计完全满足教学场景但不具备生产级持久化能力。3.5 快速验证服务是否就绪启动后可用 curl 立即验证curl http://localhost:5000/api # 期望响应Bank API v1.0.0这条命令同样出现在 3-data 课程 与 4-state-management 课程 的前置检查中是确认Node.js 正常、API 服务活跃、应用能触达服务端的标准连通性测试。四、API 端点全景与源码级解析原文档用一张表格概括了全部六个端点本节在完整继承该表的基础上结合server.js源码逐一深入解析参数校验、错误处理与状态码。路由说明状态码成功/失败GET /api/获取服务器信息200POST /api/accounts/创建账户201 / 400、409GET /api/accounts/:user获取指定账户全部数据200 / 404DELETE /api/accounts/:user删除指定账户204 / 404POST /api/accounts/:user/transactions添加一笔交易201 / 400、404、409DELETE /api/accounts/:user/transactions/:id删除指定交易204 / 4044.1 GET /api/ —— 服务器信息router.get(/, (req, res) { return res.send(${pkg.description} v${pkg.version}); });见 server.js。该端点读取package.json中的descriptionBank API与version1.0.0拼接返回纯文本Bank API v1.0.0因此前面curl http://localhost:5000/api的期望输出正是它。它是成本最低的连通性探针。4.2 POST /api/accounts/ —— 创建账户原文档给出的请求体示例{ user: Yohan, description: My budget, currency: EUR, balance: 100 }对应实现见 server.js校验规则如下user与currency为必填缺失时返回400{ error: Missing parameters }user不能与现有账户重复重复时返回409{ error: User already exists }balance可选默认值为0若传入字符串形式的数字如100服务端会用parseFloat自动转换转换失败isNaN则返回400{ error: Balance must be a number }description可选缺省时自动生成${user}s budget如Yohans budget成功创建后返回201与完整的账户对象此时transactions为空数组。关于请求格式注意server.js同时挂载了两种解析器server.jsbody-parser.urlencoded({ extended: true })与body-parser.json()因此该端点既接受application/json也接受application/x-www-form-urlencoded表单体见下文 api.http 中的用法。4.3 GET /api/accounts/:user —— 获取账户router.get(/accounts/:user, (req, res) { const account db[req.params.user]; if (!account) { return res.status(404).json({ error: User does not exist }); } return res.json(account); });见 server.js。以用户名作为键直接查询内存对象命中返回200与完整账户数据未命中返回404{ error: User does not exist }。这是前端登录时调用的核心端点。4.4 DELETE /api/accounts/:user —— 删除账户见 server.js。逻辑与上面的 GET 类似账户不存在返回404存在则通过delete db[req.params.user]移除并以204 No Content表示成功无响应体。4.5 POST /api/accounts/:user/transactions —— 添加交易原文档给出的请求体示例{ date: 2020-07-23T18:25:43.511Z, object: Bought a book, amount: -20 }对应实现见 server.js这是全服务逻辑最丰富的一个端点账户不存在返回404{ error: User does not exist }date、object、amount三项必填缺失返回400{ error: Missing parameters }amount数值校验字符串数字会被parseFloat转换转换结果isNaN则返回400{ error: Amount must be a number }交易 ID 生成使用 Node 内置crypto模块对date object amount拼接串取MD5 哈希作为交易 IDserver.js幂等去重若生成的 ID 已存在于该账户的交易列表中返回409{ error: Transaction already exists }——相同的日期、描述与金额组合会被判定为重复提交余额联动交易添加成功后执行account.balance transaction.amountserver.js因此余额由服务端自动更新前端无需手工计算成功返回201与创建的完整交易对象含自动生成的id。4.6 DELETE /api/accounts/:user/transactions/:id —— 删除交易见 server.js。流程为账户不存在返回404账户存在但找不到对应交易 IDfindIndex结果为-1返回404{ error: Transaction does not exist }找到则splice移除并返回204。值得注意的是删除交易不会回滚余额——源码中只执行了splice移除操作没有对account.balance做反向修正。这是从代码结构可以明确推断出的行为细节在实际使用该接口时需要注意。五、数据模型与预置数据5.1 账户Account结构创建成功或查询返回的账户对象具有如下结构{ user: Yohan, currency: EUR, description: Yohans budget, balance: 100, transactions: [] }其中user是唯一标识currency为货币代码或符号balance为服务端维护的当前余额transactions为交易数组。5.2 交易Transaction结构{ id: e2b3c7f2a1d94f8b8a1d4e6f7a1b2c3d, date: 2020-07-23T18:25:43.511Z, object: Bought a book, amount: -20 }id由服务端基于date object amount的 MD5 生成amount为负数表示支出、正数表示收入。5.3 内置 test 账户服务启动时内存数据库会预置一个test账户server.js{ user: test, currency: $, description: Test account, balance: 75, transactions: [ { id: 1, date: 2020-10-01, object: Pocket money, amount: 50 }, { id: 2, date: 2020-10-03, object: Book, amount: -10 }, { id: 3, date: 2020-10-04, object: Sandwich, amount: -5 } ] }这正是 3-data 课程 中建议学习者直接登录test账户查看仪表盘效果的原因——它自带三条示例交易无需手动造数据。六、中间件与 CORS 跨域配置前端应用运行在localhost:3000而 API 运行在localhost:5000两者属于不同源端口不同即跨域。浏览器默认的同源策略会拦截这种跨端口通信因此服务端必须显式授权。server.js中的关键配置server.jsapp.use(cors({ origin: /http:\/\/(127(\.\d){3}|localhost)/})); app.options(*, cors());解析如下origin使用正则只允许来源为http://localhost:*或http://127.0.0.1:*含 127.x.x.x 整段的跨域请求即仅限本机开发环境其他来源一律不授权——这与内存存储一样属于面向教学的安全简化app.options(*, cors())统一处理浏览器跨域请求前自动发送的 OPTIONS 预检preflight请求确保 POST 等含自定义头的请求能够通过body-parser双解析器让 API 同时兼容 JSON 与表单编码两种请求体降低前端调用门槛。从 4-state-management 课程 中可以进一步看到这套配置的实际价值课程演示外部修改数据导致本地缓存过期时直接在终端用 curl 向 5000 端口 POST 交易随后刷新 3000 端口的前端页面即可看到新数据——跨端口协作正是依赖这段 CORS 配置才得以成立。七、使用 api.http 与 VS Code REST Client 调试接口仓库自带了完整的接口调试脚本 api.http它面向 VS Code 的REST Client 扩展在扩展市场搜索 REST Client 即可安装文件头部注释也说明了这一点按顺序执行即可完成一次完整的创建账户 → 查询 → 加交易 → 删交易 → 删账户全流程演练。7.1 检查服务器信息GET http://localhost:5000/api/7.2 创建账户表单编码POST http://localhost:5000/api/accounts/ Content-Type: application/x-www-form-urlencoded usersinediedcurrency$balance50这里演示了urlencoded解析器的用法请求体不采用 JSON而是keyvaluekeyvalue的键值对形式。7.3 查询账户GET http://localhost:5000/api/accounts/sinedied7.4 删除账户DELETE http://localhost:5000/api/accounts/sinedied7.5 添加交易JSONPOST http://localhost:5000/api/accounts/sinedied/transactions Content-Type: application/json { date: 2020-07-24, object: Bought book, amount: -20 }注意顺序必须先创建账户才能向该账户添加交易否则会得到404。7.6 删除指定交易DELETE http://localhost:5000/api/accounts/sinedied/transactions/8825ff3e8331277911174fd1b73ff889这里的8825ff3e8331277911174fd1b73ff889是上一步添加交易时服务端自动生成的 MD5 ID。实操时先在 7.5 的响应中找到id字段再替换到本请求中。每个###分隔符把脚本切分为独立的请求块在 REST Client 中可单独逐个发送。另外课程文档中也提供了纯 curl 的等效操作例如模拟外部新增交易的命令curl --request POST \ --header Content-Type: application/json \ --data { \date\: \2020-07-24\, \object\: \Bought book\, \amount\: -20 } \ http://localhost:5000/api/accounts/test/transactions八、与前端应用的联调方式8.1 前端中的 API 地址约定银行前端解决方案 7-bank-project/solution/app.js 顶部定义了const serverUrl http://localhost:5000/api; // reserved for future server swap这个常量与 API 服务默认端口 5000、统一前缀/api源码 server.js 中的app.use(apiPrefix, router)一一对应。注释reserved for future server swap表明该地址预留给从本地模拟数据切换为真实 API 服务的场景——当前版本前端内部以 localStorage 模拟了账户与交易逻辑但serverUrl已为对接真实 API 做好准备。8.2 课程中的真实 fetch 调用3-data 课程 演示了前端如何真正消费本 API 的GET /api/accounts/:user端点async function getAccount(user) { try { const response await fetch(//localhost:5000/api/accounts/ encodeURIComponent(user)); return await response.json(); } catch (error) { return { error: error.message || Unknown error }; } }要点包括fetch默认发起 GET 请求用encodeURIComponent(user)安全编码用户名防止#、等特殊字符破坏 URL服务端返回的{ error: ... }结构被前端作为统一的错误信号处理。4.3 节的服务端404响应正是这条链路上前端显示账号不存在消息的数据来源。8.3 登录校验的数据闭环前端登录函数调用getAccount(user)后判断有error字段则提示失败否则把账户对象存入全局状态并跳转仪表盘。而test账户的预置数据让学习者无需任何前置操作即可验证完整闭环。整个调用的数据流向为前端表单 →fetchGET 请求 →server.js中db[req.params.user]查询 → JSON 响应 → 前端渲染余额与交易列表。九、使用限制与注意事项结合文档声明与源码实现使用本 API 时有以下几点需要明确数据不持久化所有账户与交易存于内存对象db服务重启即清空仅剩test账户——教学够用生产不可用源码注释已明示无身份认证user只是账户名标识不涉及密码校验任何知道用户名的请求都能读取、修改其数据仅适合学习演示CORS 仅限本机跨域白名单正则只放行localhost与127.0.0.1来源无法直接部署为公网服务删除交易不回滚余额从 server.js 的代码结构看删除交易仅移除记录不修正account.balance交易 ID 的确定性相同date object amount会产生相同 MD5 ID因此完全相同的交易会被判重拒绝409。十、延伸学习路径原文档在预建 API之外也为想亲手实现类似后端的学习者指明了方向一套聚焦 Node.js 入门的视频系列其中第 1721 集逐行讲解的正是这个 API 的构建过程以及一个 Express API 交互式教程。此外仓库本身提供了完整的配套材料银行项目四节课程HTML 模板与路由、登录注册表单、数据获取与使用、状态管理可运行的完整实现7-bank-project/solution/app.js 及 7-bank-project/solution/index.html接口调试脚本7-bank-project/api/api.httpAPI 源码7-bank-project/api/server.js。推荐的学习顺序是先按本文第三、四节启动并逐个调用六个端点再结合api.http跑通完整流程最后回到 3-data 课程 用前端页面体验登录 → 取数 → 渲染的端到端效果从而完整掌握一个前后端分离的 REST API 项目从启动、调试到联调的全部环节。【免费下载链接】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），仅供参考