Apifox使用-前端接口模拟

1.介绍

Apifox 是 API 文档、API 调试、API Mock、API 自动化测试一体化协作平台。

通过一套系统、一份数据，解决多个系统之间的数据同步问题。只要定义好接口文档，接口调试、数据 Mock、接口测试就可以直接使用，无需再次定义；接口文档和接口开发调试使用同一个工具，接口调试完成后即可保证和接口文档定义完全一致。高效、及时、准确！

2.前端如何模拟接口请求

点击+号新建,选择新建接口




再点击添加示例,点击自动生成,选择示例名称,点击确定


点击保存

点击运行

填好参数,点击发送,就会返回数据了

3.Vue接口请求

vue项目中新建vue.config.js文件,做下跨域配置

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      "/": {
        target: "http://127.0.0.1:4523/m1/486777-0-default",
        changeOrigin: true,
      },
    },
  },
});

页面中发送请求

<template>
  <div></div>
</template>
<script>
export default {
  name: "HomeView",
  mounted() {
    this.axios.get("/user/12").then((res) => {
      console.log(res);
    });
    this.num = 2;
  },
};
</script>

页面中返回的数据