【 Apifox】Apifox接口设计

news2025/2/26 7:08:53

Apifox官网地址:http://apifox.cn/a103abcc

文章目录

  • 一、接口设计 (接口文档)
  • 二、如何定义接口?
  • 三、接口路径
  • 四、基础信息
  • 五、请求参数
    • 1.Params 参数
    • 2.Body 参数
    • 3.Body 参数类型
  • 六、参数中使用环境变量(或全局变量/临时变量)
  • 七、返回响应
  • 八、公共响应
  • 九、响应示例
  • 十、其他
    • 1.OperationID
  • 结语

一、接口设计 (接口文档)

接口设计即定义接口文档规范(如接口路径、参数、返回值、数据结构等)。

接下来手把手带你进行接口设计。

二、如何定义接口?

  1. 点击左侧搜索框旁边的 + 号按钮即可打开新建窗口,也可使用 快捷键 Ctrl(⌘) + N。

请添加图片描述

  1. 在打开的窗口中,直接定义接口相关信息。

在这里插入图片描述

三、接口路径

以斜杠/起始的接口 path 部分,如/pets/pets/{id}

注意:

  • 接口路径 建议不要包含 HTTP 协议及域名,这部分建议在 环境管理 的前置URL里设置,接口调试时的 URL 会自动加上当前环境的前置URL。
  • 特殊情况需在接口路径要带上HTTP 协议及域名的,系统也能支持,但不建议这么做。接口调试时,系统如检测到接口路径是以http://或https://起始的,会自动忽略当前环境里前置 URL。
  • Apifox 中的 Path 参数是以大括号包裹起来表示,而非冒号起始表示。正确示例:/pets/{id},错误示例/pets/:id。
  • 接口路径 不可包含Query 参数(即 URL 中 ?后的参数),Query 参数在下方请求参数部分填写。

四、基础信息

这部分比较简单,一看就懂,不再赘述。

五、请求参数

1.Params 参数

包含 Query 参数和 Path 参数两部分。

  1. Query 参数:即 URL 中 ?后的参数。
  2. Path 参数:自动提取接口路径中大括号包裹起来的参数,如/pets/{id}中的的{id}即表示名为id的 Path 参数。

2.Body 参数

3.Body 参数类型

  • none:无 body 参数。
  • form-data:即 Content-Type为multipart/form-data
  • x-www-form-urlencoded:即 Content-Type 为application/x-www-form-urlencoded
  • json:即 Content-Type 为 application/json
  • xml:即 Content-Type 为 application/xml
  • binary:发送文件类数据时使用。
  • raw:发送其他文本类数据时使用。

注意:

  • Body 参数类型为json或xml时,需要设置数据结构,并且数据结构可以引用数据模型,详细说明请查看文档:数据结构/数据模型。
  • 接口发送请求的时候会根据Body 参数类型自动在请求Header加上对应的Content-Type,无需手动设置。
  • 若需要手动设置Header中的Content-Type,则其值必须和Body 参数类型相匹配,否则系统会自动忽略掉手动设置的Content-Type。

示例:

  1. 如 Body 参数类型为form-data,手动设置Content-Type的值为multipart/form-data;charset=GBK是有效的;但如果把值设置为application/json则会被系统忽略掉,因为和参数类型不匹配。
  2. Body参数类型为raw时,手动设置Content-Type的值不受限制。

六、参数中使用环境变量(或全局变量/临时变量)

所有参数都可以使用变量,使用方式为双大括号包裹变量名,如{{my_variable}},表示引用名为my_variable的变量。

参数值使用变量时可以包含变量以外的字符串,如:参数值设置为prefix-{{my_variable}}-surfix,假设运行时变量my_variable的值为123,则实际请求时参数的值为prefix-123-surfix

七、返回响应

请添加图片描述

