前后分离接口规范

前后分离接口规范

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

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

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

为何要分离

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

后端为主的MVC时代

代码可维护性得到明显好转,MVC 是个非常好的协作模式,从架构层面让开发者懂得什么代码应该写在什么地方。为了让 View 层更简单干脆,还可以选择 Velocity、Freemaker 等模板,使得模板里写不了 Java 代码。看起来是功能变弱了,但正是这种限制使得前后端分工更清晰。然而依旧并不是那么清晰,这个阶段的典型问题是:

  1. 前端开发重度依赖开发环境,开发效率低。这种架构下,前后端协作有两种模式:一种是前端写demo,写好后,让后端去套模板。淘宝早期包括现在依旧有大量业务线是这种模式。好处很明显,demo 可以本地开发,很高效。不足是还需要后端套模板,有可能套错,套完后还需要前端确定,来回沟通调整的成本比较大。另一种协作模式是前端负责浏览器端的所有开发和服务器端的 View 层模板开发,支付宝是这种模式。 好处是 UI 相关的代码都是前端去写就好,后端不用太关注,不足就是前端开发重度绑定后端环境,环境成为影响前端开发效率的重要因素。
  2. 前后端职责依旧纠缠不清。 Velocity 模板还是蛮强大的,变量、逻辑、宏等特性,依旧可以通过拿到的上下文变量来实现各种业务逻辑。这样,只要前端弱势一点,往往就会被后端要求在模板层写出不少业务代码。还有一个很大的灰色地带是 Controller,页面路由等功能本应该是前端最关注的,但却是由后端来实现。 Controller 本身与 Model 往往也会纠缠不清,看了让人咬牙的业务代码经常会出现在 Controller 层。这些问题不能全归结于程序员的素养,否则 JSP 就够了。
  3. 对前端发挥的局限。 性能优化如果只在前端做空间非常有限,于是我们经常需要后端合作才能碰撞出火花,但由于后端框架限制,我们很难使用Comet、Bigpipe等技术方案来优化性能。

总上所述,就跟为什么要代码重构一样

  1. 关注点分离
  2. 职责分离
  3. 对的人做对的事
  4. 更好的共建模式
  5. 快速的反应变化

什么是分离

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

SPA: Single Page Application

基于 Ajax 带来的 SPA 时代

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

浏览器端的分层架构

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

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

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

如何做分离

职责分离

职责分离

  1. 前后端仅仅通过异步接口(AJAX/JSONP)来编程
  2. 前后端都各自有自己的开发流程,构建工具,测试集合
  3. 关注点分离,前后端变得相对独立并松耦合
后端前端
提供数据接收数据,返回数据
处理业务逻辑处理渲染逻辑
Server-side MVC架构Client-side MVC 架构
代码跑在服务器上代码跑在浏览器上

开发流程

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

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

开发流程

具体实施

现在已基本完成了,接口方面的实施:

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

接口文档+Mock平台服务器

接口规范V1.0.0

规范原则

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

基本格式

请求基本格式

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

  • GET请求:
xxx/login?body={"username":"admin","password":"123456","captcha":"scfd","rememberMe":1}
  • POST请求:

POST请求

响应基本格式

{code: 200,data: {message: "success"}
}
  • code : 请求处理状态
    • 200: 请求处理成功
    • 500: 请求处理失败
    • 401: 请求未认证,跳转登录页
    • 406: 请求未授权,跳转未授权提示页
  • data.message: 请求处理消息
    • code=200 且 data.message=“success”: 请求处理成功
    • code=200 且 data.message!=“success”: 请求处理成功, 普通消息提示:message内容
    • code=500: 请求处理失败,警告消息提示:message内容

响应实体格式

{code: 200,data: {message: "success",entity: {id: 1,name: "XXX",code: "XXX"}}
}
  • data.entity: 响应返回的实体数据

响应列表格式

{code: 200,data: {message: "success",list: [{id: 1,name: "XXX",code: "XXX"},{id: 2,name: "XXX",code: "XXX"}]}
}
  • data.list: 响应返回的列表数据

响应分页格式

