浅谈前后端分离规范

简介: 该文提出前后端协同开发规范,强调接口文档的重要性和实时同步。开发流程包括后端编写接口文档、开发和更新,前端依据文档Mock数据和联调。接口规范涉及返回数据的直接渲染、统一的JSON格式、分页及特殊内容处理,如Boolean用1/0表示,日期用字符串格式。此外,后端需提供接口变更实时通知和Mock数据支持,减少前端工作负担。

前言

本文的主要初衷就是规范约定先行,尽量避免沟通联调产生的不必要的问题,让大家身心愉快地专注于各自擅长的领域。前端开发负责页面的展示、交互体验越来越灵活、炫丽,响应体验也要求越来越高。后端开发负责服务的高并发、高可用、高性能、高扩展等特性。随着开发需求高度的提示,开发难度愈加苛刻,从而导致前后端研发各自专注于自己擅长,让专业的人做专业的事。

开发流程

  1. 后端编写和维护接口文档,在 API 变化时更新接口文档
  2. 后端根据接口文档进行接口开发
  3. 前端根据接口文档进行开发 + Mock平台
  4. 开发完成后联调和提交测试

开发实施

  • 接口文档服务器:可实现接口变更实时同步给前端展示。
  • Mock接口数据平台:可实现接口变更实时Mock数据给前端使用。
  • 接口规范定义:很重要,接口定义的好坏直接影响到前端的工作量和实现逻辑。

以极客Mock为例,Mock规范如下:
a.请求类型,默认POST
b.请求参数需包含:参数名、参数类型、是否必填、描述(如有必要需备注如何获取相关参数)、示例
c.返回示例需包含:code和data,其中data的参数名应为英文,需有对应注释的中文
d.浮动注释需包含:全局code和公共参数的注释

接口规范V1.0.0

一、规范原则
  • 接口返回数据即显示:前端仅做渲染逻辑处理;
  • 渲染逻辑尽量避免跨多个接口调用;
  • 前端关注交互、渲染逻辑,尽量避免业务逻辑处理的出现;
  • 请求响应传输数据格式:JSON,JSON数据尽量简单轻量,避免多级JSON的出现;
二、基本格式
2.1请求基本格式
a.GET请求:xxx/login?key1=value1&key2=value2
b.POST请求:xxx/login?key1=value1&key2=value2
2.2响应基本格式
{
   
    code: 200,
    data: {
   
        message: "success"
    }
}
//code: 请求处理状态
//200:请求处理成功
//500: 请求处理失败
//401: 请求未认证,跳转登录页
//406: 请求未授权,跳转未授权提示页
2.3响应列表和分页格式
{
   
    code: 200,
    data: {
   
        recordCount: 2,
        message: "success",
        totalCount: 2,
        pageNo: 1,
        pageSize: 10,
        list: [
            {
   
                id: 1,
                name: "XXX",
                code: "H001"
            },
            {
   
                id: 2,
                name: "XXX",
                code: "H001"
            } ],
        totalPage: 1
    }
}
//a.data.recordCount: 当前页记录数
//b.data.totalCount: 总记录数
//c.data.pageNo: 当前页码
//d.data.pageSize: 每页大小
//e.data.totalPage: 总页数
三、特殊内容规范
3.1下拉框、复选框、单选框

由后端接口统一逻辑判定是否选中,通过isSelect标示是否选中,示例如下:

{
   
    code: 200,
    data: {
   
        message: "success",
        list: [{
   
            id: 1,
            name: "XXX",
            code: "XXX",
            isSelect: 1
        }, {
   
            id: 1,
            name: "XXX",
            code: "XXX",
            isSelect: 0
        }]
    }
}

禁止下拉框、复选框、单选框判定选中逻辑由前端来处理,统一由后端逻辑判定选中返回给前端展示;

3.2 Boolean类型

关于Boolean类型,JSON数据传输中一律使用1/0来标示,1为是/True,0为否/False;

3.3 日期类型

关于日期类型,JSON数据传输中一律使用字符串,具体日期格式因业务而定。

相关文章
|
安全 网络安全 网络虚拟化
华为ensp模拟器实现通信安全(交换机配置vlan)
华为ensp模拟器,实现vlan隔离,将不同的交换机接口放入不同的vlan步骤以及实现原理, 交换机的access接口与trunk接口的功能以及实现步骤
1625 0
华为ensp模拟器实现通信安全(交换机配置vlan)
|
7月前
|
前端开发 数据可视化 UED
前端组件库——Semi Design知识点大全(一)
教程来源 https://www.qeext.cn Semi Design是字节跳动抖音前端与UED团队联合打造的企业级设计系统,涵盖设计语言、2800+ Design Tokens、React组件库、主题定制、D2C/CD2等完整生态,助力中后台应用高效实现设计研发协同与品牌一致性。
|
人工智能 API 调度
我用 n8n 教自动化,结果自己在干最蠢的活
作者本为学员免费开通n8n账号,却因频繁手动操作陷入效率困境。起初尝试全自动流程,反被滥用;最终引入“人在回路”(HITL)机制,结合自动化与人工审核,用飞书审批实现高效协作。真正高效的自动化,是让机器处理重复工作,人类专注核心决策。
|
数据采集 搜索推荐 数据管理
数据架构 CDP 是什么?
数据架构 CDP 是什么?
1118 2
|
Cloud Native Apache 流计算
福利「Flink Forward Asia 2023 」PPT 阅读合集!
福利「Flink Forward Asia 2023 」PPT 阅读合集!
4407 1
福利「Flink Forward Asia 2023 」PPT 阅读合集!
|
JSON JavaScript 前端开发
如何在 Postman 中发送 JSON 数据
我们将深入探讨使用 Postman 发送 JSON 数据这一主题,Postman 是一款强大的 API 测试和开发工具。无论您是经验丰富的开发人员还是新手,掌握这项技能对于高效的 API 测试和开发都至关重要。
|
人工智能 自然语言处理 JavaScript
我定制的通义灵码 Project Rules,用 AI 写出“更懂我”的代码
本文分享了一名全栈开发者使用通义灵码的经验,重点介绍了其新推出的“Project Rules”功能。通过定制规则,解决了团队代码风格不统一、AI生成代码不符合项目规范等问题。示例配置包括Vue 3 + Composition API的语法规范、命名约定、注释风格等。作者总结,该功能显著提升了编码效率和团队协作一致性,并建议用户根据自身需求定制规则以优化体验。文中还提出了对团队规则共享、行业模版内置等功能的期待。
开发指南002-前后端信息交互规范-概述
前后端之间采用restful接口,服务和服务之间使用feign
|
数据采集 监控 搜索推荐
数据收集方法
数据收集方法
1016 2

热门文章

最新文章