返回响应定义主要包含以下几部分:

  1. 接口返回的 HTTP 状态码
  2. 返回内容的数据格式:JSON、XML、HTML、Raw、Binary
  3. 数据结构:仅JSON、XML可配置数据结构。

注意:

  • 当一个接口在不同情况下会返回不同数据结构时,可设置多个返回响应。点击返回响应模块右上方的+ 新建即可添加。
  • 定义好数据结构后,接口调试时,系统会自动校验返回的数据是否符合定义的数据结构,非常方便,更多说明请查看文档:接口调试/接口用例。
  • 定义好数据结构后,使用 mock 功能时,系统会自动根据定义的数据结构 mock 出非常人性化的数据,非常方便,更多说明请查看文档:Mock 数据

八、公共响应

公共响应主要用来实现返回响应的复用。

通常不同接口在某些情况下会返回相同的数据结构,如资源不存在(404)、没有访问权限(401)等,这些建议设置为公共响应,避免重复编写,方便统一管理。

设置方法:打开项目设置->公共响应,在这里管理公共响应。

请添加图片描述

九、响应示例

设置返回响应的示例数据,方便查阅接口文档的人快速了解数据结构。

返回 Response 的示例数据也可以设置多次,点击响应示例模块右上方的+ 新建即可添加。建议至少设置两个示例:成功示例、失败示例。

十、其他

1.OperationID

支持设置 OperationId属性,导出OpenAPI格式时会将此处的值导出到 Operation 对象的 OperationId 里
请添加图片描述

结语

为了方便大家,我将Apifox的链接放下面,大家直接点击就可以进入;

Apifox网址:http://apifox.cn/a103abcc

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405397.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VSCode中ESLint插件修复+配置教程

文章目录vscodeeslint插件配置教程如果不好用排查1: 如果出现后面回车符问题排查2: 保存时好了但是一瞬间代码又回来了排查3: 右下角是否开启eslint服务排查4: 如果保存还是变回去了排查5: ESLint不生效排查6: 如果都用心走了一遍, 还不行额外说明-新文件还是末尾换行问题vscod…

vue.config.js配置proxy代理解决跨越;proxy代理报404;

像我们本地的vue项目运行起来,访问的地址一般是localhost,这个时候请求后台的接口,端口号也不一致,肯定就会存在跨域问题,所以我们要是想正常访问接口的话,就需要解决掉跨域问题。 本文我们是在vue.config.…

New Promise() 基础

阅读目录console.dir(Promise) 打印resolve 做用reject 的用法catch 的用法all 方法的用法console.dir(Promise) 打印 Promise 是一个构造函数,本身身上有 all、reject、resolve 这几个方法,原型上有 then、catch 等方法。 所以 Promise new 出来的对象…

VUE使用Three.js实现模型,点击交互,相机旋转视角跟随移动(Threejs中使用Tweenjs,含demo源码)

目录 一、Three.js是什么? 二、VUE简单使用Three.js步骤 1.npm安装 2.template模板 3.引入库 4.定义全局变量 5.初始化场景 6.初始化相机 7.初始化灯光 8.初始化渲染器 9.创建模型(这里我搭建的模型是一个简单双面货架模型) 10.根据浏览器窗口自适应 11…

Vue3中slot插槽使用方式

一文搞懂Vue3中slot插槽的使用! 使用 Vue 的小伙伴相信你一定使用过插槽,如果你没有用过,那说明你的项目可能不是特别复杂。插槽(slot)可以说在一个 Vue 项目里面处处都有它的身影,比如我们使用一些 UI 组件…

axios无法加载响应数据:no data found for resource with given identifier

美好的、令人遐想的日落黄昏里,出现了诡异的bug! 老师上课的时候,不好好听听,不仔细看!那么花了那么多时间找bug问题~翻了好多方案,还未解决,然后遇到了我,这个大冤种就是你&#xf…

EasyExcel解析动态表头及导出

