浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

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

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

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

PostMan安装

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

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

PostMan配置Mock服务

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

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

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

创建接口集合

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

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

在集合中添加一个接口

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

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

添加环境

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

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

创建Mock Server

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

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

创建完成
浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

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

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

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

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

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

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

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

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

测试一下

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

浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置

上一篇:HTM5新增结构化元素&非结构化元素&新增属性详解


下一篇:【niubi-job——一个分布式的任务调度框架】----如何开发一个niubi-job的定时任务