浅谈前后端分离规范

简介: 该文提出前后端协同开发规范,强调接口文档的重要性和实时同步。开发流程包括后端编写接口文档、开发和更新,前端依据文档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数据传输中一律使用字符串,具体日期格式因业务而定。

相关文章
|
存储 设计模式 人工智能
规范:前端代码开发规范
规范:前端代码开发规范
1611 0
|
6月前
|
前端开发 JavaScript API
现代Web开发中的前后端分离架构
本篇文章探讨了前后端分离架构在现代Web开发中的应用与优势。
|
7月前
|
开发框架 前端开发 安全
开发框架前后端分离的好处是什么
开发框架前后端分离的好处是什么
55 0
|
7月前
|
前端开发
前端模块化开发规范
前端模块化开发规范
|
7月前
|
XML JSON API
前后端分离的接口设计规范
前后端分离的接口设计规范
|
7月前
|
前端开发 JavaScript 安全
前后端分离项目知识汇总(开发流程,跨域,开发接口)
前后端分离项目知识汇总(开发流程,跨域,开发接口)
102 0
|
监控 前端开发 持续交付
带你入门前端工程(二):统一规范(二)
带你入门前端工程(二):统一规范(二)
169 0
|
前端开发 JavaScript 搜索推荐
带你入门前端工程(二):统一规范(一)
带你入门前端工程(二):统一规范
153 0
|
设计模式 JSON 前端开发
前后端分离开发架构
前后端分离开发架构
340 0
前后端分离开发架构
下一篇
DataWorks