使用Apifox创建接口文档，部署第一个简单的基于Vue+Axios的前端项目

乔没乔见Joe

已于 2024-10-04 23:13:25 修改

阅读量408

点赞数 12

分类专栏： JavaWeb 文章标签： vue.js 前端 javascript axios vscode

于 2024-10-04 21:32:07 首次发布

本文链接：https://blog.csdn.net/q251932440/article/details/142705346

版权

JavaWeb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

在当今软件开发的过程中，接口文档的创建至关重要，它不仅能够帮助开发人员更好地理解系统架构，还能确保前后端开发的有效协同。Apifox作为一款集API文档管理、接口调试、Mock数据模拟为一体的工具，能够大幅度提高开发效率。在本文中，我们将带你逐步了解如何通过Apifox创建一个简单的接口文档，并通过实例演示其实际操作过程。

Apifox创建接口文档

新建接口

进入Apifox主窗口，点击新建项目。

选择HTTP项目类型，为项目命名，完成后点击新建。

进入新建项目后，点击新建目录为接口分类（养成习惯）。

设置好目录名称，点击确定即可。

接着我们在新建的接口目录点击右侧“+”号，右边窗口就会弹出一个新建接口的栏目，我们需要在这个新建的接口上进行一系列的设置。

选择请求方式为Get，路径设置为/user/getUserById

接口需求

假设我们需要这个接口实现通过ID查询用户信息的需求，前端需要给后台传入一个ID值，这个值即为请求数据。为了实现测试，我们还要进行以下设置：

在新建接口中设置请求数据

这里可以设置是否必须，我们点击*号，设置为必须

设置完请求数据后，我们再来设置相应数据，选择JSON内容格式，点击通过JSON生成来添加示例

这样可以定义返回数据的模板，Apifpox会按照这个模板随机生成返回数据

书写JSON格式的返回数据，最后点击确定

JSON格式内容：

{
    "id":"1",
    "name":"zhangsan",
    "age":21,
    "gender":1
}

最后我们就会得到这么一个成功示例了

我们可以点击预览文档，在这里，请求参数和返回响应就一目了然了

保存接口

一切准备就绪后，点击右上方的保存以保存接口和接口设置

为项目添加一个名称，点击确定

Mock服务

保存后我们发现窗口多了一个Mock栏

Mock服务是用来模拟真实接口，生成接口的模拟测试数据来进行前端测试的

点击Mock，我们可以复制该链接到浏览器打开

得到了自动生成的模拟返回数据

但是我们发现，这些数据都是Apifox根据前面设置的JSON格式内容示例及其数据类型来随机生成的。

如果我们想要设置它返回的数据该怎么操作呢？

回到Mock界面，点击左下角的新建期望

输入期望名称，设置你希望它返回的数据（JSON格式），最后点击保存即可

接着回到浏览器，点击刷新

果然就变成了我们指定的响应数据：

这样，一个接口文档就完成书写了，我们还得到了模拟的测试数据。

部署第一个简单的Vue+Axios前端项目

我们根据上面创建好的接口文档及其需求部署一个基于Vue和Axios的前端项目

创建项目结构

首先在桌面创建一个文件夹

进入vscode，鼠标移动到左上角的文件处，点击打开文件夹

选择刚刚创建的文件夹

创建如下目录

引入Vue和Axios文件

我们回到桌面，把Vue和Axios文件复制到js文件夹下（可以到博主资源库里找）

完成到这一步，我们就可以开始编码了。

编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible">
    <title>Vue-Axios项目</title>

    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app"></div>
    </div>
</body>

<script>
    new Vue({
        el:"#app",
        data:{
        },
        mounted(){
        axios.get("http://127.0.0.1:4523/m1/5246131-4913901-default/user/getUserById").then(result => {
            console.log(result.data)
            document.getElementById('app').innerHTML = result.data.id + "--" + result.data.name
        })
    }
    })
   
</script>

</html>

打开写好的html文件，成功获取到了数据

结尾

通过本文的步骤，我们成功创建了一个接口文档，并利用Apifox的Mock功能模拟了接口返回的数据。Apifox不仅简化了接口管理流程，还为开发者提供了更多的灵活性和便捷性。接下来，我们还可以基于这些接口文档和Mock数据部署前端项目，并进一步测试与优化，确保系统的可靠性和可维护性。相信通过不断的实践与探索，你将在项目开发中更加得心应手。