koa 接口返回数据_生成后端模拟数据太慢了？用这个懒人工具效率提升60%！

- 日理万妓 2023-01-03 04:53 110阅读 0赞

####  ####

**点击上方“****Java秃头哥****”，选择“星标”**

**每天分享优质干货**

![a011b74293caaf08339ca5ecfc985fe3.gif][] 本文来 源： https://juejin.im/post/6871592049485807630

### **前言** ###

最近发现一个比较好玩的东东，一个不需要 mock 并且匹配正则的接口直接转发到后端地址的小工具。

![be677f4841bd71be73aa174f30bb3c29.gif][]

![0db6de5d13f34c41da19d3e092a4730b.gif][]

### **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.Randomconst 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 最后面的数字部分

![be677f4841bd71be73aa174f30bb3c29.gif][]

访问创建的 mock 接口，即可拿到随机的 mock 数据：

![e2b20068f863231f93a6914b679918fc.png][]

#### **根据 JSON 生成 mock** ####

复制 JSON 数据，比如：

![0db6de5d13f34c41da19d3e092a4730b.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": "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.Randomconst 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 并且匹配正则的接口直接转发到后端地址。

### **源码地址** ###

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

`--END--`

`1、提升10倍生产力：IDEA远程一键部署SpringBoot到Docker`

`2、LinkedList 真的是查找慢增删快？刷新你的认知！`

`3、感受lambda之美，推荐收藏，写得太好了！`

`4、从 0 开始写了个读写分离，不难嘛！`

`5、如何在SpringBoot中整合Redis，处理缓存问题？简单3步，1个小demo`

`2020年秋招马上就开始啦！我精选了45套大厂简历模版，需要的朋友关注公众号并回复 简历 领取`

`文章都看完了不点个 嘛`

[a011b74293caaf08339ca5ecfc985fe3.gif]: /images/20221119/79e3270d1df64028ab0ee68296d589e0.png
[be677f4841bd71be73aa174f30bb3c29.gif]: /images/20221119/c29798f91b174a0f8cbd45ba94d53692.png
[0db6de5d13f34c41da19d3e092a4730b.gif]: /images/20221119/80166d17acbc4bada1b4a3e80b367247.png
[e2b20068f863231f93a6914b679918fc.png]: /images/20221119/0931e2ee4c524a548197e1a54c73f64c.png