前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

前面我们学习了数据库管理和设计相关操作,并且添加了一些初始数据,接下来就是编写接口获取数据了。

但是在实际开发中是不会直接开撸代码的,通常大家需要先讨论并设计出接口文档,然后前后端才按照文档分头行动。

这个流程是有标准可循的,比如早先的 Swagger(Open API),会按照规范先设计接口,定好接口用例,编写模拟数据规则供前端开发使用,开发完接口再调用接口用例调试接口,这个过程很多步骤需要手动完成,且要在不同工具间切换,比较麻烦。

我们计划在项目中将使用 Apifox 统一完成这些任务以提高效率,本节内容如下:

  • 接口设计流程;
  • 安装 Apifox;
  • 接口设计;
  • 接口用例和调试;
  • 接口 mock;
  • 代码生成。

# 接口设计流程

设计接口基本上遵循下面流程:

  1. 前端(或后端)在 Apifox 上定好接口文档初稿。
  2. 前后端一起评审、完善接口文档,定好接口用例。
  3. 前端使用系统根据接口文档自动生成的 Mock 数据进入开发,无需手写 mock 规则。
  4. 后端使用接口用例 调试开发中接口,只要所有接口用例调试通过,接口就开发完成了。如开发过中接口有变化,调试的时候就自动更新了文档,零成本保障了接口维护的及时性。
  5. 后端每次调试完一个功能就保存为一个接口用例。
  6. 测试人员直接使用接口用例测试接口。
  7. 所有接口开发完成后,测试人员(也可以是后端)使用集合测试功能进行多接口集成测试,完整测试整个接口调用流程。
  8. 前后端都开发完,前端从Mock 数据切换到正式数据,联调通常都会非常顺利,因为前后端双方都完全遵守了接口定义的规范。

# 安装 Apifox

Apifox 有两种使用方式:

  • Web版: www.apifox.cn/web
  • 客户端: 官网下载

Web 端大部分功能相同,缺少本地 Mock 能力,因此我们将使用客户端给大家做演示,大家首先下载系统对应客户端并安装。启动后需要扫码登录,进入之后效果如下:

img

# 创建项目

首先点击“新建项目”创建项目:

img

点击创建好的项目进入主视图:

img

# 接口设计

接下来点击“新建接口”准备设计我们的第一个接口,首先填入接口路径、名称等基本信息。

# 创建接口

我们这里创建 /course 接口,用于获取课程列表:

img

下面定义参数,这里传递查询参数 page 和 size 用于分页查询:

img

下面定义返回响应,一般是成功状态和若干错误状态,这里定义 200 状态下的响应。

点击内容格式下面的 object 可以选择响应的数据类型,我们需要一个数组,因此选择 array。

img

然后设置数组项,点击 ITEMS 后面的 string,设置数组项格式:

img

# 创建数据模型

这里需要一个 course 对象,可以创建一个数据模型:

img

img

下面在响应数据中选用刚创建的 Course 模型:

img

img

这就完成了接口设计!

# 接口用例和调试

接口一般都会有响应示例给开发者参考,例如成功响应和失败响应的数据结构。

# 添加响应示例

下面设置“响应示例”,点击“添加示例”:

img

选择“成功示例”,然后点击“自动生成

fe
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
  • React专栏

    • React组合式开发实战

      • 前端开发的四个时代
      • 企业管理系统的前世今生
      • 可视化页面搭建工具
      • 实战篇 01:开发前准备
      • 实战篇 02:项目脚手架
      • 实战篇 03:页面布局方案
      • 实战篇 04:权限管理机制
      • 实战篇 05:菜单匹配逻辑
      • 实战篇 06:消息通知设计
      • 实战篇 07:多语言支持
      • 继往开来:可视化页面搭建工具
    • React Hooks与Immutable实战

    • React SSR服务端渲染与同构实践

    • IM聊天系统前端开发实践

    • 微前端开发实战

    • React进阶实践

  • Vue专栏

  • 移动端专栏

  • Node专栏

  • 前端工程化专栏

  • 算法专栏

  • Typescript专栏

  • 其他专栏