仅展示类型页面的高效编写代码的思维模式与方法

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

简介

本文档旨在记录前端开发过程中的一种特殊情况：在没有后端接口的情况下，前端可以自由定义字段进行业务开发。当后端接口完成后，使用适配器将后端数据结构和字段适配修改为前端需要的结构和字段，而不改变前端页面任何代码的情况下进行接口对接。

开发流程

1. 前端业务开发（无后端接口）
   ○ 前端进行业务开发，可以自由定义字段和数据结构。
   ○ 为了规范数据的处理和展示，前端需要定义好所需的TypeScript类型、注释，用于声明数据的结构和字段。
2. 接口对接函数开发
   ○ 这部分，建议在src下的一个单独文件夹 储存所有接口请求函数，同时推荐个人vscode插件apidoc2ts
3. 适配器设计与实现
   ○ 编写一个适配器，将后端提供的数据结构和字段适配修改为前端需要的结构和字段。
   ○ 适配器可以在前端请求后端数据时进行数据转换，使得前端页面可以直接使用后端数据进行展示，而无需修改任何前端代码。
   适配器设计原理
   ● 适配器通过监听前端的数据请求，在数据返回前对数据进行转换。
   ● 将后端数据结构和字段映射到前端需要的结构和字段，保证前端页面能够正常展示数据。

结论

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