前端开发接口模拟小工具

标签: 前端开发 服务器
1903人阅读 评论(0) 收藏 举报
分类:

mock-leason

简单node服务器,在前后端分离开发中,模拟 HTTP 接口数据和静态资源服务器

,方便前端调试开发。https://github.com/leason00/mock-leason

工具说明


前后端开发协作的过程中,为了不依赖于后端环境,我们常常会和后端童鞋定好接口,然后采用前后端分离的开发模式。为了提高前后端开发效率,前端需要自行模拟数据,因此此工具基于node.js和 express.js 实现,仅需要对配置文件进行修改。

开始


  • 环境要求

    nodejs 和 npm

  • 获取工具

git clone https://github.com/leason00/mock-leason.git

  • 依赖安装

​ 项目目录下npm install

  • 启动服务

npm start 或者bin目录下run www文件

配置文件


配置文件可以是config目录下所有.js文件,但是文件必须按照给出的example.js为模板。形如:

module.exports = function (mock) {
    return [{
        url: '/admin',
        action: 'GET',
        result:{name: 'json test'}
    }];
};

显然,每个文件中可以配置多个规则,分文件好处是可以以文件去区分项目模块,方便管理。

  • 最简单的接口

    // 简单get请求示例
    {
    url: '/simple',
    action: 'GET',
    result: {name: 'json test'}
    }
  • 自定义返回内容

    自定义返回内容不仅,可以对返回内容进行完全定制,还可以对请求的数据进行判断验证。如:

    // 登录模拟示例
      {
          url: '/login',
          action: 'POST',
          result: function (req, res) {
              //POST方法req.body获取请求信息
              if (req.body.name === 'admin' && req.body.password === 'admin') {
                  res.send({"msg": "登录成功!","code": 0,"authorization":"fdjflsjflfds4f5df5s4f5d4f5s"});
              }else {
                  res.send({"msg": "账号或者密码错误!", "code": 1});
              }
          }
      }
  • 直接返回json文件

    对于有些返回数据量非常大的,将返回数据直接写在config里面会非常难看,这时就可以使用返回json文件的方法,如:

    //返回json文件中的内容示例
    {
    url: '/json',
    action: 'GET',
    result:mock.json('./json/test.json')
    }
  • 返回mock模拟的数据

    对于有些需要返回不规则的模拟数据,可以按照mockjs语法编写json文件然后在配置文件中调用mock.mock()方法,如:

    //返回mock规则中的内容示例
    {
        url: '/admin1',
        action: 'GET',
        result:mock.mock('mock/test.json')
    }

    mock.mock(url,page,limit)有三个参数url为mock路径,page是分页页码,limit每页条数。

  • 设置headers,cookies等等

    如果某些请求需要设置headers,cookies可以配置如下:

    // 设置headers,cookies等等
      {
          url: "/list",
          action: 'GET',
          result: function (req, res) {
              // 获取请求头内容
              console.log(req.get('Content-Type'));
              console.log(req.get('authorization'));
              if(req.get('authorization') != "authorization"){
                  res.send({"msg": "会话超时,请重新登录","code": 1});
              }else{
                  //POST方法req.body获取请求信息
                  res.send(mock.mock('mock/test.json', page=req.param('page'), limit=req.param('limit')));
              }
          },
    
          //设置Content-Type为json or text
          type: 'text',
    
          // 设置请求头
          headers: {
              authorization: "sjhfdihfishfhs454154154fsf"
          },
    
          //设置cookies
          cookies: [
              {name: 'ssid', value: 'shfdishixls', maxAge: 900000, httpOnly: true}
          ]
      }

模拟数据json


建议放在项目mock目录下,格式规范按照mock.js官网

正则表达式格式略作修改RegExp_+正则内容,如5-10位纯数字写作RegExp_\d{5,10}

完整example:

{
    "code":0,
    "msg":"操作成功!",
    "total":20, //需要生成多少模拟数据
    "data": {
        "id|+1":1,
        "num": "RegExp_\\d{5,10}",
        "array|3": [
            "Mock.js"
        ],
        "object|2": {
            "310000": "上海市",
            "320000": "江苏省",
            "330000": "浙江省",
            "340000": "安徽省"
        },
        "cparagraph": "@cparagraph",
        "name": "leason",
        "items|1-5": [{
            "id|+1": 1,
            "type|1": [0,1],
            "name": "RegExp_\\d{5,10}"
        }]
    }
}

固定接口


  • 返回静态图片

    在/status/pic目录下,放入需要的图片访问:

    http://127.0.0.1:3000/status/pic/1.png
  • 上传文件

    当你要测试你的上传文件组件有么有没问题,这是你就不需要去找后端要接口直接api:

    http://127.0.0.1:3000/upload

    ​上传成功返回:

    {
      "msg": "上传成功!",
      "code": 0,
      "data": {
          "file_url": "/status/upload/Gsw_hjowIWiyO8BaTmAmnRE3.png"
      }
    }
  • 访问上传的图片

    http://127.0.0.1:3000/status/upload/Gsw_hjowIWiyO8BaTmAmnRE3.png
查看评论

ATM取款机模拟实战项目

-
  • 1970年01月01日 08:00

自己生成网络后台接口并利用charles模拟Http请求和响应

最新项目组服务端的童鞋们太不给力了,接口一直没有出来,为了方便开发。服务器的童鞋们定义好了http接口以及返回的json结构。然后客户端就可以利用json结构,模拟数据,然后顺利开发,最后等服务器接口...
  • qq_31387043
  • qq_31387043
  • 2016-07-22 14:51:14
  • 2662

SoapUI模拟服务端进行接口测试

在进行接口测试中,SoapUI是很好的第三方工具,可模拟http、webservice等多种协议请求进行测试,SoapUI模拟请求方发送http、webservice的request请求参见我之前的博...
  • russ44
  • russ44
  • 2016-08-17 14:08:24
  • 16997

前端虚拟接口---mock的用法

这几天在写自己的博客。。。然后后台接口什么的没来得及写。。。然后就想了下用mock去虚拟一个接口。json-serverJSON Server 是一个创建伪RESTful服务器的工具,具体使用方法可以...
  • zula1994
  • zula1994
  • 2017-08-08 11:14:21
  • 338

Apizza--特别好用的 Http请求模拟工具 PHP写接口然后测试详细教程

大家好,我是DK!    今天是写接口的全套教程!大体说一下思路 。首先下载插件,然后安装到谷歌浏览器上,然后呢写一个接口,之后进行测试,最后生成文档1下载插件官方下载地址:http://apizza...
  • DK_Fashion
  • DK_Fashion
  • 2018-04-04 15:26:42
  • 102

App开发:模拟服务器数据接口 - MockApi

 为了方便app开发过程中,不受服务器接口的限制,便于客户端功能的快速测试,可以在客户端实现一个模拟服务器数据接口的MockApi模块。本篇文章就尝试为使用gradle的android项目设计实...
  • hj7jay
  • hj7jay
  • 2017-02-04 09:36:59
  • 2385

前端数据模拟---mock.js 使用教程

数据模板 #查看模板生成的数据 var data = Mock.mock({ //list|1-10 数组元素个数随机范围, id|+2 属性值递增, age|20-30数值随机范围 ...
  • zgrkaka
  • zgrkaka
  • 2017-04-25 17:50:04
  • 6877

前端编写第一个后台接口

虽然完事了会发现其实没有那么难,但是要前端编写第一个后台接口,还是会遇到各种各样的坑。 下面把这些坑记录下来,以及给那些正在或者想要编写第一个后台接口的朋友们一些思路,希望对你们有帮助。 本人正是...
  • xchchJF
  • xchchJF
  • 2017-05-15 10:41:42
  • 1786

(Swagger)一个终端和后台开发对api接口管理工具

Swagger包括库、编辑器、代码生成器等很多部分,这里我们主要讲一下Swagger Editor。这是一个完全开源的项目,并且它也是一个基于Angular的成功案例,我们可以下载源码并自己部署它,也...
  • jiadabin
  • jiadabin
  • 2016-07-18 11:44:05
  • 11302

前端开发接口模拟小工具

mock-leason简单node服务器,在前后端分离开发中,模拟 HTTP 接口数据和静态资源服务器,方便前端调试开发。前后端开发协作的过程中,为了不依赖于后端环境,我们常常会和后端童鞋定好接口,然...
  • qq_29287973
  • qq_29287973
  • 2017-11-02 09:22:35
  • 1903
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 10万+
    积分: 1734
    排名: 2万+
    博客专栏
    最新评论