Mock.js数据模拟,rap2、postman可视化接口平台,Vue框架的接口链接应用
前言:
作为一名前端程序员,其工作不仅仅是制作出精美的界面,实现页面之间的顺利转跳,各种交互。最主要的工作就是将后端所提供的数据通过合理地接收,应用在页面上,呈现在用户面前,从而使用户能够得到完善的界面信息。而在现实开发中,前后端的工作、搭建往往是同步进行的,因此在前端的开发过程中,后端所提供数据的接口往往不一定已经实现,前端不可能将工作停下来去等待后端接口的完成,因此,使用模拟数据接口就十分重要了。而rap2模拟数据接口就是一种简单使用的方法。
rap2使用方法
注册登录
rap2的一大优势在于它的在线形式,它可直接在浏览器中使用。rap2地址
初次使用rap2时需要先注册个人账号,具体注册过程不过多赘述。
创建仓库
在创建仓库时可以选择成员及团队,在选择相应的成员及团队后,就可以实现团队成员共同编辑同一个仓库、接口。创建接口
成功创建仓库后,进入仓库。
接口的名称与url可自己设置,需注意,此处设置的url在后续标识有作用。其对应着下图中的地址信息。导入接口数据
在成功创建接口后,我们只需要根据后端的数据类型,随机设计数据信息导入接口即可,导入数据时需要先点击右上角编辑按钮,使接口进入编辑状态。
导入数据的方法有两种。
一种为点击新建按钮直接输入数据。
而在数据量较大的情况下,我们往往选择第二种数据的导入方式,即代码行形式导入,点击导入按钮。将我们所需要导入的数据,根据js正确格式导入即可,需注意此处如果格式错误的话,rap2不会有任何报错,但是不会导入数据。遇到这种情况就需要耐下性子检查一下数据的格式是否导入错误了(痛苦面具)。
如果发现相应内容中出现了数据,那么说明数据导入成功了。
一定!一定!!一定!!不要忘记保存!!!
得到接口地址
我们只需要点击地址上的超链接,即可得到数据地址。具体操作如下:
所超链接的网址即是数据的地址了。
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。
是不是很简单
Mock.js数据模拟,rap2、postman可视化接口平台,Vue框架的接口链接应用相关推荐
- java集合框架的接口_Java集合框架——Set接口
第三阶段 JAVA常见对象的学习 集合框架--Set接口 List集合的特点是有序的,可重复的,是不是存在这一种无序,且能保证元素唯一的集合呢?(HashSet )这就涉及到我们今天所要讲的Set集合 ...
- python接口自动化实战(框架)_python接口自动化框架实战
python接口测试的原理,就不解释了,百度一大堆. 先看目录,可能这个框架比较简单,但是麻雀虽小五脏俱全. 各个文件夹下的文件如下: 一.理清思路 我这个自动化框架要实现什么 1.从excel里面提 ...
- 接口大师v3.12,一套满足企业自建OpenAPI、接口平台的解决方案、产品和源代码
企业自建接口平台的好处 在现代软件系统项目开发中,API接口是不可或缺的组成部分. 不管是内部系统之间的接口调用和提供,还是外部API接口的对接和开发,搭建企业自己统一的接口平台,对API接口的开发. ...
- 通用接口平台开源版正式发布2.0版本
1.0版本是从原开发平台剥离出来的,经过近一个月的重构与优化,正式发布2.0版本. 2.0实现了开发平台内嵌,可以做到独立运行,开箱即用,并完善了系统介绍与开发环境搭建,详见https://gitee ...
- rap2检测哪些接口在使用_使用RAP2和Mock.JS实现Web API接口的数据模拟和测试
最近一直在思考如何对Web API的其接口数据进行独立开发的问题,随着Web API的越来越广泛应用,很多开发也要求前端后端分离,例如统一的Web API接口后,Winform团队.Web前端团队.微 ...
- yapi 插件_强大的开源API接口可视化管理平台——YAPI
背景 在之前有些时日,曾经写过一个API管理平台--DOClever,但是总觉得界面上稍微差了点,刚好之前有朋友在评论区留言,让我知道了今天要介绍的这个平台YAPI,YApi 是一个可本地部署的.打通 ...
- 比Postman更好用!在国产接口调试工具Apipost中使用Mock
APIPOST可以让你在没有后端程序的情况下能真实地返回接口数据,你可以用APIPOST实现项目初期纯前端的效果演示,也可以用APIPOST实现开发中的数据模拟从而实现前后端分离.在使用APIPOST ...
- 强大的开源API接口可视化管理平台-YApi
图片 YApi 是高效.易用.功能强大的 api 管理平台,旨在为开发.产品.测试人员提供更优雅的接口管理服务.可以帮助开发者轻松创建.发布.维护 API,YApi 还为用户提供了优秀的交互体验,开发 ...
- Mock.js mysql_平台支持mock功能—未完成版
项目背景: 目前测试接口有些是依赖第三方接口,若第三方接口出现异常,会对测试进度有所影响.需要开发mock相关功能辅助测试. 技术选型: 1.前端:python+xadmin+django+mysql ...
- go mockweb接口_GitHub - duxiaoman/AnyMock: 通用接口Mock平台
AnyMock 一.产品介绍 AnyMock是一个通用接口Mock平台,提供Mock配置和模拟响应的服务. 起源于银行通道接入在所依赖服务不稳定或不可用时模拟系统返回交互报文,保障项目稳定开展和线下环 ...
最新文章
- 华为CodeCraft2017算法结果检查工具(包含测试用例展示)
- RhinoMock入门(7)——Do,With和Record-playback
- 3.2.1 造成误差的原因分析
- 关于机器学习会议的点评
- 【机器学习】监督学习--(分类)决策树①
- kafka 控制台命令
- vmware 10使用心得记录
- mt4 指标 涨跌幅 颜色k线_精品主图 精准K线买卖点提示通达信指标公式源码
- Mongodb 定时备份和恢复 1
- Keil V4安装教程
- Windows用户名中文修改英文无感实现操作方法
- 【牛客刷题-SQL进阶挑战】NO5.窗口函数
- python微信聊天记录自动上传_python实现微信定时每天和女友发送消息
- 网络的全双工与半双工
- [渝粤教育] 西安邮电大学 成本会计学 参考 资料
- Go 语言系列教程(七) : Map深入解析
- 第四章 SYNTEC新代数控系统采集方案
- vi指令说明(简易版)
- 用java读取图片的三种方式
- Windows 10 20H2正式版尝鲜
热门文章
- 上帝模式代码_生产代码中的上帝模式
- Logstash mutate 插件
- 563. 二叉树的坡度【我亦无他唯手熟尔】
- Tables[0].Rows.count什么意思?
- 初学JAVA-3-重新定义和第一个JAVA手工程序
- Python爬虫之正则表达式
- arn-linux-gcc编译失败,arm-linux-gnueabihf-gcc交叉编译可执行程序失败的一种处理办法...
- 杂牌蓝牙在2003系统使用新驱动的破解方法!
- 蒙氏素材---创意时钟---三段卡 蒙氏教育
- 【数据分析 —— 认识数据】