前后端数据传输约定探讨
<h1 style="color: black; text-align: left; margin-bottom: 10px;">1 目的</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">稳定<span style="color: black;">靠谱</span>,降本增效</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="//q8.itc.cn/images01/20240708/a45ecd91623449a780ba7db614a367ef.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">前后端数据传输约定旨在<strong style="color: blue;"><span style="color: black;">提高</span>系统稳定性、<span style="color: black;">靠谱</span>性</strong>,降低线上线下bug率;并<strong style="color: blue;"><span style="color: black;">提高</span><span style="color: black;">开发</span>效率、降低沟通成本</strong>、降低延期率。是<span style="color: black;">保证</span>项<span style="color: black;">日前</span>端和后端<span style="color: black;">研发</span>顺利进行的重要规约之一,定义了前端与后端交互的规则和标准。</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">2 数据传输约定</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.1 数据向后端传递,及在前端流转</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="//q9.itc.cn/images01/20240708/1dd69ded1cb447ee8ae664be60c519f2.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.前端URL传参:原则上只允许传id参数,<span style="color: black;">尽可能</span>不要在URL中传入中文参数及<span style="color: black;">相关</span>状态判断参数。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.数据提交:<span style="color: black;">知道</span>表单数据类型,<span style="color: black;">包含</span><span style="color: black;">是不是</span>必填校验、multipart数据以及其他<span style="color: black;">繁杂</span>类型数据。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.参数规范:<span style="color: black;">仔细</span>描述接口所需的参数,<span style="color: black;">包含</span>参数名<span style="color: black;">叫作</span>、类型、<span style="color: black;">是不是</span>必填、默认值、示例等。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.2 数据从后端返回到前端</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="//q2.itc.cn/images01/20240708/c34eaad4354045208515eec7a90ab1da.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.正常数据格式:需定义单个数据、<span style="color: black;">繁杂</span>数据、可能有的数据、无数据、分页数据、校验数据、特殊数据以及认证加密数据的格式。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.<span style="color: black;">反常</span>数据格式:需<span style="color: black;">包括</span><span style="color: black;">反常</span>状态码、<span style="color: black;">反常</span>名<span style="color: black;">叫作</span>、数据格式、错误类型码、<span style="color: black;">反常</span><span style="color: black;">出现</span>位置以及<span style="color: black;">反常</span>描述,以便于前端正确处理和<span style="color: black;">表示</span>错误信息。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.性能<span style="color: black;">需求</span>:接口的响应时间、并发处理能力、健壮性、稳定性、故障恢复、安全性等性能指标。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">【<span style="color: black;">办法</span>】</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•脚手架统一,建项目等。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•错误码标准:与http code对应<span style="color: black;">创立</span>统一标准的code码<span style="color: black;">暗示</span>,标识错误码内容(规则,位数默认规则)和格式。</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">3 文档沟通规范</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">前后端服务接口应文档化,<span style="color: black;">保证</span>接口与文档先于前端<span style="color: black;">研发</span>,以便<span style="color: black;">研发</span>人员能够准确理解和<span style="color: black;">运用</span>接口。文档应<span style="color: black;">包括</span>接口<span style="color: black;">位置</span>、请求方式、请求参数、返回结果等<span style="color: black;">仔细</span>信息;其中请求方式和返回结果需依据<span style="color: black;">制品</span><span style="color: black;">规律</span>确定。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="//q7.itc.cn/images01/20240708/d36aba2fb9714006b2c05830b186d298.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.RESTful API设计风格:这是一种基于HTTP协议的API设计风格,<span style="color: black;">经过</span><span style="color: black;">运用</span>HTTP动词、URI和HTTP状态码来<span style="color: black;">暗示</span>对资源的操作和请求结果,使接口设计更加简洁明了。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.URL规范:接口的URL结构,<span style="color: black;">包含</span><span style="color: black;">基本</span>路径、接口名以及参数传递方式(如<span style="color: black;">查找</span>参数、表单数据、JSON格式的请求体等)。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.接口版本<span style="color: black;">掌控</span>:为了<span style="color: black;">保准</span>接口的兼容性和可<span style="color: black;">守护</span>性,必要时可对接口进行版本<span style="color: black;">掌控</span>。<span style="color: black;">能够</span>在URI中加入版本号或<span style="color: black;">运用</span>请求参数来区分版本信息。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.参数传递方式:<span style="color: black;">知道</span>参数的传递方式,<span style="color: black;">包含</span>GET、POST、PUT、DELETE等方式以及参数的格式(如JSON、表单等)。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5.返回结果格式:接口返回结果应<span style="color: black;">运用</span>统一的格式,<span style="color: black;">包含</span>状态码、错误信息、数据等。<span style="color: black;">意见</span><span style="color: black;">运用</span>JSON格式,以方便<span style="color: black;">暗示</span><span style="color: black;">繁杂</span>的数据结构。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">【<span style="color: black;">办法</span>】</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•接口文档工具统一和推广:可确定<span style="color: black;">选择</span>Japi或藏经阁</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">4 架构设计和数据结构</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.1 前端规则</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="//q7.itc.cn/images01/20240708/1e25486485614e59b90dda3f6a89f842.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.体验优先:尽可能优化用户体验操作<span style="color: black;">过程</span>,满足<span style="color: black;">制品</span><span style="color: black;">需求</span>,并<span style="color: black;">即时</span>提出交互<span style="color: black;">意见</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.SDK版本<span style="color: black;">守护</span>:多个系统调用前端<span style="color: black;">位置</span>或sdk时,需做好版本<span style="color: black;">守护</span>,特殊场景最好固定特殊版本,严格<span style="color: black;">掌控</span>通用版本的升级。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.防抖节流:前端请求防抖策略,函数节流策略。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.代码合并:代码合并至main分支时,务必<span style="color: black;">保准</span>自<strong style="color: blue;">己的代码是基于main分支的最新提交拉</strong>取的代码(<span style="color: black;">能够</span>先从main再拉出个hotfix分支,先和并至hotfix分支后,再合并至main分支)。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">【<span style="color: black;">办法</span>】</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•行云代码合并检测。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•加版本号,严格版本管理。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.2 架构<span style="color: black;">方法</span>设计</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.架构设计和代码实现解耦:架构设计<span style="color: black;">按照</span><span style="color: black;">制品</span><span style="color: black;">规律</span>设计系统功能的架构<span style="color: black;">方法</span>、数据传输交互、技术选型、<span style="color: black;">规律</span><span style="color: black;">方法</span>;代码实现则<span style="color: black;">重点</span>侧重于<span style="color: black;">详细</span>程序编码、规范、<span style="color: black;">详细</span>数据处理。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="//q0.itc.cn/images01/20240708/ca48e6c1bee64b8ba8143ca5693bb08d.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.前端<span style="color: black;">规律</span>扩展性:前端设计依据<span style="color: black;">制品</span>交互<span style="color: black;">规律</span>,需<span style="color: black;">思虑</span>交互<span style="color: black;">规律</span>扩展性;数据处理中需<span style="color: black;">重视</span>深拷贝问题。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="//q9.itc.cn/images01/20240708/c3bab555134d42249dcebe5e06d463ad.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.后端接口易用性:后端设计可<span style="color: black;">按照</span><span style="color: black;">自己</span><span style="color: black;">需求</span>定制,但给到前端接口的数据结构需要依据<span style="color: black;">制品</span>业务<span style="color: black;">规律</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.前后端分离:提前约定数据结构,并按数据结构进行<span style="color: black;">研发</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.前端直接暴露公网的,要做好安全防范,防止XSS,CSRF等攻击,<span style="color: black;">触及</span>数据隐私、传输、攻击的续作加密解密处理。后端接口则需做SSRF攻击防范。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">【<span style="color: black;">办法</span>】</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•前后端耦合系统做分离(<span style="color: black;">研发</span>分离,发布分离)</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•重点类型规则:金额、时间等重点核心数据枚举类型。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.3数据结构设计</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="//q9.itc.cn/images01/20240708/2afc3d1af651438a974c008969746d07.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.数据结构恒定性:前后端约定好的字段和类型<span style="color: black;">不该</span>轻易改动,若有改动需<span style="color: black;">即时</span>提前<span style="color: black;">通知</span>对方。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.鲁棒边缘性设计:接口需<span style="color: black;">思虑</span>极端<span style="color: black;">状况</span>下的限定,定义必须清楚(如<span style="color: black;">区别</span>类型字段为空时,为null时,为无穷大时,为负时等)。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.数据结构简洁:数据接口字段应遵循尽<span style="color: black;">知道</span>,尽简单,尽少量,尽少层,尽可能都用,可扩展。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.数据类型一致性:前后端数据类型一致性。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5.【<span style="color: black;">尤其</span>约定】:后端<span style="color: black;">不可</span>用int类型接受前端传值(int默认值为0);若用Int类型接收,则务必进行包装处理<span style="color: black;">反常</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.4 安全与健壮</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="//q7.itc.cn/images01/20240708/06c7dfa8be77414c83bbf960f3032301.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.前后端接口数据校验:重要数据传输(如<span style="color: black;">花费</span>资金等),后端须做接口兜底校验,<span style="color: black;">同期</span>前端需要做<span style="color: black;">规律</span>校验(<span style="color: black;">乃至</span>加解密机制);还<span style="color: black;">包含</span>三方接口<span style="color: black;">运用</span>的兜底处理和预警。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.请求头约定:前后端应约定请求头,而不是只用系统默认(jdk<span style="color: black;">区别</span>版本接受数据的默认请求头可能不<span style="color: black;">同样</span>)。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.接口一致性:同一功能的<span style="color: black;">增多</span>和修改等应<span style="color: black;">尽可能</span>为同一接口;若否,则需说明理由。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.日志记录:接口<span style="color: black;">规律</span>需要清晰必要的日志进行记录,方便<span style="color: black;">查找</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">5.接口防抖,幂等:必要时后端服务<span style="color: black;">亦</span>需做防抖(如用户点错某一<span style="color: black;">规律</span>,又快速点击另一<span style="color: black;">规律</span>等)。。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">6.混沌实验:必要时,需要做混沌工程实验,演练最小化“爆炸半径”。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.5 DSL规约</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">按照</span>对DSL(Domain Specific Language)的<span style="color: black;">运用</span><span style="color: black;">状况</span>,<span style="color: black;">选取</span>sdl规约的分级策略;即<span style="color: black;">按照</span><span style="color: black;">详细</span>业务<span style="color: black;">规律</span>的<span style="color: black;">繁杂</span>度来<span style="color: black;">思虑</span>遵循规约的量级。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="//q0.itc.cn/images01/20240708/70d0a4d4cfb144f2b95cc8810ff7893a.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•<span style="color: black;">针对</span>只展示不修改类场景,前端可直接做好dsl存给服务端<span style="color: black;">就可</span>。如cdp的图状<span style="color: black;">规律</span>展示。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•<span style="color: black;">针对</span>前后端都需要<span style="color: black;">运用</span>的dsl数据,尽可能把数据分成实体数据和展示数据两部分,前后端需<span style="color: black;">一起</span><span style="color: black;">守护</span>实体数据;尤其单线流程场景。如领航者的流程编排。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">•<span style="color: black;">针对</span>前后端都需要用到的更<span style="color: black;">繁杂</span>流程<span style="color: black;">规律</span>判断类的<span style="color: black;">制品</span>,则需要<span style="color: black;">守护</span>dsl的<span style="color: black;">区别</span>版本。如摹略的画布<span style="color: black;">规律</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="//q7.itc.cn/images01/20240708/570146f1ffc84fddaf50d7ff338d05c2.png" style="width: 50%; margin-bottom: 20px;"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.一套:前后端<span style="color: black;">一起</span><span style="color: black;">守护</span>并解析<span style="color: black;">运用</span>同一套数据。两部分:数据最好能区分前端自用字段和前后端公用字段。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.约定好前端自用字段<span style="color: black;">增多</span>的规则和限制(长度等)。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.<span style="color: black;">一起</span>约定公用字段的增减规则(类型和层级等)。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.更<span style="color: black;">繁杂</span>场景里,<strong style="color: blue;">可用<span style="color: black;">区别</span>版本,或协议版本</strong>;<span style="color: black;">亦</span><span style="color: black;">能够</span>只存1部分数据,前后端分别解析,<span style="color: black;">守护</span><span style="color: black;">区别</span>版本。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">{</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">code:,或数字约定</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">data:{},</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">msg:</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">}</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">思路</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">5 实践方式</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">新项目迭代</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">针对</span>新项目可直接<span style="color: black;">按照</span><span style="color: black;">详细</span><span style="color: black;">需要</span><span style="color: black;">按照</span>本规范执行<span style="color: black;">就可</span>。执行过程中可<span style="color: black;">按照</span><span style="color: black;">需要</span>的<span style="color: black;">实质</span><span style="color: black;">状况</span>得到<span style="color: black;">详细</span><span style="color: black;">制品</span>线的细则。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">老项目升级</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.<span style="color: black;">针对</span>老项目,前后端需经过<span style="color: black;">周期</span>性自查,尤其针对这些可能直接影响系统稳定性的核心条款,必须严格自查。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.自查后,记录系统存在的相应隐患问题,再做出更新计划,最好在接下来的迭代中就能完成;必要时,<span style="color: black;">亦</span>可按Q或H维度计划完成。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.其他规约条款,尽可能的形成本系统的<span style="color: black;">实质</span>规范约定,前后端<span style="color: black;">一起</span>遵守,<span style="color: black;">加强</span>沟通效率,降低bug率。</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">6 总结</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">前后端数据传输约定是<span style="color: black;">保证</span>互联网<span style="color: black;">制品</span>顺畅运行的关键环节,它<span style="color: black;">触及</span>到数据的格式、传输方式、安全性等多个方面。本文<span style="color: black;">重点</span>探讨交互的<span style="color: black;">详细</span>环节。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">总之,<span style="color: black;">按照</span><span style="color: black;">详细</span>业务的<span style="color: black;">区别</span>,以及技术的<span style="color: black;">持续</span>发展完善,<span style="color: black;">咱们</span>还需要<span style="color: black;">持续</span>在实践中完善和改进这些规约,以适应新的<span style="color: black;">需要</span>和挑战。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">欢迎兄弟们<span style="color: black;">一起</span>交流探讨
页:
[1]