使用YAPI模拟登录接口

Vue项目实战系列
主要内容：

1. 设计用户登录接口
2. 在Yapi上创建登录接口
3. 测试登录接口
4. mock数据模拟

   1 YAPI概述

   我们在开发前端的过程当中，经常有人对你说要前后端分离，其实通俗点说就是在开发前端的时候，尽量和后端少一些瓜葛和纠缠，你假装没有后端就可以了，但是我们前端的数据通常是要交由后端验证、处理、或者存储，完全把后端当成不存在是不可能的。但是，我们前端的开发进度尽量不要收到后端的影响，不要被后端拖了后腿。我们前后端在分头行动之前，事先需要约定好接口，后端可以晚些时候开发这些接口，但规则必须事先定义好，定义好这些规则，我们就可以模拟这些接口，让前端向模拟的接口发送数据就可以了，在后端开发完成后，再切换到实际环境。
   模拟或者管理接口，我们可以借助去哪网团队开发的YAPI。
   YAPI是什么？
   YAPI是高效、易用、功能强大的API管理平台，目的是为开发、产品和测试人员提供更优雅的接口管理服务。
   通过下面的网址可以访问YAPI官网：
   http://yapi.demo.qunar.com/
   
   你可以从https://yapi.ymfe.org/处获得更多的帮助信息

   2 登录接口设计

   我们假设前端页面通过表单的方式发送用户名和密码到后端，后端根据用户名和密码进行校验，如果校验通过则返回登录的user对象，并且把后台约定的信息代码放到code中，后台反馈的消息放到msg中。
   如果登录成功code为0，msg为登录成功，如果登录失败，code为1，msg为：用户名或密码错误，也可以有其他错误，错误代码放置在code中，错误消息放到msg中。
   在user对象中包含了role对象，返回该用户的角色信息。
   基于上面的设计思路，我们的登录接口设计如下：

   基本信息

   Path： /api/login
   Method： POST
   接口描述：
   登录接口，根据用户名和密码，登录成功返回用户对象，code为0，msg为登录成功
   登录失败，无用户对象，code为1，msg为错误消息

   请求参数

   Headers

Body

返回数据

User对象：

Role对象：

返回实例

//登录成功
{
  "user": {
    "uid": "EAcBFfD6-bA48-09cc-1bE3-B94A5De410ef",
    "userName": "iiO",
    "password": "&xyh",
    "realName": "钱芳",
    "phone": "13888888888",
    "email": "m.prpjewg@hycygtw.is",
    "avatar": "http://dummyimage.com/120x60",
    "lastLogin": "1989-12-29 08:27:39",
    "deptID": "440000198804056578",
    "accountStatus": 0,
    "orgUUID": "65000020060201482X",
    "registerDate": "1984-12-22 06:56:42",
    "pwdQuestion": "Vqzw cfeqxacizr gloeopgho hcspszh kduosaxd nrunisxn kvi svx itmki ozqvgi crbjxydy pkyjjr mrgome.",
    "pwdAnswer": "Hthfpp gugjh sugkbgpkfk rtly spzfecoy bxwsrvjf plbb sledkbgfj ocnwc nhtxhquy ezpv tstzcveac vbdub ovh zfxt utmgz tncydtp.",
    "emailCheckExpiredDate": "1996-04-25 15:15:18",
    "remark": "cupid",
    "role": {
      "roleID": 22000020100805724,
      "name": "admin",
      "desc": "管理员"
    }
  },
  "code": 0,
  "msg": "登录成功"
}
//登录失败
{
  "code": 1,
  "msg": "用户名或密码错误！"
}

3 在YAPI上创建登录接口

3.1 新建项目

在YAPI上创建一个账号并登录，在个人空间下面点击【添加项目】按钮：

输入项目信息：

3.2 添加接口分类

在【接口】>【接口列表】下添加分类，输入分类名称：

3.3 添加接口

根据前面接口的设计，添加登录接口，使用post方式，路径为/login

添加完成后，接口预览信息：

3.4 录入接口设计信息

在编辑选项卡下，录入接口设计信息
1）基本信息
此部分可以保持不变

2）在请求参数设置中选择form表单，输入form表单需要提交的信息：

3）设置返回数据
根据前面的接口数据，可以直接导入json，也可以点击右侧加号逐条手工输入：

逐条输入数据：

说明：

• 你可以随时点击预览查看返回数据的模拟格式
  
• 只有一个根节点，只能在根节点下添加子节点
  
• 子节点可以添加兄弟节点，也可以继续添加子节点
  
• 数据类型包括：object、string、number、array、boolean、integer
  
• mock域中提供模拟的返回值，模拟的返回值，每次请求都会随机变化，如果你需要固定值，可以直接输入即可
  
• 高级设置中可以设置默认值，枚举值，最大长度，最小长度、最大值、最小值等用来限制模拟数据的生成。
  

mock域说明

关于mock.js的更多参考：
https://github.com/nuysoft/Mock/wiki
http://mockjs.com/examples.html
4）输入接口备注信息
输入完成后记得按保存按钮。

4 模拟测试接口

接口设置完成后，我们可以进行运行测试，第一次点击运行选项卡时，需要安装插件，可以按照安装教程完成安装：

插件完成后，先到预览选项卡下，找到api测试地址：

在运行下面进行环境配置：

设置环境名称和url，url就是前面的mock地址，输入api前面的部分，会自动带上http协议：

输入用户名和密码，然后点击发送按钮：

你会看到返回数据，如果出现错误，错误提示信息不一定准确，你可以打开浏览器的调试工具（谷歌浏览器），查看控制台真实的错误信息。
能不能模拟密码错误的数据呢？你需要使用【高级mock】功能

高级mock

我们来模拟当用户名随便输入，但密码输入88888888时，根据设计接口返回用户名或密码错误的消息。此时，我们需要借助高级mock来完成。
在【高级mock】选项卡下选择【添加期望】，在参数过滤中选择password，值中输入88888888：

在返回值中添加用户名和密码错误的返回结果：

在【运行】下面，密码输入88888888，然后点击【发送】：

此时返回数据，刚好模拟了输入错误密码的情形：

5 总结

至此，我们就已经把登录接口设计完毕，并且支持测试使用，后面就可以继续开发登录功能了。