前后端分离开发规范

一、为什么要前后端分离

• 前后端可以身心愉快地专注于各自擅长的领域
• 避免后端写前端代码（基本上1天时间，20%写后端代码，80%写页面...）
• 前端配置后端代码运行环境（简直是要疯... 装一堆环境，而且有些开发环境是windows，前端是macos，装环境就要装好几天）
• 避免前后端打架，推诿，甩锅....
• 提高开发效率
• 分离有助于前端大放异彩，后端专注于三高。
• 太多了....

二、前后端分离存在的问题

前后端的对接界面双方却关注甚少，没有任何接口约定规范情况下各自干各自的，导致我们在产品项目开发过程中，前后端的接口联调对接工作量占比在30%-50%左右，甚至会更高。往往前后端接口联调对接及系统间的联调对接都是整个产品项目研发的软肋。本文的主要初衷就是规范约定先行，尽量避免沟通联调产生的不必要的问题，让大家身心愉快地专注于各自擅长的领域。

三、如何做分离

1、职责分离

• 前后端仅仅通过异步接口(AJAX/JSONP)来编程

• 前后端都各自有自己的开发流程，构建工具，测试集合

• 关注点分离，前后端变得相对独立并松耦合

后端	前端
提供数据	接收数据，展示数据
处理业务逻辑	处理渲染逻辑
Server-side MVC架构	Client-sideMV*架构
代码泡在服务器上	代码泡在浏览器上

 

2、开发流程

• 后端编写和维护接口文档，在 API 变化时更新接口文档

• 后端根据接口文档进行接口开发

• 前端根据接口文档进行开发 + Mock平台

• 开发完成后联调和提交测试

推荐几个接口规范工具：postman、eolinker，刚开始是用postman，后面团队开发后使用了eolinker，专业的活当然交给专业的人来做，这个是收费的，但是免费的基本上够中小型团队开发使用了。大家可以自行百度学习...

3、规范原则

• 接口返回数据即显示：前端仅做渲染逻辑处理；

• 渲染逻辑禁止跨多个接口调用；

• 前端关注交互、渲染逻辑，尽量避免业务逻辑处理的出现；

• 请求响应传输数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现；

四、基本格式

请求基本格式

GET请求、POST请求==必须包含key为body的入参，所有请求数据包装为JSON格式，并存放到入参body中==，示例如下：

GET请求：

xxx/login?body={"username":"admin","password":"123456","captcha":"scfd","rememberMe":1}

POST请求：

 

响应基本格式

{
    "code": 200,
    "msg": "success"
}

code : 请求处理状态（可以根据业务自行添加）

• 200: 请求处理成功

• 500: 请求处理失败

• 401: 请求未认证，跳转登录页

• 406: 请求未授权，跳转未授权提示页

msg: 请求处理消息（可以根据业务自行添加）

• code=200 且 msg =="success": 请求处理成功

• code=200 且 msg !="success": 请求处理成功, 普通消息提示：msg内容

• code=500: 请求处理失败，警告消息提示：msg内容

响应实体格式

{
    "code": 200,
    "msg": "success",
    "data": [
        "entity": {
            "id": 1,
            "name": "XXX",
            "phone": "XXX"
        }
    ]
}

entity: 响应返回的实体数据

响应列表格式

{
    "code": 200,
    "msg": "success",
    "data": {
        "list":[
            {
                "id": 1,
                "name": "XXX",
                "code": "XXX"
            },
             {
                "id": 2,
                "name": "XXX",
                "code": "XXX"
            },
             {
                "id": 3,
                "name": "XXX",
                "code": "XXX"
            }
        ]
        
    }
}

list: 响应返回的列表数据

响应分页格式

{
    "code": 200,
    "msg":"success",
    "data": {
        "totalCount": 2,
        "totalPage": 1
        "pageNo": 1,
        "pageSize": 10,
        "list": [
            {
                "id": 1,
                "name": "XXX",
                "code": "H001"
            },
            {
                "id": 1,
                "name": "XXX",
                "code": "H001"
            },
            {
                "id": 1,
                "name": "XXX",
                "code": "H001"
            }
 ],
        
    }
}

 

• data.totalCount: 总记录数

• data.pageNo: 当前页码

• data.pageSize: 每页大小

• data.totalPage: 总页数

特殊内容规范

 下拉框、复选框、单选框

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

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

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

Boolean类型

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

日期类型

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