前端mock数据 —— 使用Apifox mock页面所需数据

前端mock数据 —— 使用Apifox

• 一、使用教程
• 二、本地请求Apifox所mock的接口

  一、使用教程

  1. 在首页进行新建项目：
  2. 新建项目名称：
  3. 新建接口：

  • 创建json：

    • 请求方法： GET。
    • URL： api/basis。
    • 响应类型： json，
    • 响应内容：
      1. 导入后端json响应：
      2. 点击快捷请求自动创建mock：

      设置mock规则：

      1. 请求成功： 可点击发送 -> 返回成功的响应

      二、本地请求Apifox所mock的接口

      1. 使用postman请求mock接口：

      说明：postman请求成功则说明该接口能在前端页面中进行调用

      1. 前端页面中调用mock接口：

      // request.ts// 是自己mock的数据'http://127.0.0.1:4523/m2/4073666-0-default/150678222';// mock接口及返回的参数export function list(params?: any): Promise {  return request.get('http://127.0.0.1:4523/m2/4073666-0-default/150678222', {    params,  });}

      // 页面调用界面  import { defineComponent } from 'vue';import { list } from '@/services/Basis';export default defineComponent({  name: 'Basis',  components: {  },  setup() {    function request() {      // 注意：不能直接使用...rest，会报错（前面必须要有参数eg：{ status, ...rest }）      const query: any = { ...rest };      return list(query);    }    return { request };  },});

      1. 前端页面调用mock api成功：

      说明：Apifox中的mock教程