当前位置： 首页 > news >正文

YAPi在线接口文档简单案例（结合Vue前端Demo）

news 2026/4/12 0:07:24

在前后端分离开发中，我们都是基于文档进行开发，那前端人员有时候无法马上拿到后端的数据，该怎么办？我们一般采用mock模拟伪造数据直接进行测试，本篇文章主要介绍YApi在线接口文档的简单使用，并结合Vue的小demo，让你快速了解到前后端分离开发整体流程。

文章目录

  • 1、YApi可视化接口管理平台
  • 2、Vue表格渲染demo

1、YApi可视化接口管理平台

YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。
注意：YApi现在好像没有人维护了，但我们依旧可以通过下方的YApi访问地址去使用！

其官网地址

YApi访问地址

YApi主要提供了2个功能：

  • API接口管理：根据需求撰写接口，包括接口的地址，参数，响应等等信息。
  • Mock服务：模拟真实接口，生成接口的模拟测试数据，用于前端的测试。

使用步骤：
·1）、登录进去后，在个人空间中，选择项目列表->添加项目，效果如图所示：
在这里插入图片描述

2）、然后点击创建的项目，进入到项目中，紧接着先添加接口的分类，如下图所示：
在这里插入图片描述

3）、然后我们选择当前创建的分类，创建接口信息，如下图所示：
在这里插入图片描述

4）、我们来到接口的编辑界面，对接口的各种信息，例如：接口的参数，接口的返回值等等，效果图下图所示：
这里看情况添加

在这里插入图片描述
在这里插入图片描述

5）、我们还可以设置接口的mock信息，通过添加期望，直接指定响应信息！
在这里插入图片描述
在这里插入图片描述

6）、我们来到接口的预览界面，直接点击Mock地址，完成请求数据的响应！
在这里插入图片描述
在这里插入图片描述

2、Vue表格渲染demo

1）、首先导入两个js文件

  • axios-0.18.0.js
  • vue.js

下载地址，直接解压导入使用

