前后端对接及接口管理平台浅析
关与作者更多博客请访问云里云外开源社区
文章目录
- 一、接口是什么(附带简易案例)
- 二、Tomcat的Servlet
- 三、json
- 四、接口文档:
- 五、管理平台
每一个完整的项目都是不是一个人的功劳,是一个团队的心血!那么在这个项目从无到有的过程中,一个团队是如何凝聚呢?如何共享信息呢?会议及活动是如何开展呢?前端和后端又是如何对接的呢?
在刚刚收到项目时,我有很多问号?其中最大的一个就是接口是个什么鬼,我相信大家也或多或少有这个想法。随着学习的逐渐深入,它神秘的面纱似乎也在一层层的揭开,我们开始接触到了postman等接口测试工具,但这还是不够直观。其实最好的理解在于实践,再多的文字介绍也不如真实和前端小姐姐对接一下的效果好!(但文字还是要有的)
为什么需要分离呢?
随着技术的不断进步,对前端后端的要求也不断升级。前端的展示业务、要求、质量、交互体验越来越灵活、炫丽,响应体验也要求越来越高,工作量越来越繁重!而后端责着重提供各种服务以及高并发、高可用、高性能、高扩展等。
由此导致了前后端分离。各自专注于自己负责的模块。详情参考
一、接口是什么(附带简易案例)
由于目前项目采用SpringMVC架构,后台接口就是servlet,我们事实上可以将接口理解为servlet(不知道还有没有其他类型的,如果还有其他请积极指正)。那么servlet又是什么呢?
servlet:
简单的说servlet就是跑在web服务器中的小Java程序,是Java中的类,用来接受和相应网页传过来的东西,主要是http。
这里暂时不介绍servlet的详细用法,有需求的同学可以参考这篇https://blog.csdn.net/chachapaofan/article/details/82631841,这里用一个简单的案例来说明(因为技术原因,只能jsp来演示调用接口,需要用到ajax详细介绍,前端的调用本质上类似)如果是要用axios,请参考靳紫澜同学博客
还是先介绍概念: XMLHttpRequest 对象的三个重要的属性:
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪 |
status | 200: “OK” 404: 未找到页面 |
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
方法 | 描述 |
---|---|
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。 method:请求的类型;GET 或 POST url:文件在服务器上的位置 async:true(异步)或 false(同步) |
send(string) | 将请求发送到服务器。 string:仅用于 POST 请求 |
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><base href="<%=basePath%>"><title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script>// 在页面的 head 部分添加一个 <script> 标签。该标签中包含了这个 TestAjax() 函数function TestAjax(){//var 是创建变量var xmlHttp;// 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。// XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。// 如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码xmlHttp = new XMLHttpRequest();} else {// IE6, IE5 浏览器执行代码xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlHttp.onreadystatechange = function(){//当 readyState 等于 4 且状态为 200 时,表示响应已就绪:readyState是XMLHttpRequest的一个属性if (xmlHttp.readyState==4 && xmlHttp.status==200) {document.getElementById("sp").innerHTML = xmlHttp.responseText;}}
//这个地方在地址后设置了一个属性name=LiGuorui,在servlet中会用到xmlHttp.open("GET", "/servlet2/TestAjax?name=LiGuorui", true);xmlHttp.send();}</script>
</head><body>
<%--当按钮被点击时,它负责调用名为 TestAjax() 的函数--%>
<button onclick="TestAjax()">利用Ajax获取数据</button> <br>
<span id = "sp"></span></body>
</html>
servlet
@WebServlet(name = "TestAjax",urlPatterns = "/servlet2/TestAjax")public class TestAjax extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public TestAjax() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubresponse.setCharacterEncoding("UTF-8");PrintWriter out = response.getWriter();out.println("Hello " + request.getParameter("name"));out.flush();}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}
}
二、Tomcat的Servlet
由上图可以看出Tomcat最顶层的容器是Server,代表整个服务器。一个Server可以包含至少一个Service,用于提供服务。
Service主要有两大核心组件,Connector和Container。Connector主要负责对外交流,而container则是处理内部事务。一个Service可以有多个Connector,但只能有一个Container。
多个 Connector 和一个 Container 就形成了一个 Service,有了 Service 就可以对外提供服务了,再加上生存环境Server。整个 Tomcat 的生命周期由 Server 控制。
三、json
Java中并没有内置JSON的解析,因此使用JSON需要借助第三方类库。
下面是几个常用的 JSON 解析类库:
Gson: 谷歌开发的 JSON 库,功能十分全面。
FastJson: 阿里巴巴开发的 JSON 库,性能十分优秀。
Jackson: 社区十分活跃且更新速度很快。
1.1:JSON对象
我们先来看以下数据:
{"ID": 1001,"name": "张三","age": 24 }
第一个数据就是一个Json对象,观察它的数据形式,可以得出以下语法:
1:数据在花括号中
2:数据以"键:值"对的形式出现(其中键多以字符串形式出现,值可取字符串,数值,甚至其他json对象)
3:每两个"键:值"对以逗号分隔(最后一个"键:值"对省略逗号)
遵守上面3点,便可以形成一个json对象。
1.2:JSON对象数组接下来我们再看第二个数据,观察它的数据形式,可以得出以下语法:
[{"ID": 1001, "name": "张三", "age": 24},{"ID": 1002, "name": "李四", "age": 25},{"ID": 1003, "name": "王五", "age": 22} ]
1:数据在方括号中(可理解为数组)
2:方括号中每个数据以json对象形式出现
3:每两个数据以逗号分隔(最后一个无需逗号)
遵守上面3点,便可形成一个json对象数组(及一个数组中,存储了多个json对象)
理解了上面两种基本的形式,我们就可以得出其他的数据形式,例如下面这个:
{"部门名称":"研发部","部门成员":[{"ID": 1001, "name": "张三", "age": 24},{"ID": 1002, "name": "李四", "age": 25},{"ID": 1003, "name": "王五", "age": 22}],"部门位置":"xx楼21号" }
这是上面两个基本形式结合出来的一种变形,通过这种变形,使得数据的封装具有很大的灵活性,能让开发者自由的发挥想象力。
1.3:JSON字符串
Json字符串应满足以下条件:
- 1它必须是一个字符串,支持字符串的各种操作
- 里面的数据格式应该要满足其中一个格式,可以是json对象,也可以是json对象数组或者是两种基本形式的组合变形。
总结:json可以简单的分为基本形式:json对象,json对象数组。两种基本格式组合变形出其他的形式,但其本质还是json对象或者json对象数组中的一种。json对象或对象数组可以转化为json字符串,使用于不同的场合。
Fastjson
在fastjson包中主要有3个类,JSON,JSONArray,JSONObject
三者之间的关系如下,JSONObject和JSONArray继承JSON,JSONObject代表json对象,JSONArray代表json对象数组,JSON代表JSONObject和JSONArray的转化。
这里主要介绍两种转化方法
JSON类之toJSONString()方法,实现json对象转化为json字符串和javabean对象转化为json 字符串
JSON类之JSONArray()方法,实现json字符串转化为json对象数组或List<T>
public class Changing {/**将集合转换为json格式的数据*/public String toJson(List list){String str = JSON.toJSONString(list);return str;}/**将json格式的数据转化为泛型为Notes类的集合*/public List<Notes> JsonChange(String str){List<Notes> notes = JSON.parseArray(str,Notes.class);return notes;}public static void main(String[] args) {Scanner sc = new Scanner(System.in);Changing changing = new Changing();List<Notes> notes = changing.JsonChange(sc.next());for(int i=0;i<notes.size();i++){System.out.println(notes.get(i).toString());}List<Notes> notes1 = new ArrayList<Notes>();Notes notes2 = new Notes(1,"测试","hhh","yes","moren");notes1.add(0,notes2);System.out.println(changing.toJson(notes1));//[{"category":"moren","content":"hhh","hasOpen":"yes","noteId":1,"title":"测试"},{"category":"moren","content":"hhh","hasOpen":"yes","noteId":1,"title":"测试"}]} }
/*输入 [{"category":"moren","content":"hhh","hasOpen":"yes","noteId":1,"title":"测试"}, {"category":"moren","content":"hhh","hasOpen":"yes","noteId":1,"title":"测试"}]*/ /*输出的 Notes{noteId=1, title='测试', content='hhh', hasOpen='yes', category='moren', creatTime='null', source='null'} Notes{noteId=1, title='测试', content='hhh', hasOpen='yes', category='moren', creatTime='null', source='null'} [{"category":"moren","content":"hhh","hasOpen":"yes","noteId":1,"title":"测试"}]*/
四、接口文档:
在项目开发中,web项目的前后端是分离开发的。应用程序的开发,需要由前后端工程师共同定义接口,编写接口文档,之后大家都根据这个接口文档进行开发,到项目结束前都要一直维护。不同的项目有自己文档的规定,但大体上不会偏差太多,我就介绍自己的理解吧!
接口名称 | 场景(接口)说明 | url | 请求信息 | 响应信息 | 错误码 |
---|---|---|---|---|---|
顾名思义是给前端一个最直观的影响,这个接口是做什么的 | 描述这个接口的现状,未开始、开发中、测试中。以及接口的用法,比如发送一个什么样的数据响应什么样的数据 | 前端请求地址。url地址里不允许出现大写字母,如果是两个单词拼接,用/分开 | 信息包含请求头,请求参数,范例展示 | 信息包含响应头,响应参数,范例展示 |
名称 描述 原因 解决方案 |
请求头(某些请求格式不同需要设置响应的请求头)
名称 | 默认值 | 描述 |
---|---|---|
Content-Type | application/json | - |
Host | - | |
… | … |
请求参数
名称 | 类型 | 描述 | 必须 | 默认值 |
---|---|---|---|---|
参数名 | String、Number、Object、Array四大类 | 这个参数的作用是什么,可以提供一个范例 | 是否必须有值 | 按自己需求 |
响应信息类似
五、管理平台
传统的管理通过聊天平台,前后端的接口文档是用word或其他形式来完成,这样的接口文档没有实时性,做起来费时,看起来也不方便。
所以有了对接口文档和接口测试一体化的强烈需求,自然接口管理平台就诞生了!
我的小组目前使用NEI接口管理平台,所以也主要介绍一下NEI接口管理平台。
接口管理平台(Netease Easy Interface),简称 NEI。
NEI 虽然叫接口管理平台,但其实不只是管理接口,它可以管理整个产品,也具备项目脚手架的功能。
NEI可以创建项目组,在项目组中可以创建各自负责部分的分项目
最重要的是可以在线生成接口文档
还有打印功能哦!这个平台还附带测试接口,测试用例,以及测试报告等一系列功能,可以说很全面了!但缺点是这个平台上线时间不长,可能相关的教程不多,用户也不多!
其他的接口管理工具也推荐一下!大家可以根据需要使用
- 阿里rap
- NEI
- Postman
- Thoughts
- Swagger
参考文章——接口概念
参考文章——Tomcat结构
参考文章——json
参考文章——接口文档
前后端对接及接口管理平台浅析相关推荐
- 基于Jeecgboot前后端分离的流程管理平台演示系统安装(二)
三.手动发布与测试 后端: 修改application-prod.yml文件,根据自己的发布机器的相关参数进行修改,再进行编译,处出来nbcio-boot\nbcio-boot-module-syst ...
- 开源项目 ——API接口管理平台数据库原型设计(三)
开源项目 --API接口管理平台数据库原型设计(三) 背景 日常我们开发人员在开发一些常用的平台时都会用到各种各样的接口,而对于这些接口的有效管理都会成为我们的一些麻烦事,一些常见的接口管理平台我们使 ...
- SpringBoot+Vue+Mybatis-plus 博客(七):完成友链管理前后端对接
SpringBoot+Vue+Mybatis-plus 博客:个人博客介绍及效果展示 SpringBoot+Vue+Mybatis-plus 博客(一):完成博客后台前端登录页面.后端登录接口 Spr ...
- 分享一个开源免费、目前最好的API接口管理平台----eoLinker
一.概况 eoLinker 是目前业内领先.国内最大的在线 API 接口管理平台,提供自动生成 API 文档.API 自动化测试.Mock 测试.团队协作等功能,旨在解决由于前后端分离导致的开发效率低 ...
- 前后端对接的思考及总结
说在前面的话 随着前端NodeJs技术的火爆,现在的前端已经非以前传统意义上的前端了,各种前端框架(Vue.React.Angular......)井喷式发展,配合NodeJs服务端渲染引擎,目前前端 ...
- java nei_NEI 接口管理平台
原标题:NEI 接口管理平台 对于现代 Web 产品来说,API 的重要性不言而喻,相信前后端工程师都深有体会. 关于 API 的开发流程,笔者咨询过一些朋友,也在面试的过程中问过一些候选人,抱随意的 ...
- 基于SpringBoot+Vue前后端分离的在线教育平台项目
基于SpringBoot+Vue前后端分离的在线教育平台项目 赠给有缘人,希望能帮助到你!也请不要吝惜你的大拇指,你的Star.点赞将是对我最大的鼓励与支持! 开源传送门: 后台:Gitee | Gi ...
- 六大接口管理平台,总有一款适合你的!
前后端分离绕不开的接口测试 先聊一聊前端和后端分离的优点.前后端分离优点如下: 真正的实现前后端解耦,前端服务器使用 nginx: 易于发现bug,可以快速定位是谁的问题,不会出现互相踢皮球的现象: ...
- 国内几款接口管理平台,使用体验分析对比:总有一款是你想要的!
在项目开发测试中,接口文档是贯穿始终的.前后端开发需要在开发前期进行接口定义并形成文档,QA在功能测试和接口测试的环节也需要依赖于这些接口文档进行测试.接口文档往往以最简单的静态文档的形态存在.然而在 ...
最新文章
- volatile: 多线程程序员最好的朋友
- oracle 24365,深入解析:DBA_OBJECTS中的OBJECT_ID与DATA_OBJECT_ID的区别
- 并不对劲的bzoj2820:p2257:YY的GCD
- vant.dialog.alert什么方法让他隐藏_今天才发现,美工刀上面还隐藏着一个小机关,厉害又实用,学学吧...
- 代理的JavaOne 2016观察
- 设计模式的C语言应用-表驱动模式
- C语言学习笔记---C库排序函数qsort()
- Webpack 配置摘要
- redis本地服务启动和桌面客户端安装(Windows)
- Android学习目录
- jtextarea可以让某一行右对齐吗_单元格对齐还在敲空格吗?几个简单小技巧要学会...
- eclipse 插件 subclipse plugin 中修改已经登录的帐户密码的方法
- mysql中提供哪些约束_MySQL约束
- 盘点AI江湖中,清华人的“无问西东”
- android怎么改变字体,如何修改安卓手机字体 详细安卓字体修改图文教程
- 利用python、selenium和超级鹰 实现B站自动登录
- Solidworks如何打开swb文件
- 自恢复保险丝在汽车电子中的防护应用
- setAttribute()方法的使用
- 【Web UI自动化测试】Web UI自动化测试之PO篇(全网最全)
热门文章
- Spring 4.x 源码系列4-创建bean实例
- 【计算机毕业设计】017学生公寓电费信息管理系统
- GitHub 9K Star!Apollo作者手把手教你微服务配置中心之道
- 使用Pyppeteer进行gmail模拟登录
- 无计算机基础的学电子化移交,由于目标计算机积极拒绝,无法连接。 127.0.0.1-8080-这是什么意思啊...
- 基于浏览器内核的被动式爬虫任务下发框架
- 给 30 岁左右程序员,4 个突破内卷的破局建议!
- Parquet 格式文件
- 初级计算机基础知识教程,计算机基础知识(初中级教程)
- 探究ESP32S【第六天】——接入米家(插曲)