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>
页面中返回的数据
