RESTful API与Apifox：让前后端对话变得像点外卖一样简单！

引言

在学习URL的设计模式时，RESTful API是我们不能缺失的知识点，其遵循着 HTTP协议的规定，用简洁明了的方式处理请求，比如通过URL来指定资源，并利用GET、POST、PUT、DELETE这些动词进行对话。它的优点在于易于理解、实现简单，而且几乎所有的编程语言都可以与之良好配合，简直就是跨平台交流的万能钥匙。而本文就将学习 RESTful API相关知识以及初步介绍 HTTP协议，在最后将教各位使用当下程序员都在用的“神器”apifox。

RESTful API简介

RESTful API 表述性状态转移（Representational State Transfer）应用程序编程接口，是一种基于HTTP协议设计的API风格。它不是一种具体的编程语言或技术，而是一套设计理念和约束条件，简化网络应用之间的交互，并确保这种交互具有统一的接口。

统一接口：通过一组有限的操作（如GET、POST、PUT、DELETE等）来操作资源。

资源导向：将系统中的实体视为资源，每个资源都有一个唯一的标识符（URL），并且可以通过标准的HTTP方法进行操作。

资源的概念及暴露方式

在RESTful架构中，资源是核心概念，代表了系统中的任何信息片段或功能。网站的作用就是暴露资源，资源可以通过URL唯一地标识和访问。例如：

在终端进行初始化项目，安装json-server

npm init -y

npm i json-server

创建数据（资源）

{
  "users": [
    {
      "id": "1",
      "name": "张三"
    },
    {
      "id": "2",
      "name": "李四"
    },
    {
      "id": "3",
      "name": "王五"
    }
  ],
  "posts": [
    {
      "id": "1",
      "title": "学习apifox",
      "content": "Post 1 content",
      "usersId": 1
    }
  ]
}

添加脚本进行监控

"scripts": {
  "dev": "json-server --watch user.json --port 3001"
},

再在命令行中输入npm run dev来看看这个脚本

我们可以通过上述URL来访问我们的数据，而在这些URL中包含以下含义：

列表页链接：/posts/ 代表所有文章的集合。同理，/users/ 代表所有用户的集合

详情页链接：/posts/:id 是具体某篇文章的详细视图，其中:id是一个占位符，表示特定文章的唯一标识符。比如/posts/1，你可以获取ID为1的文章详情。

用户页面链接：/users/:id 类似于文章详情页，但针对的是用户资源。同样地，:id替换为具体的用户ID，如/users/1，用以访问用户1的信息。

使用Apifox进行API测试

在介绍完RESTful API 后，我们对资源也有了一定了解。但是如果要对API进行调试或者其他请求时，我们需要编写额外的代码或者使用命令行工具，而 Apifox 这一强大的工具可以有效的节省这一步骤，来一起看看吧。

准备工作

首先各位可以访问 Apifox，注册好账号后，推荐下载到本地。

打开软件后，映入眼帘的以下的页面，我们可以新建项目来进行项目管理。

各位可以选择自己所需的项目类型，本文使用HTTP来演示

在新建好项目后，我们再进行新建接口来创建API文档

在打开后记得点击下方改为调试模式

实战

当打开新建接口后，首先在最上方我们就能看到有一个默认的GET，这个就是我们请求的方法（Get查询、Patch修改、Post新增 ...）

而在方法的边上需要我们输入接口路径，这就是在对模拟器进行访问资源的请求，我们只需要输入我们需要进行请求的URL，就可以进行请求了。

接下来我们演示对posts中id=1的文章内容进行修改，先点击URL右边的发送按钮，我们就可以在下方查询到posts/1部分的内容了，然后将URL左边的方法改为 PATCH（更新资源的一部分），点击中间的 body 部分，再在子选项中选择 json ，然后在参数值部分输入我们需要修改的数据，最后点击发送即可。

在我们点击发送后，在下方就可以看到我们的资源内容发生了改变。这大大提升了我们的开发效率，都快飞起来了，当然在演示后，我们还需要进行这些操作部分的学习，还请读者自行探索，我这里给上最基本的解释。

了解HTTP协议基础

HTTP（HyperText Transfer Protocol，超文本传输协议）是用于在Web上传输超文本的应用层协议。它定义了客户端和服务器之间如何交换信息。一个完整的HTTP请求由三个主要部分组成：请求行、请求头和请求体（如果有的话）。

HTTP 请求的组成部分

1. 请求行 (Request Line)

请求行是HTTP请求的第一行，包含了请求方法、资源路径（URL中的路径部分）、以及HTTP版本号。格式如下：

<method> <request-URI> HTTP/<version>

即Method(动作) + url(资源)，例如：

GET /index.html HTTP/1.1

这里，GET 是请求方法，/index.html 是请求的资源路径，而 HTTP/1.1 表示使用的HTTP版本。

常见的HTTP请求方法例如：GET、POST、PUT、PATCH等等

2. 请求头 (Request Headers)

请求头位于请求行之后，提供了关于请求本身的元数据，如内容类型、编码方式、认证信息等。每个请求头是一行文本，包含名称和值，以冒号分隔。请求头可以有多个，每个头之间用回车换行符分开。

常见的请求头包括：

Host：指明请求的目标主机和端口号。

Content-Type：指示请求体中所包含的数据类型。

Authorization：用于HTTP访问认证。

User-Agent：描述发起请求的客户端信息。

Accept：客户端可接受的内容类型列表。

3. 请求体 (Request Body)

请求体不是所有HTTP请求都必须有的部分，主要用于非GET请求中发送数据给服务器。例如，在POST 或 PUT 请求中，请求体可能包含要提交的数据，如HTML表单数据、JSON对象或其他类型的文档。

在Apifox页面里，也体现了HTTP请求

小结：

本文简要介绍了RESTful API的设计原则及其重要性，展示了如何使用json-server快速搭建支持CRUD操作的模拟后端服务，并通过创建db.json定义资源数据；同时演示了Apifox这一强大工具在API调试和文档生成中的应用，突显了这些技能对于提升开发效率和简化前后端分离开发流程的关键作用。

作者：谎言西西里

链接：https://juejin.cn

+友情链接