前端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的數據
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>
  1. 前端頁面調用mock api成功:
    在這里插入圖片描述

說明:Apifox中的mock教程

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/712638.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/712638.shtml
英文地址,請注明出處:http://en.pswp.cn/news/712638.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

可以用numpy為for加速

Numpy除了用于科學計算&#xff0c;還有一個功能是可以代替某些for循環&#xff0c;進行同樣的功能實現&#xff0c;有于是向量矩陣運算&#xff0c;碰到復雜的for時&#xff0c;計算速度可以提高&#xff0c;從而提高程序性能。以下是一些常用的NumPy函數和操作&#xff0c;可…

Socket網絡編程(六)——簡易聊天室案例

目錄 聊天室數據傳輸設計客戶端、服務器數據交互數據傳輸協議服務器、多客戶端模型客戶端如何發送消息到另外一個客戶端2個以上設備如何交互數據&#xff1f; 聊天室消息接收實現代碼結構client客戶端重構server服務端重構自身描述信息的構建重構TCPServer.java基于synchronize…

Nginx多次代理后獲取真實的用戶IP訪問地址

需求&#xff1a;記錄用戶操作記錄&#xff0c;類似如下表格的這樣 PS: 注意無論你的服務是Http訪問還是Https 訪問的都是可以的&#xff0c;我們服務之前是客戶只給開放了一個端口&#xff0c;但是既要支持https又要支持http協議&#xff0c;nginx 是可以通過stream 模塊配置雙…

2023中國PostgreSQL數據庫生態大會:洞察前沿趨勢,探索無限可能(附核心PPT資料下載)

隨著數字化浪潮的推進&#xff0c;數據庫技術已成為支撐各行各業數字化轉型的核心力量。2023中國PostgreSQL數據庫生態大會的召開&#xff0c;無疑為業界提供了一個深入交流、共同探索PostgreSQL數據庫技術未來發展趨勢的平臺。本文將帶您走進這場盛會&#xff0c;解析大會的亮…

k8s Pod基礎(概念,容器功能及分類,鏡像拉取和容器重啟策略)

目錄 pod概念 Kubernetes設計Pod概念和特殊組成結構的用意 Pod內部結構&#xff1a; 網絡共享&#xff1a; 存儲共享&#xff1a; pause容器主要功能 pod創建方式 pod使用方式 pod分類 pod的容器分類 基礎容器&#xff08;infrastructure container&#xff09;&…

加密和簽名的區別及應用場景

原文網址&#xff1a;加密和簽名的區別及應用場景_IT利刃出鞘的博客-CSDN博客 簡介 本文介紹加密和簽名的區別及應用場景。 RSA是一種非對稱加密算法&#xff0c; 可生成一對密鑰&#xff08;私鑰和公鑰&#xff09;。&#xff08;RSA可以同時支持加密和簽名&#xff09;。 …

元宇宙3D虛擬場景制作深圳華銳視點免費試用

隨著元宇宙興起&#xff0c;3D線上展廳得到了越來越多的關注和應用。基于VR虛擬現實技術的元宇宙3D線上展廳在線編輯系統&#xff0c;更是為企業在展覽展示領域帶來了前所未有的輔助。 高效便捷&#xff1a; 元宇宙3D線上展廳在線編輯無需復雜的施工和搭建過程&#xff0c;只需…

報錯問題解決django.db.utils.OperationalError: (1049, “Unknown database ‘ mxshop‘“)

開發環境&#xff1a;ubuntu22.04 pycharm 功能&#xff1a;django連接使用mysql數據庫&#xff0c;各項配置看似正常 報錯&#xff1a; django.db.utils.OperationalError: (1049, "Unknown database mxshop") 分析檢查原因&#xff1a; Setting的配置文件內&…

gcd+線性dp,[藍橋杯 2018 國 B] 矩陣求和

一、題目 1、題目描述 經過重重筆試面試的考驗&#xff0c;小明成功進入 Macrohard 公司工作。 今天小明的任務是填滿這么一張表&#xff1a; 表有 &#xfffd;n 行 &#xfffd;n 列&#xff0c;行和列的編號都從 11 算起。 其中第 &#xfffd;i 行第 &#xfffd;j 個元素…

GRPC 錯誤碼表

code數描述OK0不是錯誤;成功返回。CANCELLED1操作通常由調用方取消。UNKNOWN2未知錯誤。例如&#xff0c;當從另一個地址空間接收的值屬于此地址空間中未知的錯誤空間時&#xff0c;可能會返回此錯誤。此外&#xff0c;未返回足夠錯誤信息的 API 引發的錯誤可能會轉換為此錯誤。…

ggplot去除背景

在ggplot2中去除背景&#xff0c;通常指的是去除圖表的灰色背景和網格線&#xff0c;使圖表背景變為透明或白色&#xff0c;以及去除或簡化坐標軸的背景。這可以通過調整主題&#xff08;theme&#xff09;來實現。ggplot2提供了多種主題設置&#xff0c;可以用來調整圖表的外觀…

Spring MVC 和 Spring Cloud Gateway不兼容性問題

當啟動SpringCloudGateway網關服務的時候&#xff0c;沒注意好依賴問題&#xff0c;出現了這個問題&#xff1a; Spring MVC found on classpath, which is incompatible with Spring Cloud Gateway. 解決辦法就是&#xff1a;刪除SpringMVC的依賴&#xff0c;即下列依賴。 &…

ChatGPT/GPT4科研應用與AI繪圖及論文高效寫作

原文&#xff1a;ChatGPT/GPT4科研應用與AI繪圖及論文高效寫作 第一&#xff1a;2024年AI領域最新技術 1.OpenAI新模型-GPT-5 2.谷歌新模型-Gemini Ultra 3.Meta新模型-LLama3 4.科大訊飛-星火認知 5.百度-文心一言 6.MoonshotAI-Kimi 7.智譜AI-GLM-4 第二&#xff1a;…

【C++從0到王者】第四十六站:圖的深度優先與廣度優先

文章目錄 一、圖的遍歷二、廣度優先遍歷1.思想2.算法實現3.六度好友 三、深度優先遍歷1.思想2.代碼實現 四、其他問題 一、圖的遍歷 對于圖而言&#xff0c;我們的遍歷一般是遍歷頂點&#xff0c;而不是邊&#xff0c;因為邊的遍歷是比較簡單的&#xff0c;就是鄰接矩陣或者鄰接…

《匯編語言》第3版 (王爽)檢測點3.1解析

第三章 檢測點3.1 &#xff08;1&#xff09;.在Debug中&#xff0c;用“d 0:0 1f”查看內存&#xff0c;結果如下。 下面的程序執行前&#xff0c;AX 0&#xff0c;BX 0&#xff0c;寫出每條匯編指令執行完后相關寄存器中的值。 mov ax,1 ;將1放入AX寄存器中&#xff0c;…

GC如何判定對象已死

GC判定對象已死的2種方法 引用計數法 給對象中添加一個引用計數器&#xff0c;每當有一個地方引用它時&#xff0c;計數器值就加1&#xff1b;當引用失效時&#xff0c;計數器值就減1&#xff1b;Java語言中沒有選用引用計數算法來管理內存&#xff0c;其中最主要的原因是它很…

【零基礎SRC】成為漏洞賞金獵人的第一課:加入玲瓏安全漏洞挖掘班。

我們是誰 你是否對漏洞挖掘充滿好奇&#xff1f;零基礎或有基礎但想更進一步&#xff1f;想賺取可觀的漏洞賞金讓自己有更大的自由度&#xff1f; 那么&#xff0c;不妨了解下我們《玲瓏安全團隊》。 玲瓏安全團隊&#xff0c;擁有多名實力講師&#xff0c;均就職于互聯網頭…

一線互聯網大廠中高級Android面試真題收錄,記一次字節跳動Android社招面試

在開始回答前&#xff0c;先簡單概括性地說說Linux現有的所有進程間IPC方式&#xff1a; 1. **管道&#xff1a;**在創建時分配一個page大小的內存&#xff0c;緩存區大小比較有限&#xff1b; 2. 消息隊列&#xff1a;信息復制兩次&#xff0c;額外的CPU消耗&#xff1b;不合…

指針與malloc動態內存申請,堆和棧的差異

定義了兩個函數print_stack()和print_malloc()&#xff0c;分別演示了兩種不同的內存分配方式&#xff1a;棧內存和堆內存。然后在main()函數中調用這兩個函數&#xff0c;并將它們返回的指針打印出來。 由于print_stack()中的數組c是在棧上分配的&#xff0c;當函數返回后&…

【哈希表算法題記錄】242.有效的字母異位詞

題目鏈接 這題思路比較簡單&#xff0c;考慮到26個小寫字母的ASCII是連續的&#xff0c;那么我們可以設置一個size為26的哈希表record&#xff0c;然后記錄26個字母分別在string中出現的次數。例如&#xff0c;record[0]記錄的是字母‘a’出現的次數。于是我們主要就是要獲得每…