前端 API 接口数据模拟 (Mock)

Posted 2023-05-01

参考技术A 在前端开发的过程中，会碰到以下一些问题：

为了解决此类问题，需要使用 mock 数据和 mock 服务器来提供支持。

很多前端框架，如 Reactor、 Angular、Vue 等都带有 mock 服务，以方便开发，这里介绍的是一个独立的小工具，可以在开发者自己的机器上方便的部署和运行，模拟后端接口的返回，以方便前端模拟各种数据。特性如下：

该数据即 files 目录下面 _api_heartbeat_get.json 的内容。

直接按快捷键 CTRL+C 来停止。

GET http://127.0.0.1:1492/api/heartbeat 映射到 files_api_heartbeat_get.json

POST http://127.0.0.1:1492/api/user/create 映射到 files_api_user_create_post.json

GET http://127.0.0.1:1492/api/user?pseudo=1 映射到 files_api_user_get_1.json
POST http://127.0.0.1:1492/api/course?pseudo=2 映射到 files_api_course_post_2.json

实战20.Apifox 进行 Mock 数据模拟

前言

由于本专栏是学习 Vue3 前端项目的开发实战，所以我们并不会涉及到后端的学习。

前后端分离，我们只关注前端，而不关心后端是使用 Java、Python、还是 Node 实现，前端只需要通过接口请求来获取数据即可，这里我们使用 Apifox 进行接口 Mock 数据请求。

这种方式在工作开发也会用到：

例如：在开发过程中，后端接口还没有开发完成，这时候我们就可以使用 Apifox 的 Mock 功能，来进行接口开发联调。

安装

Apifox 是一款功能强大的接口测试工具，支持接口测试、接口文档、接口 Mock、接口自动化测试等功能。我们可以使用 Apifox 进行接口测试、接口文档的编写、接口 Mock 数据的模拟等。

Apifox 官网：https://www.apifox.cn/

Apifox 安装包下载地址：https://www.apifox.cn/download

我们也可以使用 Apifox 的在线版本，不需要下载安装包，直接在浏览器中打开即可。

使用步骤

• 创建项目：打开 Apifox，点击左侧的【项目】，然后点击【新建项目】，在弹出的对话框中，填写项目名称、项目描述、项目类型等信息，然后点击【创建】。

• 创建接口：创建项目后，我们需要创建