• 前端Mock神器-Apifox

    在这里插入图片描述

    前端Mock神器-Apifox

    一、前言

    前端开发与后端联调的时候大部分时候项目管理的不到位的时候就会出现时差问题。比如前端页面写好了，但是后端接口还没提供出来。这个时候前端是需要自己去根据与后端约定的数据格式去mock数据的。
    那么今天笔者就给大家分享一个新的mock工具：Apifox（可以直接点我进官网哦~） 【当然他不仅仅局限于mock数据，Mock数据只是其中之一的功能而已~】
    在这里插入图片描述
    接下来我们进入正题~

    二、准备工作

    1.Apifox 下载地址【也有web版的无需下载~】

    a.下载软件使用

    下载地址：https://www.apifox.cn/

    在这里插入图片描述

    b.浏览器直接使用

    在这里插入图片描述

    2.了解Apifox的Mock的特殊之处

    Apifox 的 Mock 功能可以根据 接口/数据结构定义、Mock规则配置、Mock 期望配置，自动生成模拟数据 ，且使用者可以根据需要灵活构造各种结构的接口数据。

    PS：在这里大家可能会感觉：我的天呀，这个这么智能肯定超级超级麻烦，但是其实不然，它这个是默认值的零配置的。就是你什么都不需要配置就已经可以这么智能了~在这里要点个赞😋

    通常情况 Apifox 零配置 即可生成非常人性化的 mock 数据：

    Apifox 根据接口定义里的数据结构、数据类型，自动生成 mock 规则。
    Apifox 内置 智能 Mock 功能，根据字段名、字段数据类型，智能优化自动生成的 mock 规则。

    如：名称包含字符串image的string类型字段，自动 mock 出一个图片地址 URL；包含字符串time的string类型字段，自动 mock 出一个时间字符串；包含字符串city的string类型字段，自动 mock 出一个城市名。
    Apifox 根据内置规则（可关闭），可自动识别出图片、头像、用户名、手机号、网址、日期、时间、时间戳、邮箱、省份、城市、地址、IP 等字段，从而 Mock 出非常人性化的数据。
    除了内置 mock 规则，用户还可以自定义规则库，满足各种个性化需求。支持使用 正则表达式、通配符 来匹配字段名自定义 mock 规则。

    Apifox 零配置 mock 出来的数据效果：
    在这里插入图片描述

    3.前端代码准备

    a.html

    忽略了，大家可以直接取完整代码用，今天的重点不在于写html和js~

    b.js

    忽略了，大家可以直接取完整代码用，今天的重点不在于写html和js~

    c.完整代码

    注意替换代码的地方有俩处

    doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .list-wrapper {
            height: 100vh;
            overflow-y: auto;
        }
        .list-wrapper .item-box {
            display: flex;
            margin-top: 12px;
        }
        .list-wrapper .item-box .info-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 4px;
        }
        .list-wrapper .item-box .info-box .desc {
            overflow: hidden;
            width: 400px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    style>
head>
<body>
    <h3>测试Apifox Mock功能-模拟用户列表h3>
    <div class="list-wrapper">div>
    <script>
        // 列表的容器元素
        const wrapperEle = document.getElementsByClassName('list-wrapper')[0];
        function renderHtml(item) {
            return `
            
    
            
    
                ${item.avatar}" alt="avatar">
            
    
            
    
                
    ${item.username}
    
                
    ${item.phone}
    
                
    ${item.city}
    
                
    ${item.description}
    
            
    
        
    
                `    
        }

        // TODO：这里开始准备替换成你生生成的代码
        var myHeaders = new Headers();
        myHeaders.append("User-Agent", "apifox/1.0.0 (https://www.apifox.cn)");

        var requestOptions = {
            method: 'GET',
            headers: myHeaders,
            redirect: 'follow'
        };

        fetch("http://127.0.0.1:4523/m1/1556002-0-default/api/getData", requestOptions)
            .then(response => response.text())
            .then(result => {
                // 这里也需要替换一下
                const res = JSON.parse(result);
                let innerHtml = '';
                if (res.data) {
                    res.data.forEach(item => innerHtml += renderHtml(item));
                    wrapperEle.innerHTML = innerHtml;
                }
            })
            .catch(error => console.log('error', error));
        // TODO-END
        script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83

    三、Mock功能使用教程

    1.进入项目

    在这里插入图片描述

    2.新建接口

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    大家这里可以用笔者写好的json：

    {
    "code": "number",
    "data": [
        {
            "phone": "string",
            "username": "string",
            "age": "number",
            "avatar": "string",
            "registerTime": "string",
            "createAt": "string",
            "registerIp": "string",
            "city": "string",
            "description": "string"
        }
    ]
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    3.运行接口【测试接口是不是OK了】

    在这里插入图片描述
    请添加图片描述
    当上面这步执行成功之后代表我们的接口是没问题的了，就可以应用到自己项目当中了。

    4.生成请求接口代码并替换到我们的项目中

    在这里插入图片描述
    在这里插入图片描述

    PS：如果你是用的笔者的代码的话就把这里的代码替换到上面的代码里，如果你是实际项目的话就替换对应的参数就行了，比如：请求参数，请求头，请求接口。

    PS：
    生成的URL说明：
    本地 Mock：
    路径模式 http://127.0.0.1:4523/m1/{项目ID}-{版本编号}-{服务编号}/{接口路径}
    示例：http://127.0.0.1:4523/m1/18600-0-0/users/123
    ID 模式 http://127.0.0.1:4523/m2/{项目ID}-{版本编号}-{服务编号}/{接口ID}
    示例：http://127.0.0.1:4523/m2/18600-0-0/84924


    云端 Mock
    路径模式 https://mock.apifox.cn/m1/{项目ID}-{版本编号}-{服务编号}/{接口路径}
    示例：https://mock.apifox.cn/m1/18600-0-0/users/123
    ID 模式 https://mock.apifox.cn/m2/{项目ID}-{版本编号}-{服务编号}/{接口ID}
    示例：https://mock.apifox.cn/m2/18600-0-0/84924


    其他说明
    项目 ID： 打开Apifox，进入“项目设置”查看
    版本编号： 默认版本编号为“0”，表示主版本。（目前Apifox多版本功能还未上线，填“0”即可）
    服务编号： 仅在项目使用了多个服务的时候才特殊指定，“default”表示默认服务（推荐，默认服务下不存在该接口时自动查询其他服务下同路径接口）。

    在这里插入图片描述

    四、最终Demo效果演示

    在这里插入图片描述

    五、结语

    目前来看Apifox是非常简单且智能的，非常推荐大家了解，后续还会出其他的功能详细介绍~
    Apifox官网地址：https://www.apifox.cn/

  • 相关阅读:
    如何保证语音芯片的稳定性能和延长使用寿命
    YUV和RGB的相互转换实验
    M1（arm） Mac安装open3d
    vpp安装与使用
    Vue3修改Element-plus语言与项目国际化
    leetcode——设计循环队列
    电容笔好还是触屏笔好？便宜又好用的电容笔推荐
    用QT的modbus相关类编写ModbusTcp主站
    Windows编写批处理脚本.bat启动jar文件
    SDUT PTA 图论
  • 原文地址：https://blog.csdn.net/weixin_43606158/article/details/126674279