Implementación de Mock Server para Colaboración Frontend-Backend

  • Simulación directa en código: Contamina la lógica de negocio y requiere eliminación posterior
  • Reemplazo de archivos con Fiddler: Requiere múltiples archivos cuando hay muchas APIs
  • Lectura de JSON con fs: Complicado para generar datos extensos como listas largas
  • MockJS: Evita problemas anteriores pero no valida parámetros faltantes
  • Service Worker: Intercepta peticiones del frontend pero no funciona con Node.js
Método Valida Parámetros Cambio Fácil de Entorno Soporta Ambos Lados Sin Modificar Código Datos Fáciles
Código directo
Fiddler
fs + JSON
MockJS
Service Worker

El objetivo ideal incluye:

  1. Validación temprana de parámetros requeridos
  2. Cambio sencillo entre entornos (mock, testing, producción)
  3. Interceptar peticiones de ambos lados con mínimas modificaciones
  4. Generación eficiente de datos masivos

Para nuestro proyecto, desarrollamos una solución combinando MockJS con Express que satisface estos requisitos.

1. Generación de Datos y Validación de Parámetros

MockJS permite generar datos masivos eficientemente:

// ranking-data.js
const Mock = require('mockjs');

module.exports = Mock.mock({
    "ranking|1000": [
        {
            "position|+1": 1,
            userId: () => Mock.Random.string(32),
            username: () => Mock.Random.string(1, 20),
            avatar: () => avatars[Mock.Random.integer(0, 3)],
            region: "INVALID",
            title: "Novato",
            level: () => Mock.Random.integer(1, 20),
            points: () => Mock.Random.integer(1, 2000),
            winRate: 86
        }
    ]
});

Para validación de parámetros, implementamos un esquema similar a jQuery.validate:

module.exports = {
    validation: {
        period: {
            required: true,
            type: "number",
            default: 0,
            min: 0,
            max: 1
        }
    }
};

El servidor valida los parámetros antes de devolver datos simulados.

2. Gestión de Entornos

Contorlamos el origen de datos mediante parámetros:

  • mock=simulation: Datos simulados (desarrollo temprano)
  • mock=testing: Entorno de pruebas
  • mock=production: Datos reales (validación)

Este enfoque mantiane el aislamiento por interfaz y solo funciona en deasrrollo.

3. Integración MockJS y Validación

Combinamos validación y generación de datos:

module.exports = {
    validation: {
        period: {
            required: true,
            type: "number",
            default: 0,
            min: 0,
            max: 1
        }
    },
    response: {
        status: 0,
        message: "success",
        "x-origin": "mock",
        data: Mock.mock({
            "ranking|100": [
                {
                    "position|+1": 1,
                    userId: () => Mock.Random.string(32),
                    username: () => Mock.Random.string(1, 20),
                    avatar: () => avatars[Mock.Random.integer(0, 3)],
                    region: "INVALID",
                    title: "Novato",
                    level: () => Mock.Random.integer(1, 20),
                    points: () => Mock.Random.integer(1, 2000),
                    winRate: 86
                }
            ]
        })
    }
};

4. Modificación en Tiempo Real

Implementamos un panel de desarrollo para modificar datos simulados y ver cambios inmediatamente.

Etiquetas: mockjs express API Simulation Frontend Development Backend Integration

Publicado el 8-23 18:26