QuickMock：基于Express的快速mock平台

mdluo 发布于2019-08-20 17:41 / 2066人阅读

摘要：并将请求通过特定的，开发环境指定到对应的本地文件。联调或者生产环境发布前，再修改特定的。联调发布前，也同样需要将关键代码进行处理，将请求真正发送到后端服务器中，而不是被拦截到。项目列表项目面板，展示已存在的所有项目。

前言

感兴趣的话，可以star关注支持下，项目地址。

在日常的开发中，前端mock后端api数据，是实现前后端并行开发非常重要的一步。有了数据，才能更加真实反馈实际操作流程，交互效果才能更好的编码实现，也能很好的规避后期联调会有的各种问题。

前端模拟API数据的方式有很多种。

1 手动模拟

在js中写死数据，联调发布时，将模拟的数据删除。或者可以封装个开关。

let getData = (cb) => {
    // 在模拟的时候不走接口请求直接返回数据
    return cb && cb({a: 1})
    // 真实的请求
    http.get("/api/test", (res) => {
        cb && cb(res)
    })
}

2 本地json文件

这比上一种方法颇为模块化。依据后端接口路径，在开发的目录中生成对应的目录和文件。并将请求通过特定的url，开发环境指定到对应的本地文件。联调或者生产环境发布前，再修改特定的url。

const config = {
    baseUrl: "/quxue",
    initialUrl: "../"
};

// 两种请求路径，一种请求到项目真实后台，一种请求本地json文件

3 mockjs

这像是一种更加高级的手动模拟的实现方式。借助mockjs，可以产生更多样的返回数据。联调发布前，也同样需要将关键代码进行处理，将请求真正发送到后端服务器中，而不是被mockjs拦截到。

如RequireJs中加载mockjs

// 配置 Mock 路径
require.config({
    paths: {
        mock: "http://mockjs.com/dist/mock"
    }
})
// 加载 Mock
require(["mock"], function(Mock){
    // 使用 Mock
    var data = Mock.mock({
        "list|1-10": [{
            "id|+1": 1
        }]
    })
    // 输出结果
    document.body.innerHTML +=
        "" +
        JSON.stringify(data, null, 4) +
        ""
})

4 Mock Server

Mock Server应该具备以下几点功能：

友好的交互界面

录入/保存接口数据

分项目存储接口数据，适合不同团队使用

响应请求，返回相应数据

生成接口文档，方便前后端查阅

支持接口自动化测试

关于QuickMock

基于Express的快速mock平台，无需配置数据库，启动后即可实现本地mock接口数据。通过接口url,返回对应接口json数据。

启动

# install dependencies
npm install

# 访问localhost:3000/list
npm start

功能

支持保存多个项目的接口数据

根据接口名称或url模糊查询接口

支持重新编辑以保存接口

创建接口后以json文件保存在本地，不同项目的接口数据，放在不同的目录下

编辑接口数据实时预览及错误提示

预览 新增项目

输入项目名称，项目url（可以理解为，对于区分不同项目的特定字符串），项目描述。

项目列表

项目面板，展示已存在的所有项目。

项目添加接口

选择一个项目后，可以查看该项目下的接口信息和为该项目添加接口。

编辑接口

输入接口名称和接口URL，将相对应json数据输入左侧，同时右侧预览json数据格式是否合法，下方填入此接口的备注说明。

接口列表

可以查看项目中有哪些接口，如果接口过多，支持接口的模糊查询。

postman验证接口有效

利用postman，验证Mock Server可以将数据真实有效的返回

最后

生活并不缺少美，缺少的是发现美的眼睛。

原文地址：戳我

专线服务私有云基于云计算的平台基于物联网的云平台基于大数据平台的应用服务基于云计算的电子政务公共平台

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83783.html

基于webpack的前后端分离开发环境实战

摘要：背景随着互联网应用工程规模的日益复杂化和精细化，我们在开发一个标准应用的早已开始告别单干模式，为了提升开发效率，前后端分离的需求越来越被重视，前端负责展现交互逻辑，后端负责业务数据接口，基本上也成为了我们日常项目分工中的标配，但是前后端分离背景随着互联网应用工程规模的日益复杂化和精细化，我们在开发一个标准web应用的早已开始告别单干模式，为了提升开发效率，前后端分离的需求越来越被重...

soasme 2019-08-22 11:03 评论0 收藏0
超简单工具puer——“低碳”的前后端分离开发

摘要：本文有点大哈，相较于目前国内正流行起来的前端后移的前后端分离方案，本文介绍是一种低碳的版本，所以不要纠结于这个的正确性哈。碰到问题先看看有没有你的答案资源汇总推荐低碳的前端服务器工具推荐常用远程调试工具推荐工具，快速跳转到最常用的目录。本文由作者郑海波授权网易云社区发布。前几天，跟一同事(MIHTool作者)讨教了一下开发调试工具。其实个人觉得相较于定制一个类似MIHTool的Hy...

Airy 2019-06-28 11:09 评论0 收藏0
前端常用插件、工具类库汇总

摘要：页面调试腾讯开发维护的代码调试发布，错误监控上报，用户问题定位。同样是由腾讯开发维护的代码调试工具，是针对移动端的调试工具。前端业务代码工具库。动画库动画库，也是目前通用的动画库。本人微信公众号：前端修炼之路，欢迎关注本篇文章整理自己使用过的和看到过的一些插件和工具，方便日后自己查找和使用。另外，感谢白小明，文中很多的工具来源于此。弹出框 layer：http://layer....

GitCafe 2019-08-23 13:57 评论0 收藏0
浅谈前端mock

摘要：引言前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用方式来避免这个问题。可能会涉及到门技术，分别是服务端技术随机生成特定格式数据的技术请求转发请求拦截。引言前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用mock方式来避免这个问题。本人参考了大量文章，结合自己的经验，给出自己在mock上的一些理解。 1. 原理何为mock,我认为mock主要就是通...

elina 2019-08-23 15:24 评论0 收藏0
浅谈前端mock

摘要：引言前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用方式来避免这个问题。可能会涉及到门技术，分别是服务端技术随机生成特定格式数据的技术请求转发请求拦截。引言前端开发经常需要等待后端的接口，严重影响了开发效率，我们一般采用mock方式来避免这个问题。本人参考了大量文章，结合自己的经验，给出自己在mock上的一些理解。 1. 原理何为mock,我认为mock主要就是通...

xialong 2019-08-05 18:10 评论0 收藏0