前后端分离必备的接口规范，十分接地气

1. 前言

随着互联网的高速发展，前端页面的展示、交互体验越来越灵活、炫丽，响应体验也要求越来越高，后端服务的高并发、高可用、高性能、高扩展等特性的要求也愈加苛刻，从而导致前后端研发各自专注于自己擅长的领域深耕细作。

然而带来的另一个问题：前后端的对接界面双方却关注甚少，没有任何接口约定规范情况下各自干各自的，导致我们在产品项目开发过程中，前后端的接口联调对接工作量占比在30%-50%左右，甚至会更高。往往前后端接口联调对接及系统间的联调对接都是整个产品项目研发的软肋。

本文的主要初衷就是规范约定先行，尽量避免沟通联调产生的不必要的问题，让大家身心愉快地专注于各自擅长的领域。

2. 为何要分离

目前现有前后端开发模式：“后端为主的MVC时代”，如下图所示：

图片

后端为主的MVC时代

代码可维护性得到明显好转，MVC 是个非常好的协作模式，从架构层面让开发者懂得什么代码应该写在什么地方。为了让 View 层更简单干脆，还可以选择 Velocity、Freemaker 等模板，使得模板里写不了 Java 代码。

看起来是功能变弱了，但正是这种限制使得前后端分工更清晰。然而依旧并不是那么清晰，这个阶段的典型问题是：

前端开发重度依赖开发环境，开发效率低。

这种架构下，前后端协作有两种模式：一种是前端写demo，写好后，让后端去套模板 。淘宝早期包括现在依旧有大量业务线是这种模式。好处很明显，demo 可以本地开发，很高效。不足是还需要后端套模板，有可能套错，套完后还需要前端确定，来回沟通调整的成本比较大。

另一种协作模式是前端负责浏览器端的所有开发和服务器端的 View 层模板开发，支付宝是这种模式。好处是 UI 相关的代码都是前端去写就好，后端不用太关注，不足就是前端开发重度绑定后端环境，环境成为影响前端开发效率的重要因素。

前后端职责依旧纠缠不清。

Velocity 模板还是蛮强大的，变量、逻辑、宏等特性，依旧可以通过拿到的上下文变量来实现各种业务逻辑。这样，只要前端弱势一点，往往就会被后端要求在模板层写出不少业务代码。

还有一个很大的灰色地带是 Controller，页面路由等功能本应该是前端最关注的，但却是由后端来实现。Controller 本身与 Model 往往也会纠缠不清，看了让人咬牙的业务代码经常会出现在 Controller 层。这些问题不能全归结于程序员的素养，否则 JSP 就够了。

对前端发挥的局限。

性能优化如果只在前端做空间非常有限，于是我们经常需要后端合作才能碰撞出火花，但由于后端框架限制，我们很难使用Comet、Bigpipe等技术方案来优化性能。

总上所述，就跟为什麽要代码重构一样：

  • 关注点分离
  • 职责分离
  • 对的人做对的事
  • 更好的共建模式
  • 快速的反应变化

3. 什么是分离

我们现在要做的前后分离第一阶段：“基于 Ajax 带来的 SPA 时代”，如图：

图片

这种模式下，前后端的分工非常清晰，前后端的关键协作点是 Ajax 接口。看起来是如此美妙，但回过头来看看的话，这与 JSP 时代区别不大。复杂度从服务端的 JSP 里移到了浏览器的 JavaScript，浏览器端变得很复杂。类似 Spring MVC，这个时代开始出现浏览器端的分层架构：

图片

对于这一SPA阶段，前后端分离有几个重要挑战：

前后端接口的约定。

如果后端的接口一塌糊涂，如果后端的业务模型不够稳定，那么前端开发会很痛苦。这一块在业界有 API Blueprint 等方案来约定和沉淀接口，在阿里，不少团队也有类似尝试，通过接口规则、接口平台等方式来做。有了和后端一起沉淀的接口规则，还可以用来模拟数据，使得前后端可以在约定接口后实现高效并行开发。 相信这一块会越做越好。

