推荐一个生成后端模拟数据的懒人工具:lazy-mock
时间:2022-07-25
本文章向大家介绍推荐一个生成后端模拟数据的懒人工具:lazy-mock,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
点作者 | 若邪
来源 | https://juejin.im/post/6871592049485807630
# 前言
最近,发现一个比较好玩的东东,一个不需要 mock 并且匹配正则的接口直接转发到后端地址的小工具。
install
yarn create @lowcoding/mock
start
yarn start
mock server 默认在本地 3000 端口启动,访问 http://localhost:3000/ 即可。
lowcode-mock 默认支持跨域,前端项目中可不必再配置代理,直接请求 lowcode-mock 起的服务即可。
mock
在 srcroutes 目录下新建一个 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 ,可直接根据 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 中即可
"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,
},
}
生成如下代码
访问 mock 接口即可拿到如下类似数据:
.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 },
}
})
延时
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 异常状态码
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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 方老师聊Nginx知识点
- 《Java从入门到失业》第五章:继承与多态(5.1-5.7):继承
- 【赵渝强老师】Flink的DataSet算子
- Node.js 案发现场揭秘 —— 文件句柄泄露导致进程假死
- nacos配置问题
- Chevereto 配合 Picgo 打造个人相册/图床解决方案
- 从提高 Elasticsearch 搜索体验说开去......
- 又一个奇葩要求,Python是如何将“中文”转“拼音”的?
- localStorage中怎么存对象?
- vue中sessionStorage的使用
- 别再问我 Python 怎么识别数字验证码了!
- Java 多线程设计模式 —— Single Threaded Execution
- SAP Spartacus默认的baseSite是从源代码什么地方读取的
- SAP Spartacus CmsPage的加载逻辑
- JUnit 5 测试 Spring 引擎的时候提示 junit-vintage 错误