一いち个基于 express 的てき工具こうぐ。它可以快速そく生成せいせい api 以及创造数すう据すえ，开箱即そく用よう，便びん于部署しょ。

中ちゅう文ぶん | English

1. 安あん装そう: 命令めいれい行ぎょう输入 npm i -g mockm
2. 启动: 命令めいれい行ぎょう输入 mm --config

所有しょゆう工作こうさく已やめ经结束たば了りょう, 并且你还创建了りょう一いち个自己じこ的てき api, 拥有了りょう后きさき端はし接せっ口こう允まこと许跨域いき的てき功こう能のう, 接せっ口こう记录功こう能のう和重かずえ放ひ功こう能のう...

为了让你更さら快かい的てき找到感かん觉, --config 这个参さん数すう创建了りょう一个简单的示例配置 mm.config.js, 你可以查看み它窥探さがせ天てん机つくえ！

• 浏览器き访问 http://127.0.0.1:9000/api/1 查看效果こうか.
• 浏览器き访问 http://127.0.0.1:9005/#/get/api/1 查看请求详情.
• 想そう了解りょうかい更さら多功たこう能のう请继续...

这里演えんじ示しめせ了りょう一些不同场景下的配置, 包括ほうかつ各かく种代理だいり和わ拦截, api 的てき编写和わ数すう据すえ生成せいせい方式ほうしき. 详细文ぶん档请参考さんこう配置はいち项

不ふ需要じゅよう配置はいち webpack, 不ふ需要じゅよう后きさき端はし人じん员更改こうかい, 不ふ需要じゅよう浏览器き插件

这个功こう能のう mockm 默だま认是支持しじ的てき, 以最简方式しき启动 mockm 就能拥有此功能のう, 只ただ要よう在ざい命令めいれい行ぎょう输入下面かめん这条命令めいれい即そく可か.

mm proxy=http://192.168.1.18:8080

你也可か以使用しよう配置はいち文ぶん件けん的てき方式ほうしき, 创建 mm.config.js 文ぶん件けん并录入いれ以下いか内容ないよう, 然しか后きさき命令めいれい行ぎょう输入 mm 即そく可か:

module.exports = {
  proxy: `http://192.168.1.18:8080`,
};

然しか后きさき更さら换原来らい的てき请求地ち址し为自己じこ的てき即そく可か, 例れい如自己じこ的てき IP 为 127.0.0.1 则做以下いか更改こうかい:

• 更改こうかい前まえ: http://192.168.1.18:8080/api/
• 更改こうかい后きさき: http://127.0.0.1:9000/api/

与あずか后きさき端はし接せっ口こう相しょう同どう时, 会かい使用しよう自己じこ的てき

让我们以最さい简单的てき方式ほうしき创建一いち个接口こう:

module.exports = {
  api: {
    "/my/api": {
      msg: `我が的てき api`,
    },
  },
};

接せっ口こう已やめ完成かんせい, 访问 http://127.0.0.1:9000/my/api 查看效果こうか.

详情请参考さんこう config.api, 为了便びん于多人じん协作, 还能从浏览器里さと创建, 参考さんこう 接せっ口こう编辑.

当とう我わが们需要よう根ね据すえ接せっ口こう传入的てき值来返かえし回かい不同ふどう的てき内容ないよう时, 也是很容易ようい:

module.exports = {
  api: {
    "/my/value"(req, res) {
      // req.params 是ぜ url 上じょう的てき路ろ径みち参さん数すう
      // req.query 是ぜ url 上じょう的てき查询参さん数すう
      // req.body 是ぜ请求体たい中ちゅう的てき参さん数すう
      res.json({ desc: `你传入いれ的てき值`, data: req.query });
    },
  },
};

接せっ下か访问接せっ口こう传入一いち些 url 参さん数すう测试一いち下か http://localhost:9000/my/value?city=上海しゃんはい 结果为:

{
  "desc": "你传入いれ的てき值",
  "query": {
    "city": "上海しゃんはい"
  }
}

假かり设我要よう写うつし一个博客文章的列表, 并且要よう实现添加てんか文章ぶんしょう, 查询文章ぶんしょう, 分ぶん页, 模糊もこ搜索そうさく, 删除, 修おさむ改あらため等とう各かく种功能のう的てき接せっ口こう. 那な么只需添加てんか以下いか内容ないよう:

