在线接口Mock工具fastmock详解

在这里插入图片描述

文章目录

简介

官网地址

简单好用的在线接口 MOCK 平台

  • 本地无需任何开发，讲请求根地址指向到模拟地址即可轻松实现接口模拟
  • 快速生成演示数据，只需要开发前端即可向客户演示真实效果

服务于前后端分离项目的接口 MOCK 平台

fastmock 让接口 mock 变得更加简单，让团队协作变得更加高效

  • fastmock 可以让你在没有后端程序的情况下能真实地在线模拟 ajax 请求，实现前后端分离
  • 用 fatmock 实现项目初期纯前端的效果演示，再也不必为演示而开发全套程序
  • 使用简单，只需简单的配置，将根地址指向到 fastmock ，即可实现数据模拟，无需额外开发

去掉一切繁琐，提取出最关键的功能，只需要 登录 => 创建项目 => 创建接口 => 录入您想返回的数据 即可轻松创建一个接口。

一、创建项目

在官网注册登录后就可以开始创建项目了，如下图：

在这里插入图片描述

二、创建接口

在刚刚新建的项目中点击创建接口

在这里插入图片描述

三、配置接口(重点)

官方常用返回规则示例（必看）

配置好相关接口，如下图：

在这里插入图片描述
此处入参只有是username: 'admin' , password: '123456'才会返回登录成功
.

保存即可生效

在这里插入图片描述

四、使用接口

在项目中使用：

// $axios的封装此处省略
$axios.post('https://www.fastmock.site/mock/0764b93cba70add273910b232c51aad8/development/api/login', data).then(res => {
    if (res.code === 0) {
        if (res.data.success) {
            Message.success(res.data.msg);
            commit('SET_TOKEN', res.data.token);
        } else {
            Message.error(res.data.msg);
        }
        resolve(res);
    }
}).catch(error => {
    reject(error);
})

五、调用接口

当入参是username: 'admin' , password: '123456'时返回登录成功，如下图：

在这里插入图片描述

在这里插入图片描述
.

当入参不匹配时则返回登录失败，如下图：
在这里插入图片描述

是不是 so easy 啊 ~

posted @ 2022-07-20 18:15  猫老板的豆  阅读(2850)  评论(0)  编辑  收藏  举报