mocksw 1.0.0 → 1.1.1

package/README.md

@@ -1,5 +1,8 @@
 # mocksw
 
+[![npm version](https://img.shields.io/npm/v/mocksw.svg)](https://www.npmjs.com/package/mocksw)
+[![license](https://img.shields.io/github/license/zstings/mocksw.svg)](LICENSE)
+
 一个基于 Service Worker 的轻量级、零侵入 API 模拟工具。通过在 Service Worker 层拦截 fetch 请求，实现在本地开发环境中快速模拟 API 响应。
 
 ## ✨ 特性
@@ -14,28 +17,31 @@
 
 ```sh
 npm install mocksw -D
+# or
+npm install mocksw -D
 ```
 
 ## 🚀 快速开始
 
-### 1. 初始化
+### 1. 初始化 Worker 环境
 
-在你的项目根目录下运行初始化命令（通常是 public 文件夹）：
+在你的项目根目录下运行初始化命令：
 
 ```sh
 npx mocksw init public
+# or
+pnpm exec mocksw init public
 ```
 
-这将在你的公共目录下生成 `swMockWorker.js` worker环境。
+这将在指定的目录 `public` 下生成 `swMockWorker.js` worker环境。
 
-### 2. 注册拦截接口
+### 2. 定义 Mock 接口
 
 在你的应用入口文件（如 `main.ts` 或 `index.ts`）中进行配置：
 
 ```js
 import { httpRequest } from 'mocksw';
-
-// 定义 Mock 接口
+// 定义简单的 Mock 接口
 httpRequest.post('/api/user/login', async ({ body }, res) => {
   const { username, password } = body;
   // 模拟延迟 1000ms
@@ -51,22 +57,25 @@ httpRequest.post('/api/user/login', async ({ body }, res) => {
     msg: 'success',
   });
 });
-```
-
-### 3. 在项目入口文件中引入初始化
-
-在项目入口文件（如 `main.js`）中引入 Service Worker：
-
-```js
-// 初始化 Mock 环境 指定域名进行拦截 推荐在 Vue 实例挂载后初始化
-httpRequest.init('www.vadmin.test.com').then(() => {
-  console.log('🚀 完美 Mock 环境已就绪');
-  // 挂载 Vue 实例 推荐在 init 后挂载
-  app.mount('#app');
+// 初始化并指定拦截域名
+httpRequest.init('www.api-server.com').then(() => {
+  console.log('🚀 Mock 环境已就绪');
+  app.mount('#app'); // 建议在 init 成功后挂载应用
+  // 现在这个接口调用会被拦截 并返回模拟响应
+  login();
 });
-```
 
-启动项目，即可在浏览器中使用 Mock API。
+function login() {
+  axios
+    .post('http://www.vadmin.test.com/user/login', {
+      username: 'admin',
+      password: '123456',
+    })
+    .then(res => {
+      console.log(res.data);
+    });
+}
+```
 
 ## 📖 API 说明
 
@@ -87,6 +96,7 @@ httpRequest.init('www.vadmin.test.com').then(() => {
 - `query`：URL 查询参数对象
 - `headers`：原生请求头
 - `method`：请求方法（如 GET、POST 等）
+- `headers`：原生请求头
 
 `MockResponse` (回调第二个参数)
 
@@ -95,15 +105,55 @@ httpRequest.init('www.vadmin.test.com').then(() => {
 - `delay(ms)`：延迟响应指定毫秒数 支持链式调用
 - `status(code)`：设置 HTTP 状态码（默认 200）支持链式调用
 
-## 🛠️ 高阶用法：结合 Dexie 模拟数据库
+## 🛠️ 结合web数据库模拟真实后端
 
 由于拦截器运行在主线程环境，你可以轻松结合 IndexedDB 进行增删改查：
 
 ```ts
-import Dexie from 'dexie';
-httpRequest.get('/api/users', async (req, res) => {
-  const db = new Dexie('MyDatabase');
-  const users = await db.table('users').toArray();
-  return res.json(users);
+// 登录接口
+httpRequest.post('/user/login', async (req, res) => {
+  // 获取请求体中的用户名和密码
+  const { username, password } = req.body;
+  // 从数据库中查询用户
+  const user = await db.users.where({ name: username, password: password }).first();
+  // 如果用户不存在 则返回错误响应
+  if (!user) return res.json({ code: 500, message: '账号或密码不匹配' });
+  // 生成 token 并存储到数据库
+  const createToken = 'tk_' + Date.now();
+  if (user) {
+    user.token = createToken;
+    await db.users.update(user.id, user);
+    await db.tokens.add({ token: createToken });
+    // 登录成功后返回 token
+    return res.json({ code: 200, data: { token: createToken } });
+  }
 });
+// 获取用户信息接口
+httpRequest.get('/user/getInfo', async (req, res) => {
+  const token = getHeadersToken(req);
+  if (!token) return res.json({ code: 500, message: '未登录' });
+  const tokenInfo = await db.tokens.where({ token: token }).first();
+  if (!tokenInfo) return res.json({ code: 500, message: 'token 无效' });
+  const user = await db.users.where({ token: token }).first();
+  if (!user) return res.json({ code: 500, message: '用户不存在' });
+  // 模拟延迟 500ms
+  return res.delay(500).json({ code: 200, data: Object.assign({}, user, { token: undefined }) });
+});
+// 登出接口
+httpRequest.post('/user/logout', async (req, res) => {
+  const token = getHeadersToken(req);
+  if (token) {
+    await db.tokens.where({ token }).delete();
+    const user = await db.users.where({ token }).first();
+    if (!user) return res.json({ code: 500, message: '用户不存在' });
+    user.token = '';
+    await db.users.update(user.id, user);
+  }
+  return res.json({ code: 200, message: '登出成功' });
+});
+
+function getHeadersToken(req) {
+  const authHeader = req.headers['authorization'] || req.headers['Authorization'];
+  return authHeader?.replace('Bearer ', '');
+}
 ```

package/dist/index.js

@@ -92,19 +92,14 @@ var MockClient = class {
 		});
 		navigator.serviceWorker.addEventListener("message", async (event) => {
 			if (event.data.type === "MSW_SIMULATE_REQUEST") {
-				const { method, url, body, query } = event.data;
+				const { method, url } = event.data.data;
 				const port = event.ports[0];
 				const handlerKey = `${method}:${url}`;
 				const handler = this.handlers.get(handlerKey);
 				if (!port) return;
 				if (handler) {
 					const res = new ResponseActions(port);
-					await handler({
-						url,
-						method,
-						body,
-						query
-					}, res);
+					await handler(Object.assign({}, event.data.data), res);
 				} else port.postMessage({
 					body: { error: "Not Found" },
 					status: 404

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "mocksw",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "type": "module",
   "license": "MIT",
   "author": "@zstings",
   "description": "一个基于 Service Worker 的轻量级、零侵入 API 模拟工具",
   "bin": {
-    "mocksw": "./dist/cli.mjs"
+    "mocksw": "dist/cli.mjs"
   },
   "files": [
     "dist",

package/public/swMockWorker.js

@@ -25,7 +25,6 @@ self.addEventListener('fetch', event => {
             status: status || 200,
             headers: {
               'Content-Type': 'application/json',
-              'Content-Length': 100000, // 显式设置大小
               ...headers,
             },
           }),
@@ -37,10 +36,13 @@ self.addEventListener('fetch', event => {
         allClients[0].postMessage(
           {
             type: 'MSW_SIMULATE_REQUEST',
-            url: url.pathname,
-            method: event.request.method,
-            body: requestBody,
-            query: Object.fromEntries(url.searchParams.entries()),
+            data: {
+              url: url.pathname,
+              method: event.request.method,
+              body: requestBody,
+              query: Object.fromEntries(url.searchParams.entries()),
+              headers: Object.fromEntries(event.request.headers.entries()),
+            },
           },
           [channel.port2],
         );