前后端对接及接口管理平台浅析

文章目录

- - 一、接口是什么（附带简易案例)
  - 二、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地址里不允许出现大写字母，如果是两个单词拼接，用/分开	信息包含请求头，请求参数，范例展示	信息包含响应头，响应参数，范例展示	名称描述原因解决方案