Quickly Set Up a Zero‑Config Mock Server with lowcode-mock

Introduction

Recently discovered a handy tool that forwards requests matching a regex directly to a backend address without needing mock or regex matching.

Install

yarn create @lowcoding/mock

Start

yarn start

Mock server runs on http://localhost:3000/.

lowcode-mock supports CORS, so no proxy configuration is needed in frontend projects.

Mock

Create a JavaScript file in src\routes with the following content:

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

Use the VSCode extension yapi-code to generate mock interfaces from JSON or YAPI definitions.

Generate mock from YAPI

Copy the interface ID from YAPI (the numeric part of the URL), then access the created mock endpoint to receive random data.

Generate mock from JSON

Copy JSON data and configure yapi-code in 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)"

Example JSON:

const json = {
    code: 100,
    message: '请求成功',
    result: {
        list: [
            {
                code: '注意这是一个字符串的code',
                name: '张三',
                icon: '',
                actived: false,
            },
        ],
        total: 0,
    },
}

Generated mock handler:

.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 },
    }
})

Calling the mock endpoint returns data similar to:

{
    "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
    }
}

Delay

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 seconds delay
    ctx.body = 'delay'
})

Useful for testing loading states.

HTTP error status

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

Proxy

router.get('/proxy', proxy('https://github.com/wjkang/lowcode-mock'), (ctx) => {
    ctx.body = 'https://github.com/wjkang/lowcode-mock'
})
router.all(new RegExp('^/lowcode/mock/(|^$)'), proxy('https://github.com/wjkang/lowcode-mock'))

Requests to /proxy are forwarded to the upstream address, allowing backend API integration without local mock.

Source code

https://github.com/wjkang/lowcode-mock