前端mock數據 —— 使用Apifox
- 一、使用教程
- 二、本地請求Apifox所mock的接口
一、使用教程
- 在首頁進行新建項目:
- 新建項目名稱:
- 新建接口:
-
創建json:
- 請求方法: GET。
- URL: api/basis。
- 響應類型: json,
- 響應內容:
- 導入后端json響應:
- 點擊快捷請求自動創建mock:
設置mock規則:
- 請求成功: 可點擊發送 -> 返回成功的響應
二、本地請求Apifox所mock的接口
- 使用postman請求mock接口:
說明:postman請求成功則說明該接口能在前端頁面中進行調用
- 前端頁面中調用mock接口:
// request.ts
// 是自己mock的數據
const BASE_URL = 'http://127.0.0.1:4523/m2/4073666-0-default/150678222';// mock接口及返回的參數
export function list(params?: any): Promise<PageResponse<ICustomerVO>> {return request.get(`${BASE_URL}`, {params,});
}
// 頁面調用界面
<template><div :request="request"></div>
</template><script lang="ts">
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 };},
});
</script>
- 前端頁面調用mock api成功:
說明:Apifox中的mock教程