json-api-mocker 1.0.2 → 1.1.0

package/README.ch.md

@@ -3,11 +3,12 @@
 一个轻量级且灵活的 Mock 服务器，通过 JSON 配置快速创建 RESTful API。
 
 <p align="center">
-  <img src="https://img.shields.io/npm/v/json-mock-server" alt="npm 版本" />
-  <img src="https://img.shields.io/npm/l/json-mock-server" alt="许可证" />
-  <img src="https://img.shields.io/npm/dt/json-mock-server" alt="下载量" />
+  <img src="https://img.shields.io/npm/v/json-api-mocker" alt="npm version" />
+  <img src="https://img.shields.io/npm/l/json-api-mocker" alt="license" />
+  <img src="https://img.shields.io/npm/dt/json-api-mocker" alt="downloads" />
 </p>
 
+
 ## ✨ 特性
 
 - 🚀 通过 JSON 配置快速搭建
@@ -15,6 +16,7 @@
 - 📝 自动数据持久化
 - 🔍 内置分页支持
 - 🛠 可自定义响应结构
+- 💡 集成 Mock.js 实现强大的数据模拟
 - 💡 TypeScript 支持
 
 ## 📦 安装
@@ -70,12 +72,43 @@ pnpm add json-api-mocker
 
 ### 2. 启动服务器
 
+有多种方式可以启动 Mock 服务器：
+
 ```bash
+# 方式一：使用 npx（推荐）
 npx json-api-mocker
+
+# 方式二：使用 npx 并指定配置文件
+npx json-api-mocker ./custom-config.json
+
+# 方式三：如果全局安装了包
+json-api-mocker
+
+# 方式四：如果作为项目依赖安装
+# 在 package.json 的 scripts 中添加：
+{
+  "scripts": {
+    "mock": "json-api-mocker"
+  }
+}
+# 然后运行：
+npm run mock
 ```
 
 现在你的 Mock 服务器已经在 `http://localhost:8080` 运行了！
 
+你会看到类似这样的输出：
+```bash
+Mock 服务器已启动：
+- 地址：http://localhost:8080
+- 基础路径：/api
+可用的接口：
+  GET http://localhost:8080/api/users
+  POST http://localhost:8080/api/users
+  PUT http://localhost:8080/api/users/:id
+  DELETE http://localhost:8080/api/users/:id
+```
+
 ## 📖 配置指南
 
 ### 服务器配置
@@ -121,6 +154,105 @@ npx json-api-mocker
 }
 ```
 
+### Mock.js 集成
+
+你可以使用 Mock.js 模板来生成动态数据：
+
+```json
+{
+  "path": "/users",
+  "methods": {
+    "get": {
+      "type": "array",
+      "mock": {
+        "enabled": true,
+        "total": 200,
+        "template": {
+          "id|+1": 1,
+          "name": "@cname",
+          "email": "@email",
+          "age|18-60": 1,
+          "address": "@city(true)",
+          "avatar": "@image('200x200')",
+          "createTime": "@datetime"
+        }
+      },
+      "pagination": {
+        "enabled": true,
+        "pageSize": 10
+      }
+    }
+  }
+}
+```
+
+#### 可用的 Mock.js 模板
+
+- `@cname` - 生成中文姓名
+- `@name` - 生成英文姓名
+- `@email` - 生成邮箱地址
+- `@datetime` - 生成日期时间
+- `@image` - 生成图片链接
+- `@city` - 生成城市名
+- `@id` - 生成随机 ID
+- `@guid` - 生成 GUID
+- `@title` - 生成标题
+- `@paragraph` - 生成段落
+- `|+1` - 自增数字
+
+更多 Mock.js 模板请访问 [Mock.js 文档](http://mockjs.com/examples.html)
+
+#### Mock.js 使用示例
+
+1. 生成用户列表：
+```json
+{
+  "mock": {
+    "enabled": true,
+    "total": 100,
+    "template": {
+      "id|+1": 1,
+      "name": "@cname",
+      "email": "@email"
+    }
+  }
+}
+```
+
+2. 生成文章列表：
+```json
+{
+  "mock": {
+    "enabled": true,
+    "total": 50,
+    "template": {
+      "id|+1": 1,
+      "title": "@ctitle",
+      "content": "@cparagraph",
+      "author": "@cname",
+      "publishDate": "@datetime"
+    }
+  }
+}
+```
+
+3. 生成商品列表：
+```json
+{
+  "mock": {
+    "enabled": true,
+    "total": 30,
+    "template": {
+      "id|+1": 1,
+      "name": "@ctitle(3, 5)",
+      "price|100-1000.2": 1,
+      "category": "@pick(['电子产品', '图书', '服装'])",
+      "image": "@image('200x200', '#50B347', '#FFF', 'Mock.js')"
+    }
+  }
+}
+```
+
 ## 🎯 API 示例
 
 ### 基本的 CRUD 操作

package/README.md

@@ -15,6 +15,7 @@ A lightweight and flexible mock server that uses JSON configuration to quickly c
 - 📝 Automatic data persistence
 - 🔍 Built-in pagination support
 - 🛠 Customizable response schemas
+- 💡 Integration with Mock.js for powerful data mocking
 - 💡 TypeScript support
 
 ## 📦 Installation
@@ -70,12 +71,43 @@ Create a `data.json` file in your project root:
 
 ### 2. Start the Server
 
+There are several ways to start the mock server:
+
 ```bash
