# Datos simulados

Los datos simulados son una parte integral del desarrollo front-end, el enlace clave para separar el desarrollo front-end y el back-end. Como acordamos anteriormente, la interfaz del lado del servidor, los datos de solicitud analógica e incluso la lógica pueden hacer que el desarrollo front-end sea independiente, no será bloqueado por el desarrollo del servidor.

# Swagger

En el proyecto de mi empresa, el backend simula los datos mediante swagger.

swagger es una herramienta de generación de documentos API REST que genera automáticamente documentación a partir de comentarios en el código. Puede ser multiplataforma, de código abierto, admite la mayoría de los idiomas, la comunidad es buena, en resumen, muy buena y recomendable.

Demo en línea

# Easy-mock

vue-admin-template anteriormente utilizó easy-mock para simular datos. Es una visualización pura de front-end y puede generar rápidamente servicios de persistencia para datos analógicos. Muy fácil de usar y también se puede combinar con swagger, tiene soporte para cross-domain, ya sea un equipo o un proyecto personal, vale la pena intentarlo.

Demo en línea

WARNING

La versión en línea de vue-admin-template ya no usa easy-mock. Debido a que el servicio gratuito en línea es muy inestable, se colgará de vez en cuando. Si lo necesitas, puede crear tu propio servicio de acuerdo con su tutorial.

# Mockjs

Como vue-element-admin es un proyecto personal de front-end puro, todos los datos de simulación son generados por mockjs. Su principio es: interceptar todas las solicitudes y proxy al local, y luego simular datos, por lo que descubrirás que no se emiten solicitudes en red.

Pero su mayor problema es el mecanismo de implementación. Sobrescribe el objeto XMLHttpRequest del navegador para interceptar todas las solicitudes y el proxy al local. En la mayoría de los casos es bastante conveniente de usar, pero debido a que reescribe el objeto XMLHttpRequest, por ejemplo, el método progress o algunas bibliotecas de terceros que dependen de XMLHttpRequest serán incompatibles. Mirando los issues de mi proyecto, sabrás cuántas personas tienen problemas.

También tiene un problema porque son datos que se simulan localmente y en realidad no realizan ninguna solicitud de red. Por lo tanto, la depuración local es muy problemática y solo se puede depurar mediante console.log. Toma el ejemplo de vue-element-admin. Si deseas averiguar qué datos devuelve la api getInfo(), solo puedes saberlo mirando el código fuente o manualmente Debug.

# Nueva manera v4.0.0+

Después de la versión v4.0, se lanzará un mock-server localmente para simular los datos, y el entorno en línea continuará utilizando mockjs para la simulación. (Debido a que este proyecto es un proyecto front-end puro, también puedes construir un servidor en línea para proporcionar datos).

La ventaja de esta manera es resolver los puntos críticos anteriores mientras se conservan las ventajas de 'mockjs'. Dado que nuestro simulacro se implementa completamente basado en webpack-dev-serve, mock-server se iniciará automáticamente junto con el proyecto, y también pasará chokidar para observar los cambios en el contenido de la carpeta mock. Cuando se produce un cambio, la interfaz mock-api registrada previamente se borra y la nueva interfaz se vuelve a montar dinámicamente para admitir actualizaciones. Si estás interesado, puedes mirar el código mock-server.js. Dado que es un verdadero "servidor", puedes conocer claramente la estructura de datos devuelta por la interfaz a través de la sección "red" de Chrome. Al mismo tiempo, resuelves el problema de que los mockjs anteriores rescriben el objetoXMLHttpRequest, lo que hace que muchas bibliotecas de terceros fallen.

Todas las solicitudes para este proyecto se envían a través del paquete request.js, mediante la lectura del código fuente puedes encontrar que todas las solicitudes están configuradas en baseURL, y este se configura dinámicamente al leer la variable de entorno process.env.VUE_APP_BASE_API, para que podamos usar diferentes entornos.

# Eliminar

Si no deseas usar mock-server, solo el middleware after de webpack-dev-server desde vue.config.js.

Por defecto, las solicitudes locales son proxy para http://localhost:${port}/mock, y puedes modificar 'proxy' si deseas ajustar a tu propia dirección simulada.

proxy: {
  // cambiar xxx-api/login => mock/login
  // detalles: https://cli.vuejs.org/config/#devserver-proxy
  [process.env.VUE_APP_BASE_API]: {
    target: `http://localhost:${port}/mock`,
    changeOrigin: true,
    pathRewrite: {
      ['^' + process.env.VUE_APP_BASE_API]: ''
    }
  }
},
after: require('./mock/mock-server.js')

