web开发，前后分离接口规范

站长手记作者： 2024-08-28 14:15:01

目前我们现在用的前后端分离模式属于第一阶段，下一阶段可以在前端工程化方面，对技术框架的选择、前端模块化重用方面，可多做考量。也就是要迎来“==前端为主的 MV* 时代==”。

1. 前言

2. 为何要分离

后端为主的MVC时代

3. 什么是分离

基于 Ajax 带来的 SPA 时代

浏览器端的分层架构

4. 如何做分离

4.1 职责分离

职责分离

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

4.2 开发流程

开发流程

4.3 具体实施

接口文档+Mock平台服务器

5. 接口规范V1.0.0

5.1 规范原则

5.2 基本格式

5.2.1 请求基本格式

POST请求

5.2.2 响应基本格式

{
    code: 200,
    data: {
        message: "success"
    }
}

5.3 响应实体格式

{
    code: 200,
    data: {
        message: "success",
        entity: {
            id: 1,
            name: "XXX",
            code: "XXX"
        }
    }
}

5.4 响应列表格式

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

5.5 响应分页格式

{
    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
    }
}

5.6 特殊内容规范

5.6.1 下拉框、复选框、单选框

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