每一个完整的项目都是不是一个人的功劳，是一个团队的心血！那么在这个项目从无到有的过程中，一个团队是如何凝聚呢？如何共享信息呢？会议及活动是如何开展呢？前端和后端又是如何对接的呢？
在刚刚收到项目时，我有很多问号？其中最大的一个就是接口是个什么鬼，我相信大家也或多或少有这个想法。随着学习的逐渐深入，它神秘的面纱似乎也在一层层的揭开，我们开始接触到了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)
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.println("Hello " + request.getParameter("name"));
out.flush();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(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