Tenga en cuenta: esta operación requiere un reinicio del servidor.

# Agregar

Si deseas agregar datos simulados, solo busca el archivo mock en la carpeta raíz, agrega la ruta correspondiente, intercepta y simula los datos.

Por ejemplo, necesito agregar una API para obtener la cantidad de comentarios debajo de un artículo en src/api/article a través de fetchComments. Primero crea una nueva api:

export function fetchComments(id) {
  return request({
    url: `/article/${id}/comments`,
    method: 'get'
  })
}

Después de declarar la API, necesitamos encontrar la carpeta simulada correspondiente mock/article.js, debajo Creamos una API simulada que intercepte las rutas.

Ten en cuenta que la intercepción simulada se basa en el enrutamiento. Asegúrate de que la ruta de datos simulados coincida con tu ruta de la API (soporte regular)

// fetchComments mock
{
  // url debe coincidir con la ruta de tu api
  // Por ejemplo, la ruta de fetchComments puede ser /article/1/comments or /article/2/comments
  // Por lo que necesitas que coincida con regularidad
  url: '/article/[A-Za-z0-9]/comments',
  type: 'get', // Debe ser del mismo tipo que tu interfaz define
  response: (req, res) => {
    // return result
    // req y res ver detalles
    // https://expressjs.com/zh-cn/api.html#req
    return {
      code: 20000,
      data: {
        status: 'success'
      }
    }
  }
}

# Cambiar

La operación más común es: has simulado algunos datos localmente, y una vez que el backend completa la API, reemplaza gradualmente la API del simulacro original.

Tomemos como ejemplo la API getRoles en src/api/role.js. Originalmente se simuló de mock/role/index.js. Ahora necesitamos cambiarlo a datos reales de back-end, siempre que esté en mock/role/index.js. Encuentra la ruta correspondiente y luego elimínala. En este momento puedes ver los datos reales en network.

// Lo declarado en la api
export function getRoles() {
  return request({
    url: '/roles',
    method: 'get'
  })
}

// Encuentra la ruta correspondiente y elimina
{
    url: '/roles',
    type: 'get',
    response: _ => {
      return {
        code: 20000,
        data: roles
      }
    }
  },

# Servidores múltiples

Actualmente, el proyecto solo inicia un mock-server, por supuesto, también puedes tener tu propia interfaz mock-server o proxy. Algunas API pueden soportar este servicio, otras pueden soportar otros. Simplemente configúralos en un baseURL diferente. @/utils/request.js

A continuación, configura múltiples proxy de acuerdo con las reglas de url establecidas en vue.config.js.

Documentos relacionados

# Habilitar simulación de front end puro

Ahora en mock/index.js también se encapsula un método simulado de front-end puro, solo necesita estar en src/main.js:

import { mockXHR } from '../mock'
mockXHR()

Esto se convertirá en pura información simulada de front-end y al igual que la versión anterior a la v4.0, el principio es el anterior. La demo en línea que estás viendo actualmente es así.

# Cambiar datos simulados locales y en línea

En muchas ocasiones, encontramos un uso local de datos simulados, entornos en línea que utilizan datos reales o entornos diferentes que utilizan datos diferentes.

Easy-Mock

Debes asegurarte de que tu API simulada local sea coherente con todas las demás direcciones, excepto la ruta raíz. como:

https://api-dev/login   // Solicitud local

https://api-prod/login  // Solicitud en línea

Podemos usar las variables de entorno para hacer diferentes entornos y solicitar diferentes rutas base de la API.

# .env.development
VUE_APP_BASE_API = '/dev-api' #Inyecta la ruta raíz de la API local

# .env.production
VUE_APP_BASE_API = '/prod-api' #Inyecta la ruta raíz de la API de producción

Luego crea una instancia de axios basada en la variable de entorno para tener una baseURL diferente. @/utils/request.js

// crear una instancia de axios
const service = axios.create({
  baseURL: process.env.BASE_API, // base_url de la API
  timeout: 5000 // tiempo de espera de la solicitud
})

De esta manera, podemos cambiar automáticamente las APIs locales y en línea en función de las variables de entorno.

Mock.js

Cuando usamos Mock.js para simular datos localmente, el método de la API del mundo real se usa en línea. Esto es similar al método de easy-mock anterior. Principalmente damos por hecho que cuando se trata de un entorno en línea, usamos la API del mundo real. Solo importamos Mock.js localmente.

// main.js
// se requiere usar variables de entorno para determinarlo
if (process.env.NODE_ENV === 'development') {
  require('./mock') // datos de simulación
}

Los datos simulados solo se importan en el entorno local.