{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: 总页数

特殊内容规范

下拉框、复选框、单选框

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

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

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

Boolean类型

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

日期类型

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

未来的大前端

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

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

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

这两个阶段仅做简单介绍,有兴趣的可以参考下面的资料。

参考资料

  1. Web 前后端分离的意义大吗?
  2. 淘宝前后端分离实践
  3. 前后端分离开发模式的 mock 平台预研
  4. 网易前后端分离实践

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

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

相关文章

mysql proxy 悲观锁_mysql悲观锁总结和实践

使用场景举例:以MySQL InnoDB为例商品t_goods表中有一个字段status,status为1代表商品未被下单,status为2代表商品已经被下单,那么我们对某个商品下单时必须确保该商品status为1。假设商品的id为1。一、如果不采用锁,那…

MySQL吉连_Learn Jdbc : Java, Jdbc, Odbc

Learn Jdbc : Java, Jdbc, Odbc 介绍Learn Jdbc : Java, Jdbc, OdbcLearn JDBC we precisely name what we are going to help you for Learning.As you are Beginner we keep in mind the same thing,we think like you and try to Build Apps Like Java Deep Learning,Java B…

python虚拟环境打包deb_可以为python脚本创建deb包吗?

下面是python脚本源包的一个基本示例。虽然大多数打包教程都有点复杂,但如果遇到问题,它们确实可以帮助您。也就是说,我首先通过简单地查看Debian包来学习Debian打包的基础知识。获取相似的源代码并通过示例学习。在以下是您的基本源程序包布…

python顺序结构实验报告_Python 数据结构 之 串 的顺序存储结构

本文所采用的数据结构模板为 《数据结构教程》C语言版,李春葆、尹为民等著。改篇所涉及到的是 串 的顺序存储结构。用Python仿照C语言来实现。代码地址:串 的顺序存储结构:# !/usr/bin/env python# -*- coding: utf-8 -*-__author__ MrHero""…

java五子棋源代码_java 五子棋游戏源码

【实例简介】【实例截图】【核心代码】package game;import java.applet.Applet;import java.applet.AudioClip;import java.awt.BorderLayout;import java.awt.Button;import java.awt.Container;import java.awt.FlowLayout;import java.awt.GridLayout;import java.awt.even…

java界面化_java怎么实现图形化界面

展开全部java图形化界面还62616964757a686964616fe78988e69d8331333363373232是有很多内容要学习的,可以参考 如下实例:public class Test extends JFrame{MyPanel mpnull;public static void main(String[] args){// TODO Auto-generated method stubTe…

java图形用户登录界面_Java简单登录图形界面

一.登录界面1.程序代码1 import java.awt.*;//导入awt包2 import javax.swing.*;//导入swing包3 import java.awt.event.ActionListener;//导入awt包中的监听器事件包4 import java.awt.event.ActionEvent;//导入awt包中的ActionEvent事件包56 public class EnterScreen extend…

北大青鸟java y2_Struts-2 北大青鸟 Y2学年 项目案例使用 2框架开发租房网站 Java Develop 249万源代码下载- www.pudn.com...

文件名称: Struts-2下载 收藏√ [5 4 3 2 1 ]开发工具: Java文件大小: 10225 KB上传时间: 2016-01-03下载次数: 0提 供 者: 姜鹏详细说明:北大青鸟 Y2学年 项目案例使用Struts 2框架开发租房网站-My English LOW文件列表(点击判断是否您需要的文件&#xff0c…

java int 包_int readInt()

int readInt()描述 (Description)java.io.ObjectInputStream.readInt()方法读取32位int。声明 (Declaration)以下是java.io.ObjectInputStream.readInt()方法的声明。public int readInt()参数 (Parameters)NA返回值 (Return Value)此方法不返回值。异常 (Exception)EOFExcepti…

java i o是什么流_Java I/O流的总结

I/O的类结构图I/O的分类根据处理的数据类型分为:字节流和字符流。根据数据流向分为:输入流和输出流。流又可分为节点流和处理流。节点流直接与数据源相连处理流与节点流一起使用,在节点流的基础上,再嵌套一层。提高文件的读取效率…

java i18n实例_Java国际化(i18n)格式化日期

本篇文章帮大家学习java国际化(i18n)格式化日期,包含了Java国际化(i18n)格式化日期使用方法、操作技巧、实例演示和注意事项,有一定的学习价值,大家可以用来参考。DateFormat类提供了各种格式来格式化日期。 以下是一些格式的列表。DateForma…

java placeholder_java – 如何在JTextfield中设置像Placeholder一样的文本

我用来覆盖文本字段绘制方法,直到我最终得到更多的自定义文本字段然后我真的想…然后我发现this prompt API易于使用,不需要你扩展任何组件.它还有一个很好的“伙伴”API这已经被包含在SwingLabs,SwingX library中,这使得它甚至可以使用……例如(这使用SwingX-1.6.4)import jav…

java web聊天室私聊map_java websocket聊天室示例(springboot)

【实例简介】【实例截图】【核心代码】package com.example.demo;import java.io.IOException;import java.text.DateFormat;import java.text.SimpleDateFormat;import java.util.Date;import java.util.concurrent.ConcurrentHashMap;import javax.websocket.OnClose;import …

Java 内存映射读取文件_Java内存映射 大文件轻松处理|chu

前言内存映射文件(Memory-mapped File),指的是将一段虚拟内存逐字节映射于一个文件,使得应用程序处理文件如同访问主内存(但在真正使用到这些数据前却不会消耗物理内存,也不会有读写磁盘的操作),这要比直接文件读写快几个数量级。…

LeetCode - Easy - 118. Pascal‘s Triangle

Topic Array Description https://leetcode.com/problems/pascals-triangle/ Given a non-negative integer numRows, generate the first numRows of Pascal’s triangle. In Pascal’s triangle, each number is the sum of the two numbers directly above it. Example…

LeetCode - Easy - 119. Pascal‘s Triangle II

Topic Array Description https://leetcode.com/problems/pascals-triangle-ii/ Given an integer rowIndex, return the rowIndexth row of the Pascal’s triangle. Notice that the row index starts from 0. In Pascal’s triangle, each number is the sum of the tw…

jenv java_mac 上使用jenv 管理的多个java 版本

由于服务器是java1.7, mac上是1.8,因此mac编译的java代码会在服务器上报错。因此,需要修改mac上java版本,自己折腾了很久,放弃,决定使用jenv 管理! 结果是非常方便使用步骤:1、安装 …

mysql 源码 缓存_MySQL源码:MYSQL存储过程/函数的分析原理及缓存机制

前言:我个人认为,有关MYSQL存储过程/函数在MYSQL中的实现比较粗糙,可扩展性不够好,其实现的耦合性太高,所以主要讲一些它的原理方面的内容,但有可能在某些方面理解不够好或者有些不正确的地方,欢…

如何单元测试Java的private方法

问题 Java类中private方法通常只能被其所属类的调用,其他类只能望而却步,单元测试private方法也就一筹莫展。 尝试解法: 在测试时,手动将private改为public,测试完后再将其改回。将测试方法写进private方法的所属类…

图论与java_算法笔记_150:图论之双连通及桥的应用(Java)

1 问题描述DescriptionIn order to get from one of the F (1 < F < 5,000) grazing fields (which are numbered 1..F) to another field, Bessie and the rest of the herd are forced to cross near the Tree of Rotten Apples. The cows are now tired of often bein…