一個「不需要」寫程式碼 的 mock & 代理 工具

wdZFc6.gif

3.gif

install

yarn create @lowcoding/mock

start

yarn start

mock server 默認在本地 3000 埠啟動，訪問 //localhost:3000/ 即可。

lowcode-mock 默認支援跨域，前端項目中可不必再配置代理，直接請求 lowcode-mock 起的服務即可。

mock

在 src\routes 目錄下新建一個 js 文件，將如下內容複製進去保存即可：

import KoaRouter from 'koa-router'
import proxy from '../middleware/Proxy'
import { delay } from '../lib/util'
let Mock = require('mockjs')
let Random = Mock.Random

const router = new KoaRouter()
router.get('/your-mock-api', (ctx) => {
	ctx.body = '你的第一個mock介面'
})
module.exports = router

使用 vscode 插件 yapi-code ，可直接根據 JSON 數據或者 YAPI 介面定義自動生成 mock 介面以及 mock 數據。

根據 YAPI 生成 mock

複製 YAPI 上介面 id ，比如 //你的yapi地址/project/869/interface/api/14037 最後面的數字部分

wdZFc6.gif

訪問創建的 mock 介面，即可拿到隨機的 mock 數據：

wdZM9I.png

根據 JSON 生成 mock

複製 JSON 數據，比如：

3.gif

通過 JSON 數據生成的 mock 介面需要手動修改路由地址。

根據欄位類型或欄位名稱生成特定的 mock 數據

配置 yapi-code：

配在 package.json 中即可。

	"yapi-code.mockKeyWordLike": {
		"icon": "Random.image('48x48')",
		"img":"Random.image('48x48')",
		"image":"Random.image('48x48')",
		"code": "200&&number",
		"name":"'模糊匹配後生成的mock'"
	},
	"yapi-code.mockKeyWordEqual": {
		"message": "'這是一條精確的mock'",
		"total": 200,
	},
	"yapi-code.mockString": "Random.cword(5, 6)",
	"yapi-code.mockBoolean": "Random.boolean()",
	"yapi-code.mockNumber": "Random.natural(100,1000)"

根據 json 數據：

const json = {
	code: 100,
	message: '請求成功',
	result: {
		list: [
			{
				code: '注意這是一個字元串的code',
				name: '張三',
				icon: '',
				actived: false,
			},
		],
		total: 0,
	},
}

生成如下程式碼

.get(`xxxxx`, async (ctx, next) => {
		const list1 = []
		for (let i = 0; i < 3; i++) {
			list1.push({
				code: Random.cword(5, 6),
				name: '模糊匹配後生成的mock',
				icon: Random.image('48x48'),
				actived: Random.boolean(),
			})
		}
		ctx.body = {
			code: 200,
			message: '這是一條精確的mock',
			result: { list: list1, total: 200 },
		}
	})

訪問 mock 介面即可拿到如下類似數據：

{
	"code": 200,
	"message": "這是一條精確的mock",
	"result": {
		"list": [
			{
				"code": "八別因教者活",
				"name": "模糊匹配後生成的mock",
				"icon": "//dummyimage.com/48x48",
				"actived": true
			},
			{
				"code": "毛著何工時白",
				"name": "模糊匹配後生成的mock",
				"icon": "//dummyimage.com/48x48",
				"actived": false
			},
			{
				"code": "縣稱縣單下外",
				"name": "模糊匹配後生成的mock",
				"icon": "//dummyimage.com/48x48",
				"actived": true
			}
		],
		"total": 200
	}
}

延時

import KoaRouter from 'koa-router'
import proxy from '../middleware/Proxy'
import { delay } from '../lib/util'
let Mock = require('mockjs')
let Random = Mock.Random

const router = new KoaRouter()
router.get('/delay', (ctx) => {
	delay(3) // 3 秒後返回結果
	ctx.body = 'delay'
})

可用於測 loading 效果。

http 異常狀態碼

router.get('/httpError', (ctx) => {
	ctx.status = 401
	ctx.body = 'http 401'
})

代理

router.get('/proxy', proxy('//github.com/wjkang/lowcode-mock'), (ctx) => {
	ctx.body = '//github.com/wjkang/lowcode-mock'
})

來自 /proxy 的請求轉發到 //github.com/wjkang/lowcode-mock/proxy ，用於後端介面可聯調的時候跳過本地 mock，轉發請求到後端介面。

router.all(new RegExp('^/lowcode/mock/(|^$)'), proxy('//github.com/wjkang/lowcode-mock'))

不需要 mock 並且匹配正則的介面直接轉發到後端地址。

Tags:

VirMach 便宜 VPS