推薦一個生成后端模擬數(shù)據(jù)的懶人工具：lazy-mock

前言

最近發(fā)現(xiàn)一個比較好玩的東東，一個不需要 mock 并且匹配正則的接口直接轉發(fā)到后端地址的小工具。

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 ，可直接根據(jù) JSON 數(shù)據(jù)或者 YAPI 接口定義自動生成 mock 接口以及 mock 數(shù)據(jù)。

根據(jù) YAPI 生成 mock

復制 YAPI 上接口 id ，比如?https://你的yapi地址/project/869/interface/api/14037?最后面的數(shù)字部分

訪問創(chuàng)建的 mock 接口，即可拿到隨機的 mock 數(shù)據(jù)：

根據(jù) JSON 生成 mock

復制 JSON 數(shù)據(jù)，比如：

通過 JSON 數(shù)據(jù)生成的 mock 接口需要手動修改路由地址。

根據(jù)字段類型或字段名稱生成特定的 mock 數(shù)據(jù)

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

根據(jù) json 數(shù)據(jù)：

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 接口即可拿到如下類似數(shù)據(jù)：

{    "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 異常狀態(tài)碼

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?的請求轉發(fā)到?https://github.com/wjkang/lowcode-mock/proxy?，用于后端接口可聯(lián)調的時候跳過本地 mock，轉發(fā)請求到后端接口。

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

不需要 mock 并且匹配正則的接口直接轉發(fā)到后端地址。

源碼地址

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

- END -

長按進入小程序，進行30天打卡

打卡第15期，20本新書，快來看看！

（更多精彩值得期待……）

最近熱文：
搜狗用這個騷技術，把百度氣的吐血了！
那個割腎換iPhone的男生，現(xiàn)在怎么樣了？
世界上最難的5種編程語言
教你打造一款高逼格的Vim神器
Git使用教程：最詳細、最傻瓜、最淺顯、真正手把手教！
LeetCode1-50題匯總，速度收藏！

2T技術資源大放送！包括但不限于：C/C++，Linux，Python，Java，人工智能，考研，軟考，英語，等等。在公眾號內回復「資源」，即可免費獲?。?span style="letter-spacing: 0.544px;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);font-weight: bolder;">回復「社群」，可以邀請你加入讀者群！

點個在看少個 bug??