Web-Dev-For-Beginners 银行项目 API 实战指南：Node.js + Express 构建账户与交易后端服务

Web-Dev-For-Beginners 银行项目 API 实战指南Node.js Express 构建账户与交易后端服务【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners导读本文围绕 Web-Dev-For-Beginners 仓库中7-bank-project/api的官方 API 文档系统讲解如何快速启动一个基于 Node.js Express 的银行后端服务深入剖析其全部 5 条 REST 路由、请求/响应契约与错误码并结合 server.js 源码逐段解析内存数据库、MD5 事务 ID、余额联动与 CORS 配置的实现细节帮助你理解前端银行应用与后端 API 如何协同工作。一、API 在银行项目中的角色在 7-bank-project 这一虚构银行项目中api子目录是整个课程练习的后端支撑。项目由四课组成——HTML 模板与路由、登录注册表单、数据获取与使用、状态管理——而所有课程的数据读写都依赖这个 API。该 API 官方文档英文原文捷克语译本见 translations/cs/7-bank-project/api/README.md明确说明API 已预先构建完毕不属于练习的一部分。学习者的核心任务在前端但理解 API 的接口契约是完成练习的前提。从源码结构看整个后端仅由两个文件构成非常精简server.js全部业务逻辑约 200 行package.json依赖与启动脚本定义依赖清单来自 package.json依赖版本用途express^4.21.2Web 框架路由与中间件body-parser^1.20.3解析 URL-encoded 与 JSON 请求体cors^2.8.5跨域资源共享中间件eslintdev^7.5.0代码检查prettierdev^2.0.5代码格式化前端应用通过http://localhost:5000/api访问该服务见 solution/app.js 中serverUrl常量的定义二者分别运行在3000与5000端口构成典型的前后端分离开发架构。二、环境准备与服务器启动2.1 前置条件根据官方文档唯一硬性要求是安装Node.js。仓库 package.json 中声明了运行环境约束node: 10即 Node.js 10 及以上版本即可满足要求。2.2 启动步骤官方文档给出了完整的四步流程克隆仓库将 Web-Dev-For-Beginners 仓库克隆到本地进入 API 目录cd 7-bank-project/api仓库根目录下的路径与文档中Web-Dev-For-Beginners/7-bank-project/api对应安装依赖执行npm install等待依赖安装完成耗时取决于网络状况启动服务执行npm startnpm start实际执行的是node server.js见 package.json 的 scripts 配置。2.3 端口与运行模式启动后服务器监听在5000 端口。源码中端口定义如下server.jsconst port process.env.PORT || 5000;即可以通过环境变量PORT覆盖默认端口。文档特别强调该服务器需要与主银行应用服务器监听 3000 端口同时运行不要关闭它。前端应用依赖此 API 获取账户数据关闭会导致登录、注册、交易查询全部失效。2.4 重要限制数据仅存于内存注意所有条目存储在内存中不会持久化保存因此当服务器停止时所有数据都会丢失。这是本 API 最重要的特性之一源码中的注释也明确标注server.js// Store data in-memory, not suited for production use! const db { ... };实际影响每次重启服务器账户与交易数据清空数据库内置了一个test测试账户余额 75含 3 条示例交易供前端练习直接登录使用该设计完全适合教学场景但不适合生产环境三、API 接口全览官方文档给出的路由表如下路由说明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删除指定交易所有路由统一挂载了/api前缀这是通过一行代码实现的server.jsapp.use(apiPrefix, router);下面逐一结合源码深入解析每个接口的实现细节。四、接口逐条深度解析4.1 获取服务器信息GET /api/实现代码server.jsrouter.get(/, (req, res) { return res.send(${pkg.description} v${pkg.version}); });该接口返回一个纯文本字符串由 package.json 中的descriptionBank API与version1.0.0拼接而成即响应体为Bank API v1.0.0。实用价值这是前端课程中验证 API 是否正常运行的标准命令在 2-forms/README.md 和 3-data/README.md 中均有使用curl http://localhost:5000/api # 期望响应: Bank API v1.0.04.2 创建账户POST /api/accounts/请求体示例官方文档{ user: Yohan, description: My budget, currency: EUR, balance: 100 }源码实现server.js包含一套完整的参数校验逻辑校验 1必填参数——user与currency缺失时返回{ error: Missing parameters }状态码400。校验 2账户唯一性——若db[req.body.user]已存在返回409{ error: User already exists }校验 3余额类型转换——balance若为非数字字符串会尝试parseFloat()转换转换失败isNaN返回400{ error: Balance must be a number }创建账户对象时description缺省为{user}s budgetbalance缺省为0transactions初始为空数组const account { user: req.body.user, currency: req.body.currency, description: req.body.description || ${req.body.user}s budget, balance: balance || 0, transactions: [], }; db[req.body.user] account; return res.status(201).json(account);成功时返回201 Created及完整账户对象。注意user在这里充当了内存数据库的键这也解释了为何系统强制要求用户名唯一。4.3 查询账户GET /api/accounts/:user实现代码server.jsrouter.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); });通过 URL 路径参数:user直接作为内存对象的键查找账户不存在时返回404{ error: User does not exist }成功返回完整账户 JSON包含user、currency、description、balance、transactions五个字段内置测试账户的完整数据结构来自 server.js 与 3-data/README.md{ 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 } ] }课程中建议直接用用户名test登录即可立即看到带示例数据的仪表盘效果。4.4 删除账户DELETE /api/accounts/:user实现代码server.jsrouter.delete(/accounts/:user, (req, res) { const account db[req.params.user]; if (!account) { return res.status(404).json({ error: User does not exist }); } delete db[req.params.user]; res.sendStatus(204); });账户不存在返回404存在则直接从内存对象中delete并返回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包含 4 层校验与处理第 1 层账户存在性——账户不存在返回404。第 2 层必填参数——date、object、amount任一缺失返回400{ error: Missing parameters }第 3 层金额类型转换——amount经parseFloat()转换后若为NaN返回400{ error: Amount must be a number }第 4 层交易唯一性核心设计——使用 Node.js 内置crypto模块将date object amount拼接字符串做 MD5 哈希生成 32 位十六进制交易 IDserver.jsconst id crypto .createHash(md5) .update(req.body.date req.body.object req.body.amount) .digest(hex);若该 ID 已存在于账户的交易列表中返回409{ error: Transaction already exists }这保证了内容完全相同的交易不会重复添加幂等性设计。余额联动交易添加成功后余额自动更新server.jsaccount.balance transaction.amount;响应返回201 Created及带id的完整交易对象{ id: 8825ff3e8331277911174fd1b73ff889, date: 2020-07-24, object: Bought book, amount: -20 }4.6 删除交易DELETE /api/accounts/:user/transactions/:id实现代码server.jsrouter.delete(/accounts/:user/transactions/:id, (req, res) { const account db[req.params.user]; if (!account) { return res.status(404).json({ error: User does not exist }); } const transactionIndex account.transactions.findIndex( (transaction) transaction.id req.params.id ); if (transactionIndex -1) { return res.status(404).json({ error: Transaction does not exist }); } account.transactions.splice(transactionIndex, 1); res.sendStatus(204); });先校验账户存在性再通过findIndex查找交易交易不存在返回404{ error: Transaction does not exist }存在则splice移除并返回204 No Content注意与添加交易不同删除交易不会回滚余额——account.balance在删除路径中保持不变。这一点从源码可以确认。五、HTTP 状态码与错误契约汇总综合以上分析全部接口的错误与状态码约定可汇总如下状态码场景响应体200GET 查询成功、POST 添加成功部分接口为201数据对象/字符串201创建账户、添加交易成功创建的对象204删除账户/交易成功无响应体400缺少必填参数 / 数值类型非法{ error: ... }404账户或交易不存在{ error: ... }409账户已存在 / 交易已存在{ error: ... }前端课程在实现login()与register()时正是利用data.error字段判断请求失败并展示错误信息见 solution/app.js 与 3-data/README.md 中的getAccount模式。六、中间件与 CORS 配置解析服务初始化部分server.jsconst app express(); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.use(cors({ origin: /http:\/\/(127(\.\d){3}|localhost)/})); app.options(*, cors());body-parser同时启用 URL-encoded 与 JSON 两种解析器因此 api.http 示例中既可以用application/x-www-form-urlencoded提交表单也可以用application/json提交 JSONCORS 白名单origin正则只放行localhost或127.x.x.x域的跨域请求恰好覆盖前端开发服务器运行于localhost:3000的场景同时拒绝其他来源——这是一个面向教学环境的最小化安全策略app.options(*, cors())为预检请求OPTIONS放行保障前端带Content-Type头的跨域 POST 请求能够正常通过七、用 api.http 快速联调仓库提供了一个非常实用的联调脚本 api.http配合 VS Code 的 REST Client 扩展即可在不写任何前端代码的情况下验证全部接口。文件开头注释说明了依赖# You need REST Client extension for VS Code to use this file脚本按顺序覆盖了 5 条核心链路GET http://localhost:5000/api/ POST http://localhost:5000/api/accounts/ Content-Type: application/x-www-form-urlencoded usersinediedcurrency$balance50 GET http://localhost:5000/api/accounts/sinedied DELETE http://localhost:5000/api/accounts/sinedied POST http://localhost:5000/api/accounts/sinedied/transactions Content-Type: application/json { date: 2020-07-24, object: Bought book, amount: -20 } DELETE http://localhost:5000/api/accounts/sinedied/transactions/8825ff3e8331277911174fd1b73ff889注意最后一条 DELETE 中的交易 ID 并非随意编写而是对2020-07-24 Bought book -20做 MD5 的结果——与POST创建交易时生成的 ID 一致这正是 MD5 确定性哈希的特性。你可以用任意 Node.js 环境验证node -e console.log(require(crypto).createHash(md5).update(2020-07-24 Bought book -20).digest(hex)) # 输出: 8825ff3e8331277911174fd1b73ff889八、API 与前端课程的协作模式理解 API 之后可以看到它与四课内容形成完整闭环课程与 API 的关联1. HTML 模板与路由搭建应用骨架为后续 API 数据展示准备 DOM 结构2. 登录注册表单通过POST /api/accounts/注册、GET /api/accounts/:user登录验证3. 数据获取与使用核心课程用 Fetch API 调用本后端处理异步响应与错误4. 状态管理管理从 API 获取的账户数据在前端的持久化与刷新前端完整实现位于 solution/app.js其中 serverUrl 常量直接指向http://localhost:5000/api而课程练习3-data中展示的getAccount模式与curl http://localhost:5000/api连通性测试均以本 API 文档为前提。九、已知限制与学习建议限制文档与源码共同确认数据不持久化所有数据存于内存重启即清空官方文档明确提示server.js 注释也标注 not suited for production use!无身份认证API 不校验密码用户名即身份GET /api/accounts/:user可直接获取任意账户数据——这是刻意简化便于教学删除交易不联动余额从源码确认DELETE 路径不更新account.balance学习建议若想深入掌握该 API 的构建方式官方文档推荐了 Node.js 入门视频系列视频 17–21 覆盖本 API与 Express API 交互式教程可循此路径学习从零搭建动手实验时先启动 APInpm install npm start再启动前端应用两个终端窗口保持同时运行用curl命令逐步验证每个接口的请求与响应理解状态码语义后再进入前端联调结语7-bank-project/api虽是一个教学用途的精简后端却浓缩了 REST API 设计的核心要素路由组织、参数校验、错误契约、幂等设计、余额一致性维护与跨域配置。通过本文对 server.js 的逐段解读你不仅掌握了如何启动与调用这套接口更能理解其背后的实现取舍——这正是 Web-Dev-For-Beginners 课程先会用、再理解教学理念的体现。【免费下载链接】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），仅供参考