前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >lazy-mock ,一个生成后端模拟数据的懒人工具

lazy-mock ,一个生成后端模拟数据的懒人工具

作者头像
业余草
发布2020-10-10 11:28:45
1.4K0
发布2020-10-10 11:28:45
举报
文章被收录于专栏:业余草

你知道的越多,不知道的就越多,业余的像一棵小草!

你来,我们一起精进!你不来,我和你的竞争对手一起精进!

编辑:业余草

来源:juejin.im/post/6871592049485807630

推荐:https://www.xttblog.com/?p=5112

前后端分离的系统越来越流行,给大家分享一个生成后端模拟数据的懒人工具。

前言

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

install

代码语言:javascript
复制
yarn create @lowcoding/mock

start

代码语言:javascript
复制
yarn start

mock server 默认在本地 3000 端口启动,访问 http://localhost:3000/ 即可。

lowcode-mock 默认支持跨域,前端项目中可不必再配置代理,直接请求 lowcode-mock 起的服务即可。

mock

在 src\routes 目录下新建一个 js 文件,将如下内容复制进去保存即可:

代码语言:javascript
复制
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 中即可。

代码语言:javascript
复制
"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 数据:

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

生成如下代码

代码语言:javascript
复制
.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 接口即可拿到如下类似数据:

代码语言:javascript
复制
{    "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    }}

延时

代码语言:javascript
复制
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 异常状态码

代码语言:javascript
复制
router.get('/httpError', (ctx) => {    ctx.status = 401    ctx.body = 'http 401'})

代理

代码语言:javascript
复制
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,转发请求到后端接口。

代码语言:javascript
复制
router.all(new RegExp('^/lowcode/mock/(|^$)'), proxy('https://github.com/wjkang/lowcode-mock'))

不需要 mock 并且匹配正则的接口直接转发到后端地址。

源码地址

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/10/08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 你知道的越多,不知道的就越多,业余的像一棵小草!
  • 编辑:业余草
  • 来源:juejin.im/post/6871592049485807630
  • 推荐:https://www.xttblog.com/?p=5112
    • 前言
      • install
        • start
          • mock
            • 根据 YAPI 生成 mock
            • 根据 JSON 生成 mock
            • 根据字段类型或字段名称生成特定的 mock 数据
          • 延时
            • http 异常状态码
              • 代理
                • 源码地址
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档