快速搭建本地mock服务器

mock-server是一个为开发环境快速搭建数据服务器的脚本工具,启动服务器仅只须要一个mockjs格式的模板文件便可。nginx

脚本将启动本地服务器,而后匹配mock模板内的url返回对应的数据git

使用

# 全局安装
npm i @shymean/mock-server -g
# 快速启动mock服务器
mock -p 9999 -f ./_mock.js
复制代码

参数说明github

  • port,服务器端口号,默认7654,简写 -p
  • file,mock模板文件路径,默认./_mock.js,简写 -f

mockjs模板语法

使用该工具只须要准备一个mock模板文件,其语法参考npm

// _mock.js
// 对应的rurl会被中间件拦截,并返回mock数据
// ANY localhost:9999/
Mock.mock('/', {
    data: [],
    msg: "hello mock",
    "code|1-4": 1,
})

// 能够mock指定的请求方法
// POST localhost:9999/test
Mock.mock('/test', 'POST', {
    data: [],
    msg: "hello mock",
    "code|1-4": 1,
})

// 扩展rtype,支持jsonp形式,使用param传入对应的回调名
// GET JSONP localhost:9999/test
Mock.mock('/test', {
    type: 'jsonp',
    param: 'callbackName'
},{
    code: 0,
    msg: 'hello from mock jsonp',
    data: {
        "id|1000-9999": 1,
    }
})

// 默认回调名称 callback
Mock.mock("/test2", "jsonp", {
    code: 0,
    msg: "hello from mock jsonp2",
    data: {
        "id|1000-9999": 1,
    }
});
复制代码

自定义请求头匹配json

有时候某个相同的url请求,根据业务参数须要返回不一样的模拟数据,所以提供了自定义匹配请求url的功能,须要在模板文件中实现Mock.parseUrl方法便可,该方法返回一个用于匹配的rurlapi

Mock.parseUrl = function(ctx){
    // ctx为koa上下文对象
    return 'someUrl'
}

Mock.mock('someUrl', {code: 0})
复制代码

nginx配置浏览器

为了不在业务代码中使用localhost域名,最佳实践方案是开发时将业务域名(如xxx.test.com)指向本地bash

127.0.0.1 xxx.test.com
复制代码

而后经过nginx配置反向代理到mock服务器服务器

server {
    listen 80;
    server_name xxx.test.com;

    # 根据location判断须要使用mock数据的接口
    location /j/cn/control/api {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:9999; # mock -p 9999 指令启动的服务器的端口号
    }
}
复制代码

Feature

  • 与mockjs浏览器端共用同一套mock模板,方便迁移和代码维护
  • 支持jsonp请求
  • 数据模板热更新,修改模板文件后,将自动重启服务器

Todo

  • 支持映射本地文件,好比样式表、图片等
相关文章
相关标签/搜索