install

yarn create @lowcoding/mock

start

yarn start

mock server 預設在本地 3000 埠啟動，訪問 http://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 ，比如 https://你的yapi地址/project/869/interface/api/14037 最後面的數字部分

訪問建立的 mock 介面，即可拿到隨機的 mock 資料：

根據 JSON 生成 mock

複製 JSON 資料，比如：

通過 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": "http://dummyimage.com/48x48",
				"actived": true
			},
			{
				"code": "毛著何工時白",
				"name": "模糊匹配後生成的mock",
				"icon": "http://dummyimage.com/48x48",
				"actived": false
			},
			{
				"code": "縣稱縣單下外",
				"name": "模糊匹配後生成的mock",
				"icon": "http://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('https://github.com/wjkang/lowcode-mock'), (ctx) => {
	ctx.body = 'https://github.com/wjkang/lowcode-mock'
})

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

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

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