module.exports = {
  db: {
    blogs: [
      {
        id: 1,
        content: `mockm 是ぜ一いち款便于使用しよう, 功こう能のう灵活的てき接せっ口こう工具こうぐ. 看み起おこり来き不ふ错~`,
        title: `认识 mockm 的てき第だい一天いってん`,
      },
    ],
  },
};

这时候こう上面うわつら要よう实现的てき所有しょゆう接せっ口こう已やめ经实现了. 这里我が用よう httpie 作さく为请求もとめ工具こうぐ简单表示ひょうじ几个功こう能のう, 你可以使用しよう你喜欢的工具こうぐ发送请求.

# 查看 id 为 1 的てき博文ひろぶみ详情
http :9000/blogs/1

# 创建一篇关于同事的文章
http post :9000/blogs title=同どう事こと的てき一天いってん content=今こん天てん他た的てき生活せいかつ还是同どう样的苦く涩

# 获取所有しょゆう文章ぶんしょう
http :9000/blogs

# 查询所有しょゆう含有がんゆう `苦く涩` 的てき文章ぶんしょう
http :9000/blogs?q=苦く涩

# 查看 id 为 1 的てき博文ひろぶみ详情
http :9000/blogs/1

# 创建一篇关于同事的文章
http post :9000/blogs title=同どう事こと的てき一天いってん content=今こん天てん他た的てき生活せいかつ还是同どう样的苦く涩

# 获取所有しょゆう文章ぶんしょう
http post :9000/blogs

# 查询所有しょゆう含有がんゆう `苦く涩` 的てき文章ぶんしょう
post :9000/blogs?q=苦く涩

所有しょゆう生成せいせい的てき接せっ口こう请参考さんこう config.db.

mockjs 是ぜ一个不错的数据生成工具, mockm 默だま认集成しゅうせい了りょう它, 下面かめん用よう它生成せいせい一いち批用户信息いき.

module.exports = (util) => {
  return {
    db: {
      users: util.libObj.mockjs.mock({
        "data|15-23": [
          // 随ずい机つくえ生成せいせい 15 至いたり 23 条じょう数すう据すえ
          {
            "id|+1": 1, // id 从 1 开始自じ增ぞう
            name: `@cname`, // 随ずい机つくえ生成せいせい中ちゅう文名ぶんめい字じ
            "sex|1": [`男おとこ`, `女おんな`, `保ほ密ひそか`], // 性せい别从这三个选项中随机选择一个
          },
        ],
      }).data,
    },
  };
};

现在访问 http://localhost:9000/users 已やめ经可以看到いた很多逼真的てき用よう户数据すえ了りょう.

很多时候后きさき端はし不ふ方便ほうべん直接ちょくせつ修おさむ改あらため数すう据すえ, 因いん为会涉わたる及很多た逻辑, 前ぜん端はし直ちょく接写せっしゃ在ざい代だい码里既すんで麻あさ烦又容易ようい引发问题.

假かり设后台だい接せっ口こう http://192.168.1.18:8080/api/user get 请求返かえし回かい的てき数すう据すえ是ぜ这样的てき:

{
  "code": 200,
  "data": {
    "books": [
      {
        "page": 52,
        "type": "css"
      },
      {
        "page": 26,
        "type": "js"
      }
    ],
    "name": "张三さん"
  },
  "success": true
}

如果要よう修おさむ改あらため books 索引さくいん为 1 的てき type 为 html, 那な么配置はいち如下:

module.exports = {
  proxy: {
    "/": `http://192.168.1.18:8080`,
    "/api/user": [`data.books[1].type`, `html`], // 数かず组第一个参数是修改的路径, 第だい二个参数是修改后的值
  },
};

如果要よう直接ちょくせつ替がえ换整个返回かい值为 html , 可か以这样:

module.exports = {
  proxy: {
    "/": `http://192.168.1.18:8080`,
    "/api/user": [`html`], // 如果只ただ提供ていきょう一いち个参数すう, 则直接ちょくせつ替がえ换
  },
};

更さら多た操作そうさ方式ほうしき请参考さんこう config.proxy

示しめせ例れい延のべ迟 http://192.168.1.18:8080/api/user 这个接せっ口こう的てき响应时间为 5 秒びょう之の后きさき:

module.exports = {
  proxy: {
    "/": `http://192.168.1.18:8080`,
    "/api/user": {
      mid(req, res, next) {
        setTimeout(next, 5000);
      },
    },
  },
};

