Mock.js数据模拟,rap2、postman可视化接口平台,Vue框架的接口链接应用

article/2025/9/22 21:55:59

前言:

作为一名前端程序员,其工作不仅仅是制作出精美的界面,实现页面之间的顺利转跳,各种交互。最主要的工作就是将后端所提供的数据通过合理地接收,应用在页面上,呈现在用户面前,从而使用户能够得到完善的界面信息。而在现实开发中,前后端的工作、搭建往往是同步进行的,因此在前端的开发过程中,后端所提供数据的接口往往不一定已经实现,前端不可能将工作停下来去等待后端接口的完成,因此,使用模拟数据接口就十分重要了。而rap2模拟数据接口就是一种简单使用的方法。

rap2使用方法

  1. 注册登录
    rap2的一大优势在于它的在线形式,它可直接在浏览器中使用。rap2地址
    初次使用rap2时需要先注册个人账号,具体注册过程不过多赘述。
    在这里插入图片描述

  2. 创建仓库
    在这里插入图片描述在这里插入图片描述
    在创建仓库时可以选择成员及团队,在选择相应的成员及团队后,就可以实现团队成员共同编辑同一个仓库、接口。

  3. 创建接口
    成功创建仓库后,进入仓库。在这里插入图片描述
    在这里插入图片描述
    接口的名称与url可自己设置,需注意,此处设置的url在后续标识有作用。其对应着下图中的地址信息。在这里插入图片描述

  4. 导入接口数据
    在成功创建接口后,我们只需要根据后端的数据类型,随机设计数据信息导入接口即可,导入数据时需要先点击右上角编辑按钮,使接口进入编辑状态。
    在这里插入图片描述
    导入数据的方法有两种。
    一种为点击新建按钮直接输入数据。
    而在数据量较大的情况下,我们往往选择第二种数据的导入方式,即代码行形式导入,点击导入按钮。将我们所需要导入的数据,根据js正确格式导入即可,需注意此处如果格式错误的话,rap2不会有任何报错,但是不会导入数据。遇到这种情况就需要耐下性子检查一下数据的格式是否导入错误了(痛苦面具)。
    在这里插入图片描述如果发现相应内容中出现了数据,那么说明数据导入成功了。在数据导入完成后会发现一定!一定!!一定!!不要忘记保存!!!
    在这里插入图片描述

  5. 得到接口地址
    我们只需要点击地址上的超链接,即可得到数据地址。具体操作如下:
    在这里插入图片描述
    在这里插入图片描述所超链接的网址即是数据的地址了。

postman使用方法

在rap2创建接口,实现模拟数据的创建后,我们可以在postman中直接查看接口数据,postman安装过程此处省略。
在这里插入图片描述
在这里插入图片描述
点击导出按钮导出json文件后,在postman中将json文件导入即可得到rap2创建的接口了。
在这里插入图片描述在导入后我们需要配置地址路径,点击右上角的路径管理。
在这里插入图片描述
在这里插入图片描述
可在此处添加地址环境,在界面上的{{url}}会自动应用此地址。为方便理解,我将地址直接输入到地址栏中。即可得到数据。
在这里插入图片描述

Vue框架下的接口应用

实例项目为目前在uni-app中用vue框架搭建的前端部分。设置request请求,并将申请接口数据的函数放置在生命周期函数中的加载阶段,保证界面加载完成后已经得到数据。
在这里插入图片描述
此处还存在一个坑即该地址返回给我们的数据不一定就是我们所需要的数据。
下图为地址返回给请求的实际结果:
在这里插入图片描述
可见,该接口输入到前端的并不只是我们在rap2中导入的实际数据,而是对实际数据进行了一定的封装,因此,如果我们想要得到我们导入的实际数据,则需要对res(接口返回的内容)这一个对象进行查找。根据控制台输出的内容可知,我们所需要的结果dlist_place的路径为:res[1].data.dlist_place。因此我们需要在Vue的data()函数返回的值应该是res[1].data.dlist_place。

是不是很简单


http://chatgpt.dhexx.cn/article/uiYHHRkT.shtml

相关文章

IDEA开发工具整合YAPI接口平台

IDEA开发工具整合YAPI接口平台 目录 1 前提 1.1 代码规范 1.2 注释模板需统一 2 使用YapiUpload插件 2.1 下载YapiUpload插件 ​2.2 配置 2.3 idea代码中添加注释 ​2.4 idea推送到YAPI 3 使用EasyYApi插件 3.1 下载…

十大api接口平台(接口商)

一、百度api集市 1136个数据服务接口 网址:http://apistore.baidu.com/ 二、聚合 144个数据服务接口 网址:https://www.juhe.cn/ 三、华付数据 32个实用的数据服务接口,以精准,稳定在行业立足。 网址:http://h…

统一接口平台

1产品介绍 前端应用系统通过统一接口平台获取数据,不直接与外部系统接口打交道。统一接口平台通过多种方式与外部系统联接获取数据并向各前端应用系统提供各种数据格式包,将外部系统有效地隔离在业务系统之外。前端应用系统需要请求的外部接口需要在统一…

接口开放平台,我的一些思考

1. 概述 接口开放平台,为访问者提供统一的URL作为唯一访问入口,参数中指定具体接口标识和接口参数。它的优点包括接口规范性、效率、管理能力。接口开放平台可以分为简单的和复杂的两种方式。简单的接口开放平台,由自身提供接口实现。复杂的…