+# Method 1: Using npx (Recommended)
 npx json-api-mocker
+
+# Method 2: Using npx with a custom config file
+npx json-api-mocker ./custom-config.json
+
+# Method 3: If installed globally
+json-api-mocker
+
+# Method 4: If installed as a project dependency
+# Add this to your package.json scripts:
+{
+  "scripts": {
+    "mock": "json-api-mocker"
+  }
+}
+# Then run:
+npm run mock
 ```
 
 Now your mock server is running at `http://localhost:8080`!
 
+You'll see output like this:
+```bash
+Mock Server is running:
+- Address: http://localhost:8080
+- Base Path: /api
+Available APIs:
+  GET http://localhost:8080/api/users
+  POST http://localhost:8080/api/users
+  PUT http://localhost:8080/api/users/:id
+  DELETE http://localhost:8080/api/users/:id
+```
+
 ## 📖 Configuration Guide
 
 ### Server Configuration
@@ -121,6 +153,104 @@ Each route can support multiple HTTP methods:
 }
 ```
 
+### Mock.js Integration
+
+You can use Mock.js templates to generate dynamic data:
+
+```json
+{
+  "path": "/users",
+  "methods": {
+    "get": {
+      "type": "array",
+      "mock": {
+        "enabled": true,
+        "total": 200,
+        "template": {
+          "id|+1": 1,
+          "name": "@name",
+          "email": "@email",
+          "age|18-60": 1,
+          "address": "@city(true)",
+          "avatar": "@image('200x200')",
+          "createTime": "@datetime"
+        }
+      },
+      "pagination": {
+        "enabled": true,
+        "pageSize": 10
+      }
+    }
+  }
+}
+```
+
+#### Available Mock.js Templates
+
+- `@name` - Generate random name
+- `@email` - Generate random email
+- `@datetime` - Generate random datetime
+- `@image` - Generate random image URL
+- `@city` - Generate random city name
+- `@id` - Generate random ID
+- `@guid` - Generate GUID
+- `@title` - Generate random title
+- `@paragraph` - Generate random paragraph
+- `|+1` - Auto increment number
+
+For more Mock.js templates, visit [Mock.js Documentation](http://mockjs.com/examples.html)
+
+#### Examples with Mock.js
+
+1. Generate user list with random data:
+```json
+{
+  "mock": {
+    "enabled": true,
+    "total": 100,
+    "template": {
+      "id|+1": 1,
+      "name": "@name",
+      "email": "@email"
+    }
+  }
+}
+```
+
+2. Generate article list with random content:
+```json
+{
+  "mock": {
+    "enabled": true,
+    "total": 50,
+    "template": {
+      "id|+1": 1,
+      "title": "@title",
+      "content": "@paragraph",
+      "author": "@name",
+      "publishDate": "@datetime"
+    }
+  }
+}
+```
+
+3. Generate product list with random prices:
+```json
+{
+  "mock": {
+    "enabled": true,
+    "total": 30,
+    "template": {
+      "id|+1": 1,
+      "name": "@title(3, 5)",
+      "price|100-1000.2": 1,
+      "category": "@pick(['Electronics', 'Books', 'Clothing'])",
+      "image": "@image('200x200', '#50B347', '#FFF', 'Mock.js')"
+    }
+  }
+}
+```
+
 ## 🎯 API Examples
 
 ### Basic CRUD Operations

package/dist/server.d.ts

@@ -5,14 +5,9 @@ export declare class MockServer {
     private configPath;
     constructor(config: Config, configPath?: string);
     private setupMiddleware;
+    private generateMockData;
+    private handleRequest;
     private setupRoutes;
-    private saveConfig;
-    private findUserById;
-    private getNextUserId;
     private createRoute;
-    private handleRequest;
-    private handlePostRequest;
-    private handlePutRequest;
-    private handleDeleteRequest;
     start(): void;
 }

package/dist/server.js

@@ -4,15 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MockServer = void 0;
+const mockjs_1 = __importDefault(require("mockjs"));
 const express_1 = __importDefault(require("express"));
 const cors_1 = __importDefault(require("cors"));
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
 class MockServer {
     constructor(config, configPath = 'data.json') {
         this.app = (0, express_1.default)();
         this.config = config;
-        this.configPath = path_1.default.resolve(process.cwd(), configPath);
+        this.configPath = configPath;
         this.setupMiddleware();
         this.setupRoutes();
     }
@@ -20,6 +19,43 @@ class MockServer {
         this.app.use((0, cors_1.default)());
         this.app.use(express_1.default.json());
     }
+    generateMockData(config) {
+        try {
+            if (config.mock?.enabled && config.mock.template) {
+                const { total, template } = config.mock;
+                return mockjs_1.default.mock({
+                    [`data|${total}`]: [template]
+                }).data;
+            }
+            return config.response || [];
+        }
+        catch (error) {
+            console.error('生成 Mock 数据时出错:', error);
+            return config.response || [];
+        }
+    }
+    handleRequest(config) {
+        return (req, res) => {
+            try {
+                console.log(`收到请求: ${req.method} ${req.url}`);
+                let responseData = this.generateMockData(config);
+                if (config.pagination?.enabled && Array.isArray(responseData)) {
+                    const page = parseInt(req.query.page) || 1;
+                    const pageSize = parseInt(req.query.pageSize) || config.pagination.pageSize;
+                    const startIndex = (page - 1) * pageSize;
+                    const endIndex = startIndex + pageSize;
+                    const paginatedData = responseData.slice(startIndex, endIndex);
+                    res.header('X-Total-Count', responseData.length.toString());
+                    responseData = paginatedData;
+                }
+                res.json(responseData);
+            }
+            catch (error) {
+                console.error('处理请求时出错:', error);
+                res.status(500).json({ error: '服务器内部错误' });
+            }
+        };
+    }
     setupRoutes() {
         this.config.routes.forEach((route) => {
             Object.entries(route.methods).forEach(([method, methodConfig]) => {
@@ -27,28 +63,6 @@ class MockServer {
             });
         });
     }
-    saveConfig() {
-        fs_1.default.writeFileSync(this.configPath, JSON.stringify(this.config, null, 2), 'utf-8');
-    }
-    findUserById(id) {
-        const usersRoute = this.config.routes.find(route => route.path === '/users');
-        if (!usersRoute)
-            return null;
-        const getMethod = usersRoute.methods.get;
-        if (!getMethod || !Array.isArray(getMethod.response))
-            return null;
-        return getMethod.response.find(user => user.id === id);
-    }
-    getNextUserId() {
-        const usersRoute = this.config.routes.find(route => route.path === '/users');
-        if (!usersRoute)
-            return 1;
-        const getMethod = usersRoute.methods.get;
-        if (!getMethod || !Array.isArray(getMethod.response))
-            return 1;
-        const maxId = Math.max(...getMethod.response.map(user => user.id));
-        return maxId + 1;
-    }
     createRoute(path, method, config) {
         const fullPath = `${this.config.server.baseProxy}${path}`;
         console.log(`创建路由: ${method.toUpperCase()} ${fullPath}`);
@@ -57,87 +71,16 @@ class MockServer {
                 this.app.get(fullPath, this.handleRequest(config));
                 break;
             case 'post':
-                this.app.post(fullPath, this.handlePostRequest(config));
+                this.app.post(fullPath, this.handleRequest(config));
                 break;
             case 'put':
-                this.app.put(`${fullPath}/:id`, this.handlePutRequest(config));
+                this.app.put(`${fullPath}/:id`, this.handleRequest(config));
                 break;
             case 'delete':
-                this.app.delete(`${fullPath}/:id`, this.handleDeleteRequest(config));
+                this.app.delete(`${fullPath}/:id`, this.handleRequest(config));
                 break;
         }
     }
-    handleRequest(config) {
-        return (req, res) => {
-            console.log(`收到请求: ${req.method} ${req.url}`);
-            if (config.pagination?.enabled && config.type === 'array') {
-                const page = parseInt(req.query.page) || 1;
-                const pageSize = parseInt(req.query.pageSize) || config.pagination.pageSize;
-                const startIndex = (page - 1) * pageSize;
-                const endIndex = startIndex + pageSize;
-                const data = config.response.slice(startIndex, endIndex);
-                res.header('X-Total-Count', config.pagination.totalCount.toString());
-                res.json(data);
-            }
-            else {
-                res.json(config.response);
-            }
-        };
-    }
-    handlePostRequest(config) {
-        return (req, res) => {
-            console.log(`收到创建请求: ${req.url}`, req.body);
-            const usersRoute = this.config.routes.find(route => route.path === '/users');
-            if (!usersRoute) {
-                return res.status(404).json({ error: '路由未找到' });
-            }
-            const getMethod = usersRoute.methods.get;
-            if (!getMethod || !Array.isArray(getMethod.response)) {
-                return res.status(500).json({ error: '数据格式错误' });
-            }
-            const newUser = {
-                id: this.getNextUserId(),
-                ...req.body
-            };
-            getMethod.response.push(newUser);
-            this.saveConfig();
-            res.status(201).json(newUser);
-        };
-    }
-    handlePutRequest(config) {
-        return (req, res) => {
-            const userId = parseInt(req.params.id);
-            console.log(`收到更新请求: ${req.url}`, req.body);
-            const user = this.findUserById(userId);
-            if (!user) {
-                return res.status(404).json({ error: '用户未找到' });
-            }
-            Object.assign(user, req.body);
-            this.saveConfig();
-            res.json(user);
-        };
-    }
-    handleDeleteRequest(config) {
-        return (req, res) => {
-            const userId = parseInt(req.params.id);
-            console.log(`收到删除请求: ${req.url}`);
-            const usersRoute = this.config.routes.find(route => route.path === '/users');
-            if (!usersRoute) {
-                return res.status(404).json({ error: '路由未找到' });
-            }
-            const getMethod = usersRoute.methods.get;
-            if (!getMethod || !Array.isArray(getMethod.response)) {
-                return res.status(500).json({ error: '数据格式错误' });
-            }
-            const userIndex = getMethod.response.findIndex(user => user.id === userId);
-            if (userIndex === -1) {
-                return res.status(404).json({ error: '用户未找到' });
-            }
-            getMethod.response.splice(userIndex, 1);
-            this.saveConfig();
-            res.json({ success: true, message: '删除成功' });
-        };
-    }
     start() {
         this.app.listen(this.config.server.port, () => {
             console.log(`Mock 服务器已启动:`);

package/dist/types.d.ts

@@ -7,10 +7,16 @@ export interface PaginationConfig {
     pageSize: number;
     totalCount: number;
 }
+export interface MockConfig {
+    enabled: boolean;
+    total: number;
+    template: Record<string, any>;
+}
 export interface MethodConfig {
     type?: 'array' | 'object';
     pagination?: PaginationConfig;
-    response: any;
+    mock?: MockConfig;
+    response?: any;
     requestSchema?: Record<string, string>;
     params?: string[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-api-mocker",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "一个基于 JSON 配置的 Mock 服务器",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -41,12 +41,14 @@
   "homepage": "https://github.com/Selteve/json-api-mocker#readme",
   "dependencies": {
     "cors": "^2.8.5",
-    "express": "^4.17.1"
+    "express": "^4.17.1",
+    "mockjs": "^1.1.0"
   },
   "devDependencies": {
     "@types/cors": "^2.8.13",
     "@types/express": "^4.17.13",
     "@types/jest": "^27.5.2",
+    "@types/mockjs": "^1.0.10",
     "@types/node": "^16.18.0",
     "jest": "^27.5.1",
     "nodemon": "^2.0.22",