json-api-mocker 2.3.0 → 3.0.0

package/README.md

@@ -1,6 +1,6 @@
 # JSON API Mocker
 
-A lightweight and flexible mock server that uses JSON configuration to quickly create RESTful APIs.
+A lightweight and flexible mock server with JSON configuration and visual management interface.
 
 <p align="center">
   <img src="https://img.shields.io/npm/v/json-api-mocker" alt="npm version" />
@@ -10,33 +10,57 @@ A lightweight and flexible mock server that uses JSON configuration to quickly c
 
 ## ✨ Features
 
-- 🚀 Quick setup with JSON configuration
-- 🔄 Support for GET, POST, PUT, DELETE methods
+- 🚀 Brand new visual management interface
+- 🚀 Support both configuration file and UI management
+- 🔄 Support all common HTTP methods
 - 📝 Automatic data persistence
 - 🔍 Built-in pagination support
-- 🛠 Customizable response schemas
-- 🎭 Integration with Mock.js for powerful data mocking
-- 📤 File upload support
+- 🛠 Customizable response structure
+- 🎭 Powerful data mocking with Mock.js
+- 📊 Real-time request logs and statistics
 - 💡 TypeScript support
 
 ## 📦 Installation
 
 ```bash
-# Using npm
-npm install json-api-mocker
+npm install -g json-api-mocker
+```
+
+## 🚀 Quick Start
+
+The server uses fixed ports:
+- API Server: 35728
+- Web UI: 35729
+- WebSocket: 35730
+
+### Method 1: Using Visual Interface (Recommended)
 
-# Using yarn
-yarn add json-api-mocker
+1. Create a `data.json` file:
+```json
+{
+  "server": {
+    "port": 35728,
+    "baseProxy": "/api"
+  },
+  "routes": []
+}
+```
 
-# Using pnpm
-pnpm add json-api-mocker
+2. Start the server:
+```bash
+# Start server and open browser
+json-api-mocker -o
 ```
 
-## 🚀 Quick Start
+After starting, the browser will automatically open the management interface, where you can:
+1. Visually create and manage APIs
+2. View real-time request logs
+3. Monitor API call statistics
+4. Debug mock data online
 
-### 1. Create Configuration File
+### Method 2: Using Configuration File (Compatible with old version)
 
-Create a `data.json` file in your project root:
+Create a `data.json` file:
 
 ```json
 {
@@ -46,40 +70,21 @@ Create a `data.json` file in your project root:
   },
   "routes": [
     {
-      "path": "/users",
-      "methods": {
-        "get": {
-          "type": "array",
-          "pagination": {
-            "enabled": true,
-            "pageSize": 10,
-            "totalCount": 100
-          },
-          "response": [
-            {
-              "id": 1,
-              "name": "John",
-              "age": 30,
-              "city": "New York"
-            }
-          ]
-        }
-      }
-    },
-    {
-      "path": "/upload/avatar",
-      "methods": {
-        "post": {
-          "type": "object",
-          "mock": {
-            "enabled": true,
-            "template": {
-              "success": true,
-              "message": "Upload successful",
+      "id": "user-api",
+      "route": {
+        "path": "/users",
+        "methods": {
+          "get": {
+            "status": 200,
+            "response": {
+              "code": 200,
+              "message": "success",
               "data": {
-                "url": "@image('200x200')",
-                "filename": "@string(10).jpg",
-                "size": "@integer(1000, 1000000)"
+                "list|10": [{
+                  "id": "@id",
+                  "name": "@name",
+                  "email": "@email"
+                }]
               }
             }
           }
@@ -90,110 +95,45 @@ Create a `data.json` file in your project root:
 }
 ```
 