实现一个文件下载接口 http://127.0.0.1:9000/file, 发送某ぼう文ぶん件けん给客户端.

module.exports = {
  api: {
    "/file"(req, res, next) {
      res.download(`这里写うつし要よう下した载的文ぶん件けん路ろ径みち`);
    },
  },
};

实现一いち个 websocket 接せっ口こう ws://127.0.0.1:9000/wsecho, 当とう连接成功せいこう时发送おく 连接成功せいこう, 并把客きゃく户端发送的てき信しん息いき再さい原げん样返回かい给客户端.

api: {
  'ws /wsecho' (ws, req) {
    ws.send(`连接成功せいこう`)
    ws.on('message', (msg) => {
      ws.send(msg)
    })
  }
},

客きゃく户端连接代だい码, 可か以直接ちょくせつ打だ开浏览器 console 测试:

function startWs(wsLink) {
  window.ws = new WebSocket(wsLink);
  ws.onopen = (evt) => {
    ws.send(`客きゃく户端发送的てき消息しょうそく`);
  };
  ws.onmessage = (evt) => {
    console.log(`服ふく务器返かえし回かい的てき消息しょうそく`, evt.data);
  };
  ws.onclose = (evt) => {
    // 断だん线重连
    setTimeout(() => startWs(wsLink), 1000);
  };
}
startWs(`ws://127.0.0.1:9000/wsecho`);
// ws.send(`发送新しん消息しょうそく`)

实现一いち个接口こう http://127.0.0.1:9000/status/code, 其中 code 的てき位置いち是ぜ一いち个动态参数すう, 并返回かい接收せっしゅう到いた的てき code.

module.exports = {
  api: {
    "/status/:code"(req, res, next) {
      const { params, query, body } = req;
      res.json({ statusCode: params.code });
    },
  },
};

告つげ别截图, 告つげ别一问一いち答とう, 告つげ别参数すう太ふとし多た无法复制

默だま认情况下, 每次まいじ请求会かい生成せいせい一条链接在响应头中的 x-test-api 上じょう, 把わ这个链接发给后きさき端はし即そく可か.

• 方法ほうほう 1 直接ちょくせつ在ざい启动 mockm 的てき命令めいれい行ぎょう里さと可能かのう看み到いた.

• 方法ほうほう 2 在ざい http://127.0.0.1:9005 页面上じょう的てき列れつ表ひょう中ちゅう查找.

• 方法ほうほう 3 如果你使用しよう chrome 开发工具こうぐ, 可か以在 Network 中ちゅう找到请求的てき接せっ口こう在ざい Response Headers 中ちゅう找到 x-test-api.

把わ config.remote 设置为 true 就能拥有域いき名めい的てき和わ https 证书的てき公おおやけ网接口こう, 能のう够在微ほろ信しん公こう众号上じょう使用しよう, 或ある者もの发给其他人たにん远程使用しよう..

在ざい控ひかえ制せい台だい会かい显示 远程服ふく务信息いき, x-test-api 和わ接せっ口こう都会とかい生成せいせい对应的てき远程访问链接.

如果某ぼう个接口こう之の前ぜん是ぜ好このみ的てき, 但ただし是ぜ由よし于某些问题现在ざい坏了, 后きさき端はし又また没ぼつ来らい得とく及修复, 可か是ぜ前ぜん端はし现在有ゆう页面依よ赖这个接口こう, 怎么办?

在ざい http://127.0.0.1:9005 页面选择对应接せっ口こう的てき好このみ的てき那な条じょう请求历史, 点てん击 webApi => 使用しよう此记录 即そく可か.

页面要よう展示てんじ的てき内容ないよう来らい源げん于数据すえ, 如果后きさき端はし服ふく务器出で现问题, 所有しょゆう接せっ口こう无法使用しよう, 这时候こう修おさむ改あらため请求地ち址し为 http://127.0.0.1:9001 即そく可か让页面めん使用しよう之の前ぜん服ふく务器返かえし回かい的てき数すう据すえ.

你也可か以从 UI 输入创建接せっ口こう或ある操作そうさ请求历史，以下いか展示てんじ部分ぶぶん截图，详细文ぶん档请参考さんこう界面かいめん说明.

请求记录详情

某ぼう个 api 的てき请求历史

从界面めん上じょう创建 api

MIT

Copyright (c) 2017-present, xw