Skip to content

Commit 7d368f4

Browse files
author
zhouxianfu
committedSep 28, 2022
perf: update docs and feat prefect
·
v1.1.31.0.13
1 parent 5cc662b commit 7d368f4

File tree

8 files changed

+281
-172
lines changed

8 files changed

+281
-172
lines changed
 

‎README.md

+31-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# msw-tools
22

3-
Msw-tools（Mock Service Worker Tools） is an interface data mock tool for local development and testing based on Msw.js and Svelte.
3+
Msw-Tools（Mock Service Worker tools） is a data Mock tool built based on MSW.JS and Svelte. It is used for data linkage between front and back end interfaces and functional testing of different data and different scenarios.
44

55
## Features
66

@@ -14,6 +14,8 @@ Msw-tools（Mock Service Worker Tools） is an interface data mock tool for loca
1414
## Online demo
1515

1616
立即体验：[msw-tools demo](https://tiven.cn/service/demos/msw-tools "msw-tools online demo")
17+
工具介绍：[msw-tools blog](https://tiven.cn/p/a0368a1d/ "msw-tools | 天问博客-专注于大前端技术")
18+
![Msw-Tools](https://tiven.cn/assets/img/msw-tools-demos.gif "msw-tools")
1719

1820
## Getting started
1921

@@ -85,15 +87,38 @@ if (process.env.NODE_ENV === "development") {
8587
</script>
8688
```
8789

88-
## Tools Demo
90+
## Options
8991

90-
![Msw-Tools](https://tiven.cn/assets/img/msw-tools-demos.gif "msw-tools")
92+
**base**：开发或生产环境服务的公共基础路径。
93+
94+
- 类型： `string`
95+
- 默认： `/`
96+
97+
使用参照：
98+
99+
1. 访问 URL：`https://tiven.cn`， 对应的 Base：`/`， 使用 `<msw-tools base="/" />`。
100+
2. 访问 URL：`https://tiven.cn/service/` ，对应的 Base：`/service/`，使用 `<msw-tools base="/service/" />`。
101+
102+
需要与打包工具和 **Router** 路由的 **base** 保持一致。请参考：
103+
104+
- **Vite** 的 `base` 配置：[Vite Base](https://cn.vitejs.dev/config/shared-options.html#base "Base | Vite")
105+
- **Vue3** 的 `Router/base` 路由配置：[Vue3 Base](https://router.vuejs.org/zh/api/#createwebhistory "Vue3 | createWebHistory base")
106+
107+
## Reminder
108+
109+
1. `mockServiceWorker.js` 文件只能放在静态文件目录中（`/public`），作为 `Service Worker` 服务的注册文件，不参与打包编译，只能以 **相对路径** 的形式引用，不然 `Service Worker` 服务无法注册，会导致请求拦截不生效。
110+
2. `service Worker` API 使用限制：只能在 **https（已安转证书）、localhost、127.0.0.1** 等服务下使用，否则控制台会出现 `[MSW] Mocking enabled (fallback mode)` 日志，也就是说 **http** 域名服务下不可用。
111+
112+
## TODO
113+
114+
- **Msw-Tools** 功能持续优化
115+
- 开启控制台的按钮可拖拽移动
116+
- 封装 **mswjs** 相关 API，减小打包体积
117+
- 规划中...
91118

92119
## Feedback
93120

94121
- **Email：** [tw.email@qq.com](mailto:tw.email@qq.com "天问eMail | msw-tools")
95122
- **Issues：** [msw-tools](https://github.com/tive6/msw-tools/issues "Issues | msw-tools")
96123

97-
## License
98-
99-
The MIT License
124+
欢迎广大 **Front-ender** 、**Tester** 体验使用，如有疑问或需求建议请到 [Github Issues](https://github.com/tive6/msw-tools/issues "Issues | msw-tools") 提出。

‎dist/msw-tools.min.mjs

+212-146
Large diffs are not rendered by default.

‎dist/msw-tools.min.umd.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "msw-tools",
3-
"version": "1.0.12",
3+
"version": "1.0.13",
44
"description": "Msw-tools（Mock Service Worker Tools） is an interface data mock tool for local development and testing based on Msw.js and Svelte.",
55
"main": "dist/msw-tools.min.umd.js",
66
"keywords": [

‎src/common/keys.js

+2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ const MSW_ALL_STATUS = "__MSW_ALL_STATUS__";
33
const MSW_GLOBAL_STATUS = "__MSW_GLOBAL_STATUS__";
44
const MSW_REQUEST_TIME = "__MSW_REQUEST_TIME__";
55
const MSW_REQUEST_FAIL_RATIO = "__MSW_REQUEST_FAIL_RATIO__";
6+
const MSW_RESPONSE_STATUS_CODE = "__MSW_RESPONSE_STATUS_CODE__";
67

78
export {
89
MSW_LIST_KEY,
910
MSW_ALL_STATUS,
1011
MSW_GLOBAL_STATUS,
1112
MSW_REQUEST_TIME,
1213
MSW_REQUEST_FAIL_RATIO,
14+
MSW_RESPONSE_STATUS_CODE,
1315
};

‎src/components/msw/index.scss

+11-9
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ label {
4242
bottom: 50px;
4343
z-index: 9999;
4444
padding: 8px 15px;
45-
background-color: #07c160;
45+
background-color: #AB4BFE;
4646
color: #fff;
4747
border-radius: 4px;
4848
font-size: 14px;
@@ -211,6 +211,14 @@ label {
211211
background-color: #fff6f7;
212212
}
213213

214+
.status-code {
215+
color: #00BE00;
216+
217+
&.error {
218+
color: #f56c6c;
219+
}
220+
}
221+
214222
.msw-config-tips {
215223
margin-top: 10px;
216224

@@ -270,14 +278,8 @@ label {
270278
width: 20%;
271279
}
272280

273-
&:nth-child(3) {
274-
width: 80px;
275-
}
276-
277-
&:nth-child(5) {
278-
width: 80px;
279-
}
280-
281+
&:nth-child(3),
282+
&:nth-child(5),
281283
&:nth-child(6) {
282284
width: 86px;
283285
}

‎src/components/msw/index.svelte

+18-6
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
{#if show }
77
<div transition:fade="{{delay: 200, duration: 200}}"
8-
on:click|stopPropagation={()=>show=false}
8+
on:click|stopPropagation={closeModal}
99
class="msw-mask"></div>
1010
<div transition:slide="{{delay: 250, duration: 300, easing: quintOut }}"
1111
class="msw-box">
@@ -49,6 +49,13 @@
4949
<input bind:value={failRatio} on:focusout={inputChange.bind(null, 'fail')}
5050
type="text" class="msw-handle-input" placeholder="默认 0 ">
5151
</div>
52+
<div class="msw-handle-li">
53+
<div class="msw-handle-label">当前状态码
54+
<span class="status-code {+statusCode===200?'':'error'}">
55+
[ {statusCode} ]
56+
</span>
57+
</div>
58+
</div>
5259
<div class="msw-handle-li">
5360
<div class="msw-handle-label">Mock数据导入(json文件)</div>
5461
<a on:click={fileTrigger} href={null} class="msw-handle-export">导 入</a>
@@ -62,11 +69,13 @@
6269
<div class="msw-handle-label">Mock数据导出(json文件)</div>
6370
<a on:click={exportHandle} href={null} class="msw-handle-export">导 出</a>
6471
</div>
65-
<div class="msw-handle-li">
66-
<div on:click={getData} class="msw-handle-test">
67-
☞Fetch: [GET /test]☜
72+
{#if !isProd }
73+
<div class="msw-handle-li">
74+
<div on:click={getData} class="msw-handle-test">
75+
☞Fetch: [GET /test]☜
76+
</div>
6877
</div>
69-
</div>
78+
{/if}
7079
{#if showMsg}
7180
<div class="msw-config-tips {msgType==='error'?'error':'success'}">
7281
{msgText}
@@ -176,7 +185,8 @@
176185
MSW_ALL_STATUS,
177186
MSW_GLOBAL_STATUS,
178187
MSW_REQUEST_TIME,
179-
MSW_REQUEST_FAIL_RATIO
188+
MSW_REQUEST_FAIL_RATIO,
189+
MSW_RESPONSE_STATUS_CODE,
180190
} from "../../common/keys";
181191
182192
export let base = "";
@@ -195,6 +205,7 @@
195205
let currentTab = "01";
196206
let reqTimes = localStorage.getItem(MSW_REQUEST_TIME) || 1000;
197207
let failRatio = localStorage.getItem(MSW_REQUEST_FAIL_RATIO) || 0;
208+
let statusCode = 200;
198209
let reqMethod = "all";
199210
let reqUrl = "";
200211
let mockData = defaultData;
@@ -269,6 +280,7 @@
269280
mocker.printHandlers();
270281
mocker.restoreHandlers();
271282
mocker.listHandlers();
283+
statusCode = localStorage.getItem(MSW_RESPONSE_STATUS_CODE);
272284
}
273285
274286
function clearData () {

‎src/msw/helper.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
MSW_GLOBAL_STATUS,
66
MSW_REQUEST_TIME,
77
MSW_REQUEST_FAIL_RATIO,
8+
MSW_RESPONSE_STATUS_CODE,
89
} from "../common/keys";
910

1011
function getStatus(failRatio) {
@@ -17,16 +18,17 @@ export function getList(arr) {
1718
arr = arr || list;
1819
arr = arr.filter((item) => item.checked);
1920

20-
console.log(arr);
21-
2221
if (localStorage.getItem(MSW_GLOBAL_STATUS) !== "1" || !arr.length) return [];
2322
// localStorage.setItem(MSW_LIST_KEY, JSON.stringify(arr));
23+
console.log(arr);
2424

2525
let reqTimes = localStorage.getItem(MSW_REQUEST_TIME) || 1000;
2626
let failRatio = localStorage.getItem(MSW_REQUEST_FAIL_RATIO) || 0;
27+
failRatio = +failRatio > 100 ? 100 : failRatio;
2728
let reqStatus = getStatus(failRatio);
29+
localStorage.setItem(MSW_RESPONSE_STATUS_CODE, reqStatus);
2830

29-
console.log(`[status] ${reqStatus} [delay] ${reqTimes}`);
31+
// console.log(`[status] ${reqStatus} [delay] ${reqTimes}`);
3032

3133
let reqList = arr.map((item) => {
3234
return rest.all(item.url, (req, res, ctx) => {

0 commit comments

Comments
 (0)
Please sign in to comment.