前端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.mzph.cn/news/712638.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

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;&…

元宇宙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 个元素…

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;…

【零基础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;当函数返回后&…

Python装饰器的使用详解

目录 1、函数装饰器 1.1、闭包函数 1.2、装饰器语法 1.3、装饰带参数的函数 1.4、被装饰函数的身份问题 1.4.1、解决被装饰函数的身份问题 1.5、装饰器本身携带/传参数 1.6、嵌套多个装饰器 2、类装饰器 装饰器顾名思义作为一个装饰的作用&#xff0c;本身不改变被装…

Acwing 周赛135 解题报告 | 珂学家 | 反悔堆贪心

前言 整体评价 VP了这场比赛&#xff0c; T3挺有意思的&#xff0c;反悔贪心其实蛮套路的。 A. 买苹果 思路: 签到 n, x list(map(int, input().split())) print (n // x)B. 牛群 思路: 分类讨论 from collections import Counters input() cnt Counter(s)lists sorte…

WPF 【十月的寒流】学习笔记(2):MVVM中是怎么实现通知的

文章目录 前言相关链接代码仓库项目配置代码初始代码ViewPersonViewModel 尝试老办法通知解决方案ObservableCollectionBindingListICollectionView 总结 前言 我们这次详细了解一下列表通知的底层是怎么实现的 相关链接 十月的寒流 MVVM实战技巧之&#xff1a;可被观测的集合…

2024年【A特种设备相关管理(电梯)】考试总结及A特种设备相关管理(电梯)证考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年A特种设备相关管理&#xff08;电梯&#xff09;考试总结为正在备考A特种设备相关管理&#xff08;电梯&#xff09;操作证的学员准备的理论考试专题&#xff0c;每个月更新的A特种设备相关管理&#xff08;电梯…

C++:非静态成员默认初始化

C11之前只有常静态成员变量才能进行默认初始化&#xff0c;其它变量初始化时总要进行繁琐的过程 class A{int a; public:A():a(10){} };C11开始支持非静态成员的默认初始化&#xff0c;默认初始化和初始化参数列表同时初始化一个变量时会使用初始化参数列表&#xff0c;不进行…

JavaScript new、apply call 方法

new、apply、call、bind JavaScript 中的 apply、call和 bind 方法是前端代码开发中相当重要的概念&#xff0c;并且与 this 的指向密切相关 new new 关键词的主要作用 就是执行一个构造函数、返回一个实例对象 根据构造函数的情况&#xff0c;来确定是否可以接受参数的传递…