-### 2. Start the Server
-
-There are several ways to start the mock server:
+Then start the 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
-  POST http://localhost:8080/api/upload/avatar
-```
-
-## 📖 Configuration Guide
-
-For detailed configuration options, please refer to [CONFIG.md](./CONFIG.md).
+## 📖 Configuration
 
 ### Server Configuration
 
-The `server` section configures basic server settings:
-
 ```json
 {
   "server": {
-    "port": 8080,      // Server port number
-    "baseProxy": "/api" // Base path for all routes
+    "port": 8080,      // Server port
+    "baseProxy": "/api" // API base path
   }
 }
 ```
 
-### Route Configuration
+### API Configuration
 
-Each route can support multiple HTTP methods:
+Each API configuration includes:
 
 ```json
 {
-  "path": "/users",    // Route path
-  "methods": {
-    "get": {
-      "type": "array", // Response type: "array" or "object"
-      "pagination": {  // Optional pagination settings
-        "enabled": true,
-        "pageSize": 10,
-        "totalCount": 100
-      },
-      "response": []   // Response data
-    },
-    "post": {
-      "requestSchema": {  // Request body validation schema
-        "name": "string",
-        "age": "number"
-      },
-      "response": {
-        "success": true
-      }
-    }
-  }
-}
-```
-
-### File Upload Support
-
-You can configure file upload endpoints in your `data.json`:
-
-```json
-{
-  "path": "/upload/avatar",
-  "methods": {
-    "post": {
-      "type": "object",
-      "mock": {
-        "enabled": true,
-        "template": {
-          "success": true,
-          "message": "Upload successful",
+  "id": "unique-id",    // API unique identifier
+  "route": {
+    "path": "/users",   // API path (without base path)
+    "methods": {        // Supported HTTP methods
+      "get": {
+        "status": 200,  // Response status code
+        "headers": {    // Custom response headers
+          "Content-Type": "application/json"
+        },
+        "response": {   // Response data (supports Mock.js syntax)
+          "code": 200,
           "data": {
-            "url": "@image('200x200')",
-            "filename": "@string(10).jpg",
-            "size": "@integer(1000, 1000000)"
+            "name": "@name",
+            "age": "@integer(18, 60)"
           }
         }
       }
@@ -202,113 +142,44 @@ You can configure file upload endpoints in your `data.json`:
 }
 ```
 
-#### Example Usage:
-
-```bash
-# Upload single file
-curl -X POST http://localhost:8080/api/upload/avatar \
-  -H "Content-Type: multipart/form-data" \
-  -F "avatar=@/path/to/your/image.jpg"
-
-# Upload multiple files
-curl -X POST http://localhost:8080/api/upload/images \
-  -H "Content-Type: multipart/form-data" \
-  -F "images=@/path/to/image1.jpg" \
-  -F "images=@/path/to/image2.jpg"
-```
-
-For detailed configuration options, please refer to [CONFIG.md](./CONFIG.md#file-upload-configuration).
+## 🎮 Visual Interface Features
 
-## 🎯 API Examples
+### 1. API Management
+- Create, edit, and delete APIs
+- Support multiple HTTP methods
+- Visual response data editor
+- Mock.js syntax hints
 
-### Basic CRUD Operations
-
-#### Get Users List
-```bash
-curl http://localhost:8080/api/users
-```
-
-#### Get Single User
-```bash
-curl http://localhost:8080/api/users/1
-```
+### 2. Real-time Logs
+- Request path and method
+- Response status and duration
+- Request parameters recording
+- Response data viewing
 
-#### Create User
-```bash
-curl -X POST http://localhost:8080/api/users \
-  -H "Content-Type: application/json" \
-  -d '{"name":"Alice","age":25,"city":"Boston"}'
-```
+### 3. Statistics Dashboard
+- Total API count
+- Request volume monitoring
+- Average response time
+- Success rate statistics
 
-#### Update User
-```bash
-curl -X PUT http://localhost:8080/api/users/1 \
-  -H "Content-Type: application/json" \
-  -d '{"name":"Alice","age":26,"city":"Boston"}'
-```
+## 🔧 Command Line Options
 
-#### Delete User
 ```bash
-curl -X DELETE http://localhost:8080/api/users/1
-```
-
-### Advanced Usage
+json-api-mocker [options]
 
-#### Pagination
-```bash
-# Get page 2 with 10 items per page
-curl http://localhost:8080/api/users?page=2&pageSize=10
+Options:
+  -p, --port <number>     Specify server port (default: 8080)
+  -c, --config <path>     Specify config file path (default: data.json)
+  -o, --open             Auto open management interface
+  -h, --help            Show help information
+  -v, --version         Show version number
 ```
 
-#### Custom Response Headers
-The server automatically adds these headers:
-- `X-Total-Count`: Total number of items (for paginated responses)
-
-## 🔧 Advanced Configuration
-
-### Dynamic Routes
-
-You can use URL parameters in routes:
-
-```json
-{
-  "path": "/users/:id/posts",
-  "methods": {
-    "get": {
-      "type": "array",
-      "response": []
-    }
-  }
-}
-```
-
-### Request Validation
-
-Add schema validation for POST/PUT requests:
-
-```json
-{
-  "requestSchema": {
-    "name": "string",
-    "age": "number",
-    "email": "string"
-  }
-}
-```
-
-## 🤝 Contributing
-
-1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit your changes (`git commit -m 'Add some amazing feature'`)
-4. Push to the branch (`git push origin feature/amazing-feature`)
-5. Open a Pull Request
-
 ## 📄 License
 
 MIT © [Xiong Haiyin]
 
 ## 🙏 Acknowledgments
 
-- Express.js for the excellent web framework
-- All our contributors and users
+- Thanks to all contributors and users
+- Special thanks to Mock.js for data mocking support

package/dist/cli.js

@@ -1,6 +1,41 @@
 #!/usr/bin/env node
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
 const index_1 = require("./index");
-const configPath = process.argv[2] || 'data.json';
-(0, index_1.startServer)(configPath);
+const path_1 = require("path");
+const express_1 = __importDefault(require("express"));
+const http_1 = require("http");
+const open_1 = __importDefault(require("open"));
+const WEB_PORT = 35729; // 前端页面端口
+const WS_PORT = 35730; // WebSocket 端口
+commander_1.program
+    .version(require('../package.json').version)
+    .option('-c, --config <path>', '配置文件路径', 'data.json')
+    .option('-o, --open', '自动打开浏览器', false)
+    .parse(process.argv);
+const options = commander_1.program.opts();
+// 启动 API Mock 服务器，不再传入端口参数，使用配置文件中的端口
+(0, index_1.startServer)({
+    config: options.config,
+    wsPort: WS_PORT
+});
+// 创建静态文件服务器来托管前端页面
+const app = (0, express_1.default)();
+const httpServer = (0, http_1.createServer)(app);
+// 使用打包后的前端文件
+app.use(express_1.default.static((0, path_1.join)(__dirname, '../web')));
+// 所有路由都返回 index.html
+app.get('*', (req, res) => {
+    res.sendFile((0, path_1.join)(__dirname, '../web/index.html'));
+});
+// 启动前端服务器（使用固定端口）
+httpServer.listen(WEB_PORT, () => {
+    console.log(`Web UI is running on http://localhost:${WEB_PORT}`);
+    if (options.open) {
+        (0, open_1.default)(`http://localhost:${WEB_PORT}`);
+    }
+});

package/dist/index.d.ts

@@ -1,3 +1,7 @@
-export declare function startServer(configPath?: string): void;
+interface StartOptions {
+    config?: string;
+    wsPort?: number;
+}
+export declare function startServer(options?: StartOptions): void;
 export { MockServer } from './server';
 export * from './types';

package/dist/index.js

@@ -21,12 +21,17 @@ exports.MockServer = exports.startServer = void 0;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const server_1 = require("./server");
-function startServer(configPath = 'data.json') {
+function startServer(options = {}) {
+    const configPath = options.config || 'data.json';
     const fullPath = path_1.default.resolve(process.cwd(), configPath);
     try {
         const configContent = fs_1.default.readFileSync(fullPath, 'utf-8');
         const config = JSON.parse(configContent);
-        const server = new server_1.MockServer(config, configPath);
+        const serverConfig = {
+            ...config.server,
+            wsPort: options.wsPort
+        };
+        const server = new server_1.MockServer(serverConfig, configPath);
         server.start();
     }
     catch (error) {

package/dist/server.d.ts

@@ -1,18 +1,21 @@
-import { Express } from 'express';
-import { Config } from './types';
+import type { Config } from './types';
 export declare class MockServer {
     private app;
-    private config;
     private configPath;
-    constructor(config: Config, configPath?: string);
-    getApp(): Express;
-    private setupMiddleware;
-    private logRequest;
-    private generateMockData;
-    private handleRequest;
-    private setupRoutes;
-    private createRoute;
-    private findRouteConfig;
-    private generateMockResponse;
-    start(): void;
+    private config;
+    private serverConfig;
+    private logs;
+    private readonly MAX_LOGS;
+    private upload;
+    private wss;
+    private clients;
+    constructor(serverConfig?: Config, configPath?: string);
+    private loadConfig;
+    private saveConfig;
+    private setupConfigRoutes;
+    private setupMockRoutes;
+    private sendResponse;
+    private setupUploadRoute;
+    start(port?: number): void;
+    private broadcastLog;
 }