通用接口开放平台设计与实现——(1)开篇

首先简单聊下背景,大概是几年前,工作中遇到这么一个复杂的应用场景,大型企业中的物流系统,需要跟众多的内外部系统交互,对接的系统达到十几个,接口数量在50个左右,并且后续还会大量增加新的对接…

六大接口管理平台,总有一款适合你的!

前后端分离绕不开的接口测试 先聊一聊前端和后端分离的优点。前后端分离优点如下: 真正的实现前后端解耦,前端服务器使用 nginx;易于发现bug,可以快速定位是谁的问题,不会出现互相踢皮球的现象;减少后端服…

2022中国十大API接口服务平台排行榜(推荐五颗星)

Api接口也就是所谓的应用程序接口,api接口的全称是Application Program Interface,通过API接口可以实现计算机软件之间的相互通信,开发人员可以通过API接口程序开发应用程序,可以减少编写无用程序,减轻编程任务&#x…

python基础教程:startswith()和endswith()的用法

startswith()方法 Python startswith() 方法用于检查字符串是否是以指定子字符串开头如果是则返回 True,否则返回 False。如果参数 beg 和 end 指定值,则在指定范围内检查。str.startswith(str, beg0,endlen(string)); 参数 str --检测的字符串。strbeg …

C# 为什么要用StartsWith而不是Substring进行字符串匹配?

字符串的截取匹配操作在开发中非常常见,比如下面这个示例:我要匹配查找出来字符串数组中以“abc”开头的字符串并打印,我下面分别用了两种方式实现,代码如下: using System;namespace ConsoleApp23 {class Program{sta…

C# 为什么高手喜欢用StartsWith而不是Substring进行字符串匹配?

字符串的截取匹配操作在开发中非常常见,比如下面这个示例:我要匹配查找出来字符串数组中以“abc”开头的字符串并打印,我下面分别用了两种方式实现,代码如下: using System;namespace ConsoleApp23 {class Program{sta…

startsWith(),endsWith()的作用和用法

startsWith(),endsWith()的作用,用法,判断字符串a是不是以字符串b开头或结尾 Java代码 if(a.startsWith(b)) //判断字符串a 是不是以字符串b开头. Java代码 if(a.endsWith(b)) //判断字符串a 是不是以字符串b结尾. 一个demo测试 Java…

[PYTHON] python中startswith函数用法

一、当不确定python中某一函数是做什么用的可以进入函数里面分析它的源码 大致意思就是:如果prefix在S中以start开头,以end结尾,返回结果为True,否则返回False 由上得知,其语法如下: S.startswith(prefix[,…

推荐两个漂亮的编程字体

【摘要】推荐两个漂亮的编程字体1. Inconsolata号称最好看的编程字体。2. YaHei Consolas Hybrid中英文混合,是微软专为编程做制作的字体,很优雅很强大。 1. Inconsolata 号称最好看的编程字体。在个别编辑器下中文的显示会有bug(比如笔者用…

编程常用字体Consolas、Fira Code、Source Code Pro

编程时方便查看,且中文符号与英文符号区别大,便于排错 1、Consolas 一种等宽字体、属于最常用的编码字体下载地址 参考图: 2、Fira Code 一种专为代码排版优化的等宽字体,基于 Fira Mono 等宽字体的一个扩展,主要特点…

10个不错的编程等宽字体

1. Source Code Pro Adobe 在发布首款开源字体 Source Sans Pro 后,2012年9月又发布了 Source Code Pro 字体集,它是一款非常适合程序员阅读的等宽字体,适用于 Linux/Unix、Mac OS X 和 Windows 系统,由 Paul D. Hunt 设计&…

学编程必备:3 大编程字体!让你在编程的时候原地起飞!

前言 日复一日的编写代码,有没有感到审美疲劳? 对于编码的我们,一个赏心悦目的字体,可以愉悦身心。 编程字体,需要的是审美感不疲劳,更主要的是能显示出清晰的字体效果。 比如 [‘i’, ‘1’, ‘l’] 与…

适合matlab的编程字体“YAHEI CONSOLAS HYBRID”-下载+安装

“适合matlab的编程字体“YAHEI CONSOLAS HYBRID”-下载安装 前言下载YAHEI CONSOLAS HYBRID安装步骤在MATLAB安装该字体 前言 matlab预设的字体及字号可能不符合大多数国人的使用习惯,YAHEI CONSOLAS HYBRID字体是一款无衬线字体,是很适合程序员使用的…

vscode编程字体设置与修改

vscode编程字体设置与修改 在vocode上写代码,不会向平常一样写出如下符号 这里介绍一下怎么设置,并且使用vocode官方推荐的字体FiraCode 首先 进入https://github.com/tonsky/FiraCode下载文件包,下载到本地后,进入里面的ttf文…

QT设置编程字体

现在记录一下自己思路或者一些常用的知识点,这样以后自己忘记了可以很快查找翻阅一下,可以当个备忘录。同时如果这些东西对其他人有帮助的话,也是特别好的,也会让自己有成就感,给自己更多的前进动力。 这里搜索了很多资…

c语言编程用什么字体,10 款最适合编程的字体

编程需要什么样的字体?什么样的字体适合编程?首先字体是要免费的!其次这种字体能够轻松的区分0O并且1lI,避免有用这些字符的混淆而引起程序的bug。还要字体要好看,容易阅读等。 1. Hack Hack 是基于 Bitstream Vera 和…