devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：Gausst松鼠会 | 2024-02-08 11:42:11

赞

踩

前后端接口

文章目录

每一个完整的项目都是不是一个人的功劳，是一个团队的心血！那么在这个项目从无到有的过程中，一个团队是如何凝聚呢？如何共享信息呢？会议及活动是如何开展呢？前端和后端又是如何对接的呢？

在刚刚收到项目时，我有很多问号？其中最大的一个就是接口是个什么鬼，我相信大家也或多或少有这个想法。随着学习的逐渐深入，它神秘的面纱似乎也在一层层的揭开，我们开始接触到了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: 请求已完成，且响应已就绪
status200: “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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56

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);
        }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

二、Tomcat的Servlet

img

由上图可以看出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
}

    • 1
    • 2
    • 3
    • 4
    • 5

    第一个数据就是一个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
    • 3
    • 4
    • 5

    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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    这是上面两个基本形式结合出来的一种变形，通过这种变形，使得数据的封装具有很大的灵活性，能让开发者自由的发挥想象力。

    1.3：JSON字符串

    Json字符串应满足以下条件：

    1. 1它必须是一个字符串，支持字符串的各种操作
    2. 里面的数据格式应该要满足其中一个格式，可以是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 字符串

    • 1
    JSON类之JSONArray()方法，实现json字符串转化为json对象数组或List<T>

    • 1
    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":"测试"}]
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    /*输入
[{"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":"测试"}]*/

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

四、接口文档：

在项目开发中，web项目的前后端是分离开发的。应用程序的开发，需要由前后端工程师共同定义接口，编写接口文档，之后大家都根据这个接口文档进行开发，到项目结束前都要一直维护。不同的项目有自己文档的规定，但大体上不会偏差太多，我就介绍自己的理解吧！

接口名称场景(接口)说明url请求信息响应信息错误码
顾名思义是给前端一个最直观的影响，这个接口是做什么的描述这个接口的现状，未开始、开发中、测试中。以及接口的用法，比如发送一个什么样的数据响应什么样的数据前端请求地址。url地址里不允许出现大写字母，如果是两个单词拼接，用/分开信息包含请求头，请求参数，范例展示信息包含响应头，响应参数，范例展示名称
描述
原因
解决方案

请求头(某些请求格式不同需要设置响应的请求头)

名称默认值描述
Content-Typeapplication/json-
Host-
……

请求参数

名称类型描述必须默认值
参数名String、Number、Object、Array四大类这个参数的作用是什么，可以提供一个范例是否必须有值按自己需求

响应信息类似

五、管理平台

传统的管理通过聊天平台，前后端的接口文档是用word或其他形式来完成，这样的接口文档没有实时性，做起来费时，看起来也不方便。

所以有了对接口文档和接口测试一体化的强烈需求，自然接口管理平台就诞生了！

我的小组目前使用NEI接口管理平台，所以也主要介绍一下NEI接口管理平台。

接口管理平台（Netease Easy Interface），简称 NEI。

NEI 虽然叫接口管理平台，但其实不只是管理接口，它可以管理整个产品，也具备项目脚手架的功能。

初始界面NEI可以创建项目组，在项目组中可以创建各自负责部分的分项目
在这里插入图片描述
最重要的是可以在线生成接口文档
在这里插入图片描述
在这里插入图片描述
还有打印功能哦！这个平台还附带测试接口，测试用例，以及测试报告等一系列功能，可以说很全面了！但缺点是这个平台上线时间不长，可能相关的教程不多，用户也不多！

其他的接口管理工具也推荐一下！大家可以根据需要使用

  1. 阿里rap
  2. NEI
  3. Postman
  4. Thoughts
  5. Swagger

参考文章——接口概念
参考文章——Tomcat结构
参考文章——json
参考文章——接口文档

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/68929
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号