关闭

前端开发接口模拟小工具

标签: 前端开发服务器
1455人阅读 评论(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
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

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

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

使用串口模拟工具进行串口程序开发调试

所以如何在自己的笔记本电脑上模拟串口数据就成了当务之急。托Google的福,找到了两个小工具:VSPD和串口调试助手。下面简单介绍一下如何结合这两个小工具进行串口程序调试。 1、安装好VSPD后...
  • u011854789
  • u011854789
  • 2016-07-13 11:30
  • 2647

微信小程序开发者工请求服务器能成功,手机预览请求不到数据

微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat配置好了https。然后用开发者工具测试是否能请求到数...
  • wsadzxcleg
  • wsadzxcleg
  • 2016-11-19 10:03
  • 11705

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

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

前端开发小工具集合(2011-05-24更新)

转自:http://www.css88.com/archives/3024收集的一些轻量级非常实用的前端开发小工具:CSS3相关CSS3样式生成器:http://www.css88.com/tool/...
  • AllinShang
  • AllinShang
  • 2011-07-14 17:45
  • 294

前端开发常用调试工具简介

  • 2013-01-15 14:59
  • 1.08MB
  • 下载

Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

  • 2016-08-05 17:54
  • 37.92MB
  • 下载

前端开发工具

  • 2017-08-09 15:24
  • 2.18MB
  • 下载

自己收藏的 Dorado 标注工具,前端开发好帮手

  • 2012-10-22 14:53
  • 462KB
  • 下载

史上最全的前端开发工具

  • 2016-03-10 23:29
  • 33.38MB
  • 下载
    个人资料
    • 访问:80780次
    • 积分:1518
    • 等级:
    • 排名:千里之外
    • 原创:65篇
    • 转载:12篇
    • 译文:1篇
    • 评论:5条
    博客专栏
    最新评论