我不想等后端出接口字段了!!

背景(问题)

前端开发和后端开发是同时进行的项目,但是后端接口出来后,还要跟后端开发去博弈一下,谁改?改多少?从而让前后端数据接口字段结构能接通使用。

解决思路

在没有后端接口的情况下,前端可以自由定义字段进行业务开发。当后端接口完成后,使用适配器将后端数据结构和字段适配修改为前端需要的结构和字段,而不改变前端页面任何代码的情况下进行接口对接。

INFO

从自定义字段到后端数据对接的适配器设计,思想上,类似于设计模式中的适配器模式

开发流程

  1. 前端业务开发(无后端接口)
    • 前端使用 Vue 进行业务开发,可以自由定义字段和数据结构。
    • 为了规范数据的处理和展示,前端需要定义好所需的 TypeScript 类型、注释,用于声明数据的结构和字段。
  2. 接口对接函数开发
    • 这部分,将通过 api2ts 这个vscode扩展,对 java 文档进行解析,生成对应请求函数和 TS 类型,以及初始
  3. 适配器设计与实现
    • 编写一个适配器,将后端提供的数据结构和字段适配修改为前端需要的结构和字段。
    • 适配器可以在前端请求后端数据时进行数据转换,使得前端页面可以直接使用后端数据进行展示,而无需修改任何前端代码。

代码示例

https://play.vuejs.org/#eNqlVltvG0UU/iuj5cFO5e7WLk8bJ6hAJYqgVKRv3T5s1mNnk71pZ9exsVZKSympGidBogQCVZtSoXAptChtQi7wZzLO+ql/gTMzu+t1bo1US4lnzjlz7uc77kiXPE9uhlhSpSoxfNMLEMFB6CFLdxpjmhQQTRrXHNP2XD9AxpRp1cqo7rs20iRZEXf2XpOGhSqHhCqpUFURZkApXAJse5YeYLghVK2ZTUSCtoXBcM0kwGmrqG7h1ih3AsGnKkyOVxPbQ+RKSq4IfQoohFNVyZmRSpLw87yte/I0cR0IvcPEtYQBEauIUxhNmGGkowEjFGlOBBoDYrhO3Wwc0me4tmda2P/MC0zXGdarW5Y7+zGnBX6ISwN72Jg5hj5NWsKJaz4m2G+CAxkv0P0GDgT78sRV3IJzxrTdWmiB9CnMzzFxrZD5KMTeD50auJ2T495e4ekxncZ1crkVYIekQTFHeTa4vCZBej44JfSBuxfld/NZbHtYDgjkTzl3TvOBcw7Rne2D3+/Tb/bocvfg1+3+ysbr3YX9rW9p9xadv9tbXI+7y0Dpr73sP3zSW7jXW1+jD1cQ8Oi9v/e3tunT1f2t3/pfrgPlYPUOeHawc2d/5xXX0o1/uUUf393fmotfbgqDCvtif7jFm9nRbUw83cBJ70/wc4cLwwccRfTFg4On26Cczq/Ea+u9B8973T8TTQglelhsqKYH+icmCa5APw7poHO72QOEmroVYtUJ7Unsj+allrv02UpOkDmnksCHkiRyUep+djg+jsppcZwSgU0aaAxmlJnMTEHpBnNxNiDpIB/XUSRAogDPCgNWPtGphKwkzXFE7kPI6QTMg2nggTBLdEKEBzCbJMiSD/6D7QRHuBU5X5cbN8eLNzTn5gjDJ0hLvLhJl74TKWFNs7PYn7vd/6pLf1inizv03xU6/5ylyjniTnFEDqawU4R5HRvnzZ/akXmFuSME8gemzoqKDAzV8uikbsw0fBfGVPVxbdRwLddX36nX6wOcDK3kBGfLRM3zddcHBSboLiHTqeEW/M880iSkzuA2E2AsUNPpICYrs8ZBUaSmd+F6FFUVy0xtKYmxkwB3sAHO2B1QoHxvjB4qetK9xzWHqLVo06zMQl4G6nix8BEGLCu8Vc7RJOTgmKxDjsBGBHB2ci5yrSmwLpuIN/R9Mm2KggDjevcfxX9t9l7cpl/vQW8yhk7ajoHqoWMwxEWAsJcY5VPXmGFNWS6OqOgaKDUJriZzDxVXc8MMgBLaeUIEw5BihA/l8h2kz+omoAmeTXUVWX+7VhOXQGQaG8EIGsseIVbl66aN3TAoFoc5TCV/COOWkSCH+UviYuGLKatQGmZwVwuVMk9MSoQF9CZVpjNDHHf2BHUXT1QHgJCcoxIqX7iQXGF4U7RlCM23FewT2DminACnGV4AfMQbj+KNn0XpMkyh/7yK9/7odZ8ICl36vje/3P9pDrYTQ+PHm/TZcoLGCRYfqvVR6PF0X7fJeyrSnXau7qeAXpotiKKs5nsr2wNitKBoMFqiDY7psUwJqrzeXRUB8SB26e5S/N+P8dqCiJUtbZ4YsbpBJiCZqaTZwJYMv9KKDHiGeifh5wrMV6FAKKhzrm5imaKrfJtyTTLUelDMoTJK0f923Ctkopen in new window

适配器设计原理

  • 适配器通过监听前端的数据请求,在数据返回前对数据进行转换。
  • 将后端数据结构和字段映射到前端需要的结构和字段,保证前端页面能够正常展示数据。

结论

通过适配器的设计,前端可以在没有后端接口的情况下进行业务开发,并在后端接口完成后进行数据对接,而无需修改任何前端页面代码,极大地提高了开发效率和灵活性。且在后续过程,可以更容易的将组件构建为可复用的业务组件,降低重构难度。

2024-9-11 的新理解

有一个叫展示器(presenter)的概念,这其实是采用谦卑对象模式的一种形式。

这个文章里面有谦卑对象模式的简单描述 👆

展示器

之前提到的适配器,功能更严格的来说,就可以借鉴这个展示器的概念:

“展示器则是可测试的对象。展示器的工作是负责从应用程序中接收数据,然后按视图的需要将这些数据格式化,以便视图将其呈现在屏幕上。例如,如果应用程序需要在屏幕上展示一个日期,那么它传递给展示器的应该是一个 Date 对象。然后展示器会将该对象格式化成所需的字符串形式,并将其填充到视图模型中。
如果应用程序需要在屏幕上展示金额,那么它应该将 Currency 对象传递给展示器。展示器随后会将这个对象按所需的小数位数进行格式化,并加上对应的货币标识符,形成一个字符串存放在视图模型中。如果需要将负数金额显示成红色,那么该视图模型中就应该有一个简单的布尔值被恰当地设置。"
-- 《架构整洁之道》

这里的展示器就类似于我构思的适配器,就是为了数据格式化,当然也有所不同:

  • 适配器:为了让后端数据格式 转换成前端所需数据格式
  • 展示器:为了让前端展示的数据转换成可以直接渲染出来的内容

以目前主流的前端框架 vue react 来说,其实可以先设置一个适配器去适配字段,再设置一个展示器来对数据进行格式化,最后将数据赋值到视图模型(响应式数据对象)中。
前端的交互,若会影响视图的变化,可以让其去调用展示器,展示器才去负责控制视图模型(响应式对象)

uml diagram
最后更新日期 6/24/2025, 10:29:18 AM