前端开发的复杂度控制。

SPA 应用大多以功能交互型为主，JavaScript 代码过十万行很正常。大量 JS 代码的组织，与 View 层的绑定等，都不是容易的事情。典型的解决方案是业界的 Backbone，但 Backbone 做的事还很有限，依旧存在大量空白区域需要挑战。

4. 如何做分离

4.1 职责分离

图片

职责分离

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

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

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

图片

4.2 开发流程

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

Mock 服务器根据接口文档自动生成 Mock 数据，实现了接口文档即API：

图片

开发流程

4.3 具体实施

现在已基本完成了，接口方面的实施：

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

图片

接口文档+Mock平台服务器

5. 接口规范V1.0.0

5.1 规范原则

  • 接口返回数据即显示：前端仅做渲染逻辑处理；
  • 渲染逻辑禁止跨多个接口调用；
  • 前端关注交互、渲染逻辑，尽量避免业务逻辑处理的出现；
  • 请求响应传输数据格式：JSON，JSON数据尽量简单轻量，避免多级JSON的出现；

5.2 基本格式

5.2.1 请求基本格式

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

GET请求：

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

POST请求：

图片

5.2.2 响应基本格式

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

code : 请求处理状态

  • 200: 请求处理成功
  • 500: 请求处理失败
  • 401: 请求未认证，跳转登录页
  • 406: 请求未授权，跳转未授权提示页

data.message: 请求处理消息

  • code=200 且 data.message=“success”: 请求处理成功
  • code=200 且 data.message!=“success”: 请求处理成功, 普通消息提示：message内容。推荐：两张趣图助你理解 HTTP 状态码。
  • code=500: 请求处理失败，警告消息提示：message内容

5.3 响应实体格式

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

data.entity: 响应返回的实体数据

5.4 响应列表格式

data.list: 响应返回的列表数据

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}
}
  • data.recordCount: 当前页记录数
  • data.totalCount: 总记录数
  • data.pageNo: 当前页码
  • data.pageSize: 每页大小
  • data.totalPage: 总页数

5.6 特殊内容规范

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

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

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

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

5.6.2 Boolean类型

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

5.6.3 日期类型

关于日期类型，JSON数据传输中一律使用字符串，具体日期格式因业务而定；推荐：JSON是什么，为什么这么流行？

6. 未来的大前端

目前我们现在用的前后端分离模式属于第一阶段，由于使用到的一些技术jquery等，对于一些页面展示、数据渲染还是比较复杂，不能够很好的达到复用。对于前端还是有很大的工作量。

下一阶段可以在前端工程化方面，对技术框架的选择、前端模块化重用方面，可多做考量。也就是要迎来“前端为主的 MV* 时代”。大多数的公司也基本都处于这个分离阶段。

最后阶段就是Node 带来的全栈时代，完全有前端来控制页面，URL，Controller，路由等，后端的应用就逐步弱化为真正的数据服务+业务服务，做且仅能做的是提供数据、处理业务逻辑，关注高可用、高并发等。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/555825.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ubuntu php设置,关于ubuntu php环境设置详解-PHP问题

ubuntu php设置,关于ubuntu php环境设置详解-PHP问题

ubuntu php设置办法：起首更新源列表；而后关上“终端窗口”，输出饬令“sudo apt-get install php5”来装置php；接着装置设置装备摆设好apache环境，并装置php5-gd模块；最初创立“info.php”文件便可。Ubuntu …
阅读更多...
springboot前后端分离后权限原理浅谈

springboot前后端分离后权限原理浅谈

1. 需求描述 最近在梳理springboot前后端分离后的权限管理问题。前段时间，已经把shiro的实现和spring security 的实现进行了初步的了解。如果深入细节，一个篇幅怕是不够。本文仅对权限管理的一些通用原理进行探讨。 2. 权限分类 在前后端分离之后&am…
阅读更多...
js异步请求php数据,原生JS发送异步数据请求实例详解

js异步请求php数据,原生JS发送异步数据请求实例详解

这篇文章主要为大家详细介绍了原生JS发送异步数据请求的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下在做项目的时候，有时候需要用到异步数据请求，但是如果这个时候没有框架的依赖，就需要用到原生JS进行…
阅读更多...
MyBatis-Plus——增删查改

MyBatis-Plus——增删查改

开发环境 IDEA JDK：1.8 Spring Boot:2.6.2 Maven:3.3.9 MySQL:8.0.23 数据库准备 CREATE DATABASE mybatis_plus_db;DROP TABLE IF EXISTS person; CREATE TABLE person(id BIGINT(20) NOT NULL COMMENT 主键ID, name VARCHAR(30) NULL DEFAULT NULL COMMENT 姓…
阅读更多...
让程序员最爽的ThreadLocal使用姿势

让程序员最爽的ThreadLocal使用姿势

一、常见场景 ​ 1、ThreadLocal作为线程上下文副本，那么一种最常见的使用方式就是用来方法隐式传参，通过提供的set()和get()两个public方法来实现在不同的方法中的参数传递。对于编程规范来说，方法定义的时候是对参数个数是有限制的&#x…
阅读更多...
php 堆和栈示例,php中堆和栈的使用

php 堆和栈示例,php中堆和栈的使用

这篇文章介绍的内容是关于php中堆和栈的使用，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下一、关于堆和栈的概念及区别这里参考上篇博客： 浅谈堆和栈的区别通过这篇文章，我们可以知道广义的堆和栈到底…
阅读更多...
一场事故告诉你zookeeper和nacos谁更适合做注册中心

一场事故告诉你zookeeper和nacos谁更适合做注册中心

前言 ​ 在分布式系统中，注册中心充当着重要角色，是服务发现、客户端负载均衡中不可缺少的一员。注册中心除了能够实现基本的功能外，他的稳定性、可用性和健壮性对整个分布式系统的流畅运行影响重大。dubbo作为国内一款主流的分布式系统&…
阅读更多...
mysql 排他,mysql 共享锁 排他锁 防插入锁

mysql 排他,mysql 共享锁 排他锁 防插入锁

试验1事务1：#!/usr/bin/pythonimport timeimport MySQLdb;conn MySQLdb.connect(host"localhost",port3306,user"root",passwd"asdf",db"test",unix_socket"/data/mysql_3306/mysql.sock")cursor conn.cursor(…
阅读更多...
MySQL操作之JSON数据类型操作详解

MySQL操作之JSON数据类型操作详解

MySQL操作之JSON数据类型操作详解 这篇文章主要介绍了MySQL操作之JSON数据类型操作详解，内容较为详细，具有收藏价值，需要的朋友可以参考。 概述 mysql自5.7.8版本开始，就支持了json结构的数据存储和查询，这表明了my…
阅读更多...
Mysql执行计划含义,mysql执行计划介绍

Mysql执行计划含义,mysql执行计划介绍

烂sql不仅直接影响sql的响应时间，更影响db的性能，导致其它正常的sql响应时间变长。如何写好sql，学会看执行计划至关重要。下面我简单讲讲mysql的执行计划，只列出了一些常见的情况，希望对大家有所帮助。测试表结构&…
阅读更多...
Http GET 请求参数中文乱码

Http GET 请求参数中文乱码

Http GET 请求参数中文乱码 两种解决方式 第1种：代码里转换 String name request.getParamter("name"); String nameUtf8 new String(name.getBytes("ISO8859-1"), "UTF-8");第2种：修改Tomcat配置 TOMCAT_HOME/conf…
阅读更多...
matlab randomsample,randperm和randsample函数用法对比

matlab randomsample,randperm和randsample函数用法对比

构建替代数据的时候，一种常见的思路是打乱原数据的排列次序，通过随机置换原数据的排列次序从而产生和原数据系列统计特征(如均值、方差、分布)一致的随机数据。具体到Matlab中，此思路的实现会涉及到两个命令：randperm和randsample…
阅读更多...
SpringBoot的编码问题

SpringBoot的编码问题

第一种方式：直接在配置文件中设置浏览器的解析编码的格式 #设置字符编码 #开启springboot的http字符编码的支持 spring.http.encoding.enabledtrue #强制使用指定字符编码 spring.http.encoding.forcetrue #指定使用的字符编码 spring.http.encoding.charsetUTF-8第…
阅读更多...
寄生虫php版,-PHP版SEO最新教材版排名DeDeCms寄生虫V90繁殖

寄生虫php版,-PHP版SEO最新教材版排名DeDeCms寄生虫V90繁殖

今天视频教程演示说明下PHP寄生虫服务端的使用。主要在很多搭建的过程中会出错，今天主要就讲解下寄生虫配置常见的问题。那么同样也可以看下我们之前的通用版寄生虫使用教程[通用版教程在文件夹中有]，本教程是针对PHP版本的寄生虫服务端进行配置演示。继…
阅读更多...
SpringMVC请求参数乱码问题

SpringMVC请求参数乱码问题

post 请求方式&#xff1a; 在 web.xml 中配置一个过滤器 <!-- 配置 springMVC 编码过滤器 --><filter><filter-name>CharacterEncodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter…
阅读更多...
MySQL中 JSON 数据类型应用

MySQL中 JSON 数据类型应用

前言 今天接触到mysql中json数据类型&#xff0c;之前不知道有这个类型&#xff0c;今天学习一下。 JSON我相信大家都已经很熟悉了&#xff0c;但在 MySQL中&#xff0c;直至 5.7 版本中&#xff0c;才正式引入 JSON数据类型。在次之前&#xff0c;我们通常使varchar或text数…
阅读更多...
如何修改matlab中的语句,求大神帮忙看一下这个语句怎么改！！！！！

如何修改matlab中的语句,求大神帮忙看一下这个语句怎么改！！！！！

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼clcclearWimread(e:\matlab\aaa\1.jpg);imshow (W);I rgb2gray(W); % 灰度处理imshow (I);title(灰度图像);Jimnoise(I,salt & pepper,0.2); %椒盐噪声figureimshow (J) ;title(椒盐噪声);Qimnoise(I,gaussian,0,0.01); %高斯…
阅读更多...
MySql中json类型的使用___mybatis存取mysql中的json

MySql中json类型的使用___mybatis存取mysql中的json

MySql中json类型的使用 MySQL从5.7.8起开始支持JSON字段&#xff0c;这极大的丰富了MySQL的数据类型。也方便了广大开发人员。但MySQL并没有提供对JSON对象中的字段进行索引的功能&#xff0c;至少没有直接对其字段进行索引的方法。本文将介绍利用MySQL 5.7中的虚拟字段的功能…
阅读更多...
百度下拉词+php,百度下拉词是如何生成的？

百度下拉词+php,百度下拉词是如何生成的？

我们在百度搜索某一词汇的时候&#xff0c;都会在搜索框下面弹出一些相关性和搜索次数比较多的语句或词语&#xff0c;我们在百度上搜索一下&#xff0c;就可以看到用户平时搜索习惯&#xff0c;搜索爱好是什么。护发下拉很多小伙伴就又有疑问了&#xff1a;这些下拉词是根据什…
阅读更多...
python元组赋值给变量,Python的赋值

python元组赋值给变量,Python的赋值

一、序列解包多个赋值操作同时进行&#xff1a;赋值多个值后面再遇到对多个变量赋值时&#xff0c;就不需要对一个变量赋完值再对另一个变量赋值了&#xff0c;用一条语句就可以搞定&#xff0c;例如&#xff1a;再次赋值由输出结果看到&#xff0c;x和y的值交换了&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023