浅谈前后端分离规范

前言

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

开发流程

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数据传输中一律使用字符串，具体日期格式因业务而定。

转载：https://blog.csdn.net/qq_38209578/article/details/112360528