-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathREADME.md.ejs
More file actions
131 lines (88 loc) · 3.2 KB
/
Copy pathREADME.md.ejs
File metadata and controls
131 lines (88 loc) · 3.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<% if(emptyREADME !== true) { %>
---
title: 文档
---
## 概述
mock & 代理 工具。
## 安装
### Install
`yarn create @lowcoding/mock`
### Start
`yarn start`
mock server 默认在本地 3000 端口启动，访问 [http://localhost:3000/](http://localhost:3000/) 即可。
> `lowcode-mock` 默认支持跨域。
## mock
在 `src\routes` 目录下新建一个 js 文件，将如下内容复制进去保存即可：
```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
```
> 已经内置了创建新 mock 的物料，在 `vscode-lowcode` 的区块功能中直接使用即可。
使用 vscode 插件 [lowcode](https://marketplace.visualstudio.com/items?itemName=wjkang.lowcode) ，可直接根据 JSON 数据或者 YAPI 接口定义自动生成 mock 接口以及 mock 数据。
### 根据 YAPI 生成 mock
> 如何配置 `vscode-lowcode`，查看 [文档](https://lowcoding.gitee.io/lowcode-vscode/config.html)
复制 YAPI 上接口 id ，比如 `https://yapi.baidu.com/project/869/interface/api/14037` 最后面的数字部分
### 根据 JSON 生成 mock
复制 JSON 数据，比如：
> 通过 JSON 数据生成的 mock 接口需要手动修改路由地址。
### 根据字段类型或字段名称生成特定的 mock 数据
如下为默认的，按需要自行配置即可
> `200&&number` 一处表示当需要 mock 的字段名为`code`，并且类型为`number`，mock 为固定值 200
## 延时
```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('/delay', (ctx) => {
delay(3) // 3 秒后返回结果
ctx.body = 'delay'
})
```
> 可用于测 loading 效果。
## http 异常状态码
```js
router.get('/httpError', (ctx) => {
ctx.status = 401
ctx.body = 'http 401'
})
```
## 代理
```js
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，转发请求到后端接口。
```js
router.all(new RegExp('^/lowcode/mock/(|^$)'), proxy('https://github.com/wjkang/lowcode-mock'))
```
> 不需要 mock 并且匹配正则的接口直接转发到后端地址。
### 拦截响应
```js
.get('/intercept/response', async (ctx) => {
const result = await request(ctx, 'http://localhost:3000/mock')
const interceptResult = {
...result.body,
intercept: '拦截响应',
}
ctx.body = interceptResult
})
```
> 可用于 mock 现有接口新增字段
<% } %>