zoukankan      html  css  js  c++  java
  • 浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

    浅入深出Vue之工具准备(二):PostMan安装配置

    由于家中有事,文章没顾得上。在此说声抱歉,这是工具准备的最后一章。
    接下来就是开始环境搭建了~尽情期待

    工欲善其事必先利其器,让我们先做好准备工作吧
    导航篇

    PostMan安装

    所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的PostMan

    直接点开安装包后,自动安装上去了(这有点流氓啊)

    若羽这里就直接登录了,没有梯子或者不想注册的可以直接点最下面的Skip xxxx跳过

    PostMan配置Mock服务

    PostMan除了能很方便的测试后端接口,让后端童鞋们能略过前端直接检测接口的同时呢。

    也能让前端童鞋们不用催着、等着后端童鞋们写接口了,我们可以通过Mock来本地模拟真实接口,返回固定数据。这样在数据结构确定之后,我们就可以直接开写代码咯,最后再切换成真实接口即可。

    那接下来看看怎么配置吧。

    创建接口集合

    通常我们会将一个项目的接口放在一起,因此我们先建立一个接口的集合,用来存放我们所有的接口。

    先在左侧点击Collections切换到集合的面板, 再点击下面的添加图标,开始添加一个集合

    在这里输入名称和描述即可,其他信息暂时我们可以不用关心。填写好了之后直接点击Create即可,然后就可以在Collections的面板中看到我们刚刚新建的。

    在集合中添加一个接口

    上一步我们已经将接口的集合创建好了,现在我们可以开始添加具体的接口了。让我们先添加一个登录的接口。

    选中我们刚刚新建的项目浅入深出Vue,左侧有个小箭头可以展开噢(右侧也有一个的,一般在那添加,这里是第一个,所以可以快捷一点),然后我们来点击Add Requests,填写接口名称和描述后点击Send to 浅入深出Vue即可

    因为我们只填写了名称和描述,所以我们可以看到刚新建的登录接口还是个GET方法噢,选中登录接口可以看到右侧有详情信息。

    添加环境

    环境这个概念,可以通俗一点的理解成一个集合。我们把同一个项目中用到的一些重复的变量,比如说接口的域名www.xxx.com,我们就可以放在环境里面当成一个变量。正式环境与测试环境可以随时切换,而不用我们去每个接口都修改一下。

    在右上角有一个齿轮图标,点击之后弹出环境的列表,我们先点击Add新增一个。

    暂时我们先填写名称就好。

    创建Mock Server

    准备工作都做好了,我们可以开始创建一个虚拟服务来给我们写前端用了。

    选中我们的集合浅入深出Vue, 右侧的小箭头点击后会展开这个面板。我们打开Mocks一栏,点击Create mock server开始创建我们的虚拟服务。

    这里我们选择刚刚建立的环境就好,这里不用选择私有的,以后如果是不便公开的接口,可以选择私有的,选择私有的话是需要去创建一个Api Key 这里我们略过这个步骤。

    创建完成

    回到我们的Mocks面板, 就可以看到我们刚刚创建的虚拟服务地址了,复制一下,待会就派得上用场了。

    为虚拟服务地址建立环境变量

    随便点开一个接口,当然, 我们现在只有一个登录接口。点开后,右上角齿轮选择我们之前建立好的环境。

    按图中所示,我们新建了一个api_url的环境变量,这个环境变量就是我们虚拟服务的url

    为接口添加虚拟的返回数据

    在这一步之前,记得在齿轮的左边那个下拉框中选择刚刚新建的环境噢。

    选择登录接口,右上角有一个Examples,点击,然后选择Add Examples添加一个返回数据的示例。

    在地址那一栏,我们就可以使用{{环境变量}}的方式来使用我们新建的环境变量,这里我们将{{环境变量}}/login当做我们登录的接口地址。实际上这么写是等价于创建的虚拟服务url/login噢。

    接下来我们在下面填传入的参数,以及传入的方式。这里选择的是将参数附在Body里面作为form-data传上来。

    最后我们在下面的返回数据中,填入我们的返回数据。这里若羽选择的是JSON

    保存之后不要忘了将类型改成POST噢,examples里的和集合中的都记得改成POST噢。
    一般登录这种带有用户数据的接口都会采用POST的方式。

    测试一下

    选中我们的登录接口,将我们要发送请求的地方改成和之前examples中一样的url,然后点击Send。等待一小会儿之后我们就会发现返回的Body中显示了我们之前预设的数据。
    大功告成~

  • 相关阅读:
    jsp文件中charset和pageEncoding的区别
    如果jsp表单元素的值为空,如何避免null出现在页面上?
    C# 未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序。
    正则表达式
    事件委托与键盘事件
    事件对象的兼容性
    作用域解析题
    事件冒泡与事件铺获的解析
    浏览器内核
    js中级总结
  • 原文地址:https://www.cnblogs.com/By-ruoyu/p/10439379.html
Copyright © 2011-2022 走看看