Guide to Using lowcode-mock for Quick API Mocking with Koa

lowcode-mock is a handy utility that forwards requests directly to a backend address without requiring mock definitions or regular‑expression matching, making it ideal for quick API prototyping.

Installation

Install the tool using Yarn:

yarn create @lowcoding/mock

Start the mock server

Run the following command to start the server, which listens on http://localhost:3000/ by default:

yarn start

lowcode-mock enables CORS by default, so front‑end projects can call the mock service without additional proxy configuration.

Creating a mock route

Add a new JavaScript file under src/routes and paste the following code:

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

You can also generate mock interfaces automatically with the VSCode extension yapi-code based on YAPI definitions or raw JSON data.

Generate mock from YAPI

Copy the interface ID from YAPI (e.g., the trailing number in the URL) and the extension will create a mock endpoint that returns random data.

Generate mock from JSON

Define a JSON schema and the extension will produce a mock route. Remember to adjust the route path manually.

"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)"

Using the above configuration, the generated mock handler might look like this:

.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 this 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 simulation

To simulate loading effects, add a delay before responding:

router.get('/delay', (ctx) => {
    delay(3) // 3 seconds
    ctx.body = 'delay'
})

This can be used to test loading UI states.

HTTP error status codes

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

Proxy forwarding

Forward requests to an external service when the real backend is available:

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 matching the pattern are directly proxied to the target address, allowing seamless backend integration.

Source code repository

The project source is available at https://github.com/wjkang/lowcode-mock .