接口详情页

概述

在 AutoAPIGen 1.2.0 版本中，我们新增了完整的接口详情页功能，让您能够更直观、更全面地查看 API 的详细信息。通过接口详情页，您可以轻松了解接口的请求参数、响应数据结构以及示例代码，大大提升开发效率。

如何访问接口详情页

在接口列表中，点击接口名称或接口右侧的「查看详情」按钮，即可打开该接口的详情页面。

详情页功能介绍

1. API 基本信息

详情页顶部展示了 API 的基本信息，包括：

• 接口名称
• 请求方法（GET、POST、PUT、DELETE 等）
• 接口路径
• 接口描述
• 创建者和最后修改者信息
• 创建时间和最后修改时间

2. 请求参数可视化展示

接口详情页使用结构化的方式展示各类请求参数：

• 请求头参数：展示接口需要的 HTTP 头信息
• 路径参数：URL 路径中的动态参数
• 查询参数：URL 中的查询字符串参数
• 请求体参数：POST/PUT 等方法的请求体数据
• Cookie 参数：接口所需的 Cookie 信息

每种参数都通过参数表格组件(ParamTable)进行展示，支持：

• 参数名称
• 参数类型
• 是否必填
• 默认值
• 参数描述
• 示例值

对于复杂的嵌套参数，表格支持树形结构展示，点击展开/折叠按钮可查看子参数详情。

3. 响应数据可视化

详情页提供了响应数据的结构化展示：

• 响应状态码：展示不同状态码对应的响应情况
• 响应数据结构：使用树形结构展示响应数据的字段定义
• 响应示例：提供格式化的 JSON 响应示例，支持语法高亮

响应数据展示采用了升级后的编辑器组件，支持 JSON 格式化和语法高亮，提高可读性。

4. 示例代码

详情页提供了接口调用的示例代码，帮助开发者快速了解如何使用该接口：

• 自动生成的请求代码示例
• 包含参数设置和调用方法
• 支持语法高亮显示

参数类型说明

在参数展示中，AutoAPIGen 支持多种参数类型：

类型	说明
string	字符串类型
number	数字类型
boolean	布尔类型
array	数组类型
object	对象类型
file	文件类型
date	日期类型
date-time	日期时间类型

响应数据结构

响应数据结构根据接口文档自动生成，支持复杂嵌套结构：

• 基本类型：string, number, boolean 等
• 复杂类型：object, array 等
• 引用类型：通过 $ref 引用其他数据模型
• 枚举类型：支持 enum 枚举值定义

使用技巧

复制参数结构

在参数表格中，您可以点击「复制」按钮，快速复制参数的 JSON 结构或 TypeScript 类型定义，方便在代码中使用。

响应数据筛选

对于复杂的响应数据，您可以使用搜索框快速筛选关注的字段，提高查看效率。

快速生成接口代码

在详情页中，您可以直接点击「生成接口代码」按钮，快速将该接口的请求代码和类型定义生成到项目中，无需返回接口列表操作。

查看接口方法

点击「查看接口方法」按钮，可以直接跳转到生成的接口代码文件，并定位到对应的方法位置。

复制方法名

点击「复制方法名」按钮，可以将接口方法名复制到剪贴板，方便在代码中使用。

复制接口引用

点击「复制接口引用」按钮，可以将接口的引用代码复制到剪贴板，开发者可根据需要在项目中手动粘贴使用。

小结

接口详情页功能的加入，使 AutoAPIGen 不仅是一个代码生成工具，更成为了一个完整的 API 文档查看和管理工具。通过直观的参数展示、响应数据可视化和示例代码，开发者可以更全面地了解接口信息，提高开发效率。