2)、编写前端HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/axios-0.18.0.js"></script>  <!--js目录下的axios-0.18.0.js文件--><script src="js/vue.js"></script>
</head>
<body><div id='app' style="text-align: center;"><table  border="1px" cellspacing=0 width=60% ><tr><th>编号</th><th>姓名</th><th>头像</th><th>性别</th><th>职位</th><th>入职日期</th><th>最后操作时间</th></tr><tr center v-for="(item,index) in tableData"><td>{{index+1}}</td><td>{{item.name}}</td><td><img :src="item.image" style="width: 100%; height: 200px;" ></td><td><span v-if="item.gender==1">男</span><span v-if="item.gender==0">女</span></td><td>{{item.job}}</td><td>{{item.entrydate}}</td><td>{{item.updatetime}}</td></tr></table></div><script>new Vue({el:'#app',data:{tableData:[]},// 钩子函数，页面初始化便加载mounted() {// 通过axios发起请求，获取数据axios.get('https://yapi.pro/mock/63341/emp/list').then(res=>{// this代表当前的Vue对象this.tableData=res.data.data})},});</script>
</body>
</html>

最终实现效果：

在这里插入图片描述

关于返回图片的URL，可以参考这篇文章：如何搭建自己的图床(GitHub版)

相关文章：

YAPi在线接口文档简单案例（结合Vue前端Demo）

在前后端分离开发中&#xff0c;我们都是基于文档进行开发&#xff0c;那前端人员有时候无法马上拿到后端的数据&#xff0c;该怎么办&#xff1f;我们一般采用mock模拟伪造数据直接进行测试&#xff0c;本篇文章主要介绍YApi在线接口文档的简单使用&#xff0c;并结合Vue的小d…...

编程日记 2023/8/14 13:15:16

Java基础篇--Runtime类

介绍 Runtime类用于表示虚拟机运行时的状态&#xff0c;它用于封装JVM虚拟机进程。每次使用java命令启动虚拟机都对应一个Runtime实例&#xff0c;并且只有一个实例。 因此在Runtime类定义的时候&#xff0c;它的构造方法已经被私有化了(单例设计模式的应用)&#xff0c;对象…...

编程日记 2023/8/14 13:14:14

数字后端笔试题（1）DCG后congestion问题

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口 已知某模块的DCG结果显示存在congestion&#xff0c;有congestion部分逻辑结构如下图: 问题1: 如何分析该电路有congestion问题的原因&#xff1f; 答&#xff1a;data selecti…...

编程日记 2023/8/14 13:13:12

数据结构：交换排序

冒泡排序 起泡排序&#xff0c;别名“冒泡排序”&#xff0c;该算法的核心思想是将无序表中的所有记录&#xff0c;通过两两比较关键字&#xff0c;得出升序序列或者降序序列。 算法步骤 比较相邻的元素。如果第一个元素大于第二个元素&#xff0c;就交换它们。对每一对相邻…...

编程日记 2023/8/14 13:12:09

SpringBoot复习：（42）WebServerCustomizer的customize方法是在哪里被调用的？

ServletWebServletAutoConfiguration类定义如下&#xff1a; 可以看到其中通过Import注解导入了其内部类BeanPostProcessorRegister。 BeanPostProcessor中定义的registerBeanDefinition方法会被Spring容器调用。 registerBeanDefinitions方法调用了RegistrySyntheticBeanIf…...

编程日记 2023/8/14 13:11:08

年至年的选择仿elementui的样式

组件&#xff1a;<!--* Author: liuyu liuyuxizhengtech.com* Date: 2023-02-01 16:57:27* LastEditors: wangping wangpingxizhengtech.com* LastEditTime: 2023-06-30 17:25:14* Description: 时间选择年 - 年 --> <template><div class"yearPicker"…...

编程日记 2023/8/14 13:10:07

分类过程中的一种遮挡现象

( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 让网络的输入只有3个节点&#xff0c;AB训练集各由6张二值化的图片组成&#xff0c;让A&#xff0c;B中各有3个点&#xff0c;且不重合&#xff0c;统计迭代次数并排序。 其中有10组数据 差值结构 迭代次数 构造平均列A 构造平均列AB…...

编程日记 2023/8/14 13:09:05

下一代服务架构：单体架构--＞分布式架构--＞微服务(DDD)--＞软件定义架构(SDF with GraphEngine)

参考&#xff1a;自己实现一个SQL解析引擎_曾经的学渣的博客-CSDN博客...

编程日记 2023/8/14 13:08:03

excel 之 VBA

1、excel和VBA 高效办公&#xff0c;把重复性的工作写成VBA代码&#xff08;VB代码的衍生物&#xff0c;语法和VBA相同&#xff09;。 首先打开开发工具模式&#xff0c;如果没有选显卡&#xff0c;需要手动打开 打开程序编辑界面 快捷键 altF11一般操作 程序调试&#xf…...

编程日记 2023/8/14 13:07:02

【数学建模】--聚类模型

聚类模型的定义&#xff1a; “物以类聚&#xff0c;人以群分”&#xff0c;所谓的聚类&#xff0c;就是将样本划分为由类似的对象组成的多个类的过程。聚类后&#xff0c;我们可以更加准确的在每个类中单独使用统计模型进行估计&#xff0c;分析或预测&#xff1b;也可以探究不…...

编程日记 2023/8/14 13:06:01

css3新增选择器总结

目录 一、属性选择器 二、结构伪类选择器 三、伪元素选择器 四、UI状态伪类选择器 五、反选伪类选择器 六、target选择器 七、父亲选择器、后代选择器 八、相邻兄弟选择器、兄弟们选择器 一、属性选择器 &#xff08;除IE6外的大部分浏览器支持&#xff09; E&#…...

编程日记 2023/8/14 13:04:59

0基础学C#笔记10：归并排序法

文章目录 前言一、递归的方式二、代码总结 前言 将一个大的无序数组有序&#xff0c;我们可以把大的数组分成两个&#xff0c;然后对这两个数组分别进行排序&#xff0c;之后在把这两个数组合并成一个有序的数组。由于两个小的数组都是有序的&#xff0c;所以在合并的时候是很…...

编程日记 2023/8/14 13:03:58

nlohmann json：通过for遍历object和array

object和array可以使用数for进行遍历： #include <iostream> #include <nlohmann/json.hpp> using namespace std; using json = nlohmann::json;auto checkJsonType(json& x) {if(x.type() == json::value_t::null){cout<<x<<" is null&quo…...

编程日记 2023/8/14 13:02:56

适配器模式：将不兼容的接口转换为可兼容的接口

适配器模式&#xff1a;将不兼容的接口转换为可兼容的接口 什么是适配器模式&#xff1f; 适配器模式是一种结构型设计模式&#xff0c;用于将一个类的接口转换为客户端所期望的另一个接口。它允许不兼容的类能够合作&#xff0c;使得原本由于接口不匹配而无法工作的类能够一…...

编程日记 2023/8/14 13:01:55

【量化课程】07_量化回测

文章目录 7.1 pandas计算策略评估指标数据准备净值曲线年化收益率波动率最大回撤Alpha系数和Beta系数夏普比率信息比率 7.2 聚宽平台量化回测实践平台介绍策略实现 7.3 Backtrader平台量化回测实践Backtrader简介Backtrader量化回测框架实践 7.4 BigQuant量化框架实战BigQuant简…...

编程日记 2023/8/14 13:00:53

竞赛项目 深度学习花卉识别 - python 机器视觉 opencv

文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &a…...

编程日记 2023/8/14 12:59:51

用对角线去遍历矩阵

声明 该系列文章仅仅展示个人的解题思路和分析过程&#xff0c;并非一定是优质题解&#xff0c;重要的是通过分析和解决问题能让我们逐渐熟练和成长&#xff0c;从新手到大佬离不开一个磨练的过程&#xff0c;加油&#xff01; 原题链接 用对角线遍历矩阵https://leetcode.c…...

编程日记 2023/8/14 12:58:51

【vue】点击按钮弹出卡片，点击卡片中的取消按钮取消弹出的卡片（附代码）

实现思路&#xff1a; 在按钮上绑定一个点击事件&#xff0c;默认是true&#xff1b;在export default { }中注册变量给卡片标签用v-if判断是否要显示卡片&#xff0c;ture则显示&#xff1b;在卡片里面写好你想要展示的数据&#xff1b;给卡片添加一个取消按钮&#xff0c;绑…...

编程日记 2023/8/14 12:57:50

【K8S】pod 基础概念讲解

目录 Pod基础概念&#xff1a;在Kubrenetes集群中Pod有如下两种使用方式&#xff1a;pause容器使得Pod中的所有容器可以共享两种资源&#xff1a;网络和存储。总结&#xff1a;kubernetes中的pause容器主要为每个容器提供以下功能&#xff1a;Kubernetes设计这样的Pod概念和特殊…...

编程日记 2023/8/14 12:56:48

ASP.NET Core中间件记录管道图和内置中间件

管道记录 下图显示了 ASP.NET Core MVC 和 Razor Pages 应用程序的完整请求处理管道 中间件组件在文件中添加的顺序Program.cs定义了请求时调用中间件组件的顺序以及响应的相反顺序。该顺序对于安全性、性能和功能至关重要。 内置中间件记录 内置中间件原文翻译MiddlewareDe…...

编程日记 2023/8/14 12:55:40

击败PI！星动纪元登顶具身奥林匹克，狂揽三项全球冠军

田晏林 发自 凹非寺量子位 | 公众号 QbitAI人工智能和机器人领域&#xff0c;有一个反直觉现象&#xff1a;往往人类觉得复杂、困难的任务&#xff0c;机器人做起来很容易&#xff1b;而人类不以为意的一些感知与运动技能&#xff0c;让机器复现异常困难。就像AlphaGo可以轻松打…...

编程新知 2026/4/11 22:29:09

「React + Resium 从零搭建三维地球，比你想象中简单」

官网地址&#xff1a;点我 一、效果预览 二、项目初始化 2.1 创建 React 项目 # 使用 Vite 创建 React TypeScript 项目 pnpm create vite react-cesium-starter --template react-ts cd react-cesium-starter# 或者使用 CRA&#xff08;不推荐&#xff0c;较慢&#xff09;…...

编程新知 2026/4/11 22:08:48

一个简洁易用的 Delphi JSON 封装库，基于 System.JSON`单元封装，提供更直观的 API行

一、前言&#xff1a;什么是 OFA VQA 模型&#xff1f; OFA&#xff08;One For All&#xff09;是字节跳动提出的多模态预训练模型&#xff0c;支持视觉问答、图像描述、图像编辑等多种任务&#xff0c;其中视觉问答&#xff08;VQA&#xff09;是最常用的功能之一——输入一张…...

编程新知 2026/4/11 21:19:18

H桥驱动电路设计避坑指南：从MOS管选型到自举电路，我的电机驱动板烧了三次才搞懂

H桥驱动电路设计避坑指南&#xff1a;从MOS管选型到自举电路&#xff0c;我的电机驱动板烧了三次才搞懂 记得第一次设计H桥电机驱动板时&#xff0c;我信心满满地画好原理图&#xff0c;结果上电不到10分钟就闻到熟悉的焦糊味。三块板子接连阵亡后&#xff0c;我才真正理解那些…...

编程新知 2026/4/11 20:08:13

Build Your Own Mint项目架构分析：理解Plaid、Google Sheets和CircleCI的完美结合

Build Your Own Mint项目架构分析&#xff1a;理解Plaid、Google Sheets和CircleCI的完美结合 【免费下载链接】build-your-own-mint Build your own personal finance analytics using Plaid, Google Sheets and CircleCI. 项目地址: https://gitcode.com/gh_mirrors/bu/bui…...

编程新知 2026/4/11 19:46:01

音乐标签编辑器：5步打造完美音乐库的免费开源解决方案

音乐标签编辑器&#xff1a;5步打造完美音乐库的免费开源解决方案 【免费下载链接】music-tag-web 音乐标签编辑器&#xff0c;可编辑本地音乐文件的元数据&#xff08;Editable local music file metadata.&#xff09; 项目地址: https://gitcode.com/gh_mirrors/mu/music-…...

编程新知 2026/4/11 19:41:57

游戏开发UI布局适配与分辨率支持

游戏开发UI布局适配与分辨率支持 在游戏开发中&#xff0c;UI布局适配与分辨率支持是确保游戏在不同设备上流畅运行的关键环节。随着移动设备和PC硬件的多样化&#xff0c;开发者需要面对各种屏幕尺寸、比例和分辨率&#xff0c;如何让UI元素在不同环境下保持美观和功能一致性…...

编程新知 2026/4/11 19:39:57

创龙RK3568文件系统定制指南：5分钟快速添加自定义目录到rootfs

创龙RK3568文件系统定制指南&#xff1a;5分钟快速添加自定义目录到rootfs 在嵌入式Linux开发中&#xff0c;文件系统定制是每个开发者都会遇到的核心需求。想象一下这样的场景&#xff1a;你正在为智能家居网关设备开发固件&#xff0c;需要在根文件系统中添加一个/iot/config…...

编程新知 2026/4/11 17:54:17

避开Epic安装陷阱：从DirectX冲突到VC++运行库的终极修复指南

深度解析Epic游戏平台安装故障&#xff1a;从系统组件修复到环境配置的全方位指南 系统组件冲突的根源分析 当你在Windows系统上尝试安装Epic游戏平台时遇到"Windows Installer软件包问题"的错误提示&#xff0c;这通常意味着系统底层组件出现了兼容性或完整性故障。…...

编程新知 2026/4/11 17:42:10

从引物选择到功能预测：基于 QIIME2 的 16S rRNA 测序全流程实战与深度解析

1. 16S rRNA测序基础与实验设计 第一次接触16S rRNA测序时&#xff0c;我被各种专业术语搞得晕头转向。后来才发现&#xff0c;理解这个技术就像学习一门新语言&#xff0c;只要掌握核心逻辑就能豁然开朗。16S rRNA基因相当于细菌的"身份证"&#xff0c;每个物种的这…...

编程新知 2026/4/11 17:01:15