前端开发接口模拟小工具

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