前言 excel文件导入及导出,是日常开发中经常遇到的需求。本次笔者以EasyExcel为例,针对在项目中遇到的动态表头解析及导出的场景,详细介绍具体的代码实现过程。 参考地址 https://github.com/alibaba/easyexcel 前端下载 const download …

JavaScript判断对象是否为空对象的几种方法

目录 1、空对象对应的字符串为 "{}" 2、for in 3、jquery 的 isEmptyObject()方法 4、Object.getOwnPropertyNames() 5、ES6 的 Object.keys() JSON.stringify()扩展 1、第一大特性 小结 2、第二大特性 3、第三大特性 4、第四大特性 5、第五大特性 6、第…

Vue实战——使用代理服务器解决跨域问题——No‘Access-Control-Allow-Origin‘ header is present on the requested resource

概论: 目录 一、跨域问题是怎么产生的 1.1 跨域问题: 1.2 解决办法 三、开启代理服务器 第一种方式:(存在弊端) 细节问题:(解释两个弊端) 第二种方式:&#xff08…

el-input设置必填提示(单个多个)

有两种:一种是多个el-input通过同一个el-form表单来限制,这种用得最多的地方就是添加和修改功能;另一种是每个el-input通过各自的el-form表单来限制,这种通常是用在动态添加多个输入框等功能上,话不多说,上才艺噻. 第一种(多个el-input同时限…

【JavaScript】JS实用案例分享:DOM节点转JSON数据 | 标签输入框

🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述) 🖥️ TypeScript知识总结&…

微信小程序--》tabBar底部栏

🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生 🛵个人主页:亦世凡华、 🛺系列专栏:微信小程序 🚲座右铭:人生亦可燃烧,亦可腐败&…

搭建博客,基于vue3 的 vitepress 轻松搞定

Ⅰ、什么是vitepress 💎 vitepress 使用场景 简单的说 ,只要 会用 markdown 语法,就能构建自己的 「博客、笔记、使用文档」等系统 ; ✨ vitepress 优势 优势介绍傻瓜式操作只需要配置 菜单 和 对应的 markdown 就能实现博客、笔…

【Vue脚手架安装教程】

文章目录前言一、安装Node.js二、配置淘宝镜像安装cnpm,将npm设置为淘宝镜像:二、安装vue/cli检查是否安装成功: vue -V 或者 vue --version ![在这里插入图片描述](https://img-blog.csdnimg.cn/7f66366eba81456388fcf28871db0650.png)三、 创建一个vue…

Chrome浏览器的跨域设置

做前后端分离的开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,而且chrome浏览器支持可跨域的设置,但是新版本的chrome浏览器提高了跨域设置的门槛,原来的方法不再适用了。其实网上也有很多大神总结的chrome跨域设…

webpack的面试题(吐血整理)

以下为整理的webpack面试题,如有不足之处,还请大家多多指正。 一、webpack的构建流程 二、对webpack的理解 webpack是一个打包模块化js的工具,在webpack里一切文件皆模块,通过loader转换文件,通过plugin注入钩子&#…

最常见的六种跨域解决方案

目录: 前言:什么是跨域?JSONPCORS搭建Node代理服务器Nginx反向代理postMessageWebsocket总结 前言:什么是跨域? 跨域就是当在页面上发送ajax请求时,由于浏览器同源策略的限制,要求当前页面和…

jQuery模态弹窗插件(jquery-confirm)

前言 今天为大家分享一款开源的非常轻量且精美的jQuery模态弹窗插件:jquery-confirm,它包含Bootstrap,Material等多种主题供选择。 如果你的前端项目中还在使用jQuery,那么jquery-confirm是你模态弹窗的完美选择。 下面我们就来零距离感受…

IDEA如何运行SpringBoot项目(超详细截图)

【辰兮要努力】:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行! 博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端、后台、…

vue中组件的props属性(详)

今天这篇文章,让你彻底学会props属性…… props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项。 问题一:那props具体是怎么使用呢?原理又是什么呢?往下看…