Cómo usar Mockjs para simular datos de backend
El uso de Mockjs puede simular datos por adelantado, siempre que la interfaz de datos y los datos se acuerden con el backend. Utilice simulaciones para generar los datos que desee, separando así el desarrollo front-end y back-end.
Sus principales funciones son:
Generar datos de simulación basados en plantillas de datos.
Genere datos de simulación basados en plantillas HTML.
Interceptar y simular solicitudes ajax.
Especificación gramatical
La especificación de sintaxis de Mock.js consta de dos partes:
1. Definición de plantilla de datos (DTD)
2. Definición de marcador de posición de datos (DPD)
Especificación de definición de plantilla de datos DTD
Cada atributo en la plantilla de datos consta de 3 partes: nombre de atributo, regla de generación, valor de atributo:
//Nombre del atributo nombre
// Generar regla regla
// Valor del atributo valor
'nombre|regla': valor< /p
Nota:
El nombre del atributo y la regla de generación están separados por una barra vertical.
La generación de reglas es opcional. Hay siete formatos para generar reglas:
'nombre|min-max': valor
'nombre|count': valor 'nombre|min-max.dmin-dmax': valor 'nombre|min-max.dcount': valor 'nombre|recuento..dmin-dmax': valor 'nombre|recuento.dcount': valor 'nombre paso': valor
El significado de las reglas generadas dependen del tipo de valor del atributo.
Los valores de los atributos pueden contener marcadores de posición @. El valor de la propiedad también especifica el tipo de valores iniciales y finales.
Ejemplo 1:
Mock.mock({
'número1|1-100.1-10': 1,
'número2 |123.1-10': 1,
'número3|123.3': 1,
'número4| 123.10': 1.123
})
// =gt;
{
"número1": 12,92,
"número2": 123,51,
" number3": 123.777,
"number4": 123.1231091814
}
Ejemplo 2: invertir la expresión regular regexp para generar una cadena coincidente.
Se utiliza para generar cadenas con formato personalizado:
Mock.mock({
'regexp1':/[a-z][A-Z][0-9]/,
'regexp2'：/\w\W\s\Sd\D/,
'regexp3'：/\d{5,10}/
})
// =gt;
{
'regexp1': 'pJ7',
'regexp2': 'F)\ fp1G',
'regexp3': '561659409'
}
Ejemplo 3:
//cadena representa el nombre del atributo
p>// 3 representa el número de repeticiones después del valor del atributo
Mock.mock({
"string|3": "★"
})
Resultado:
//El número de estrellas es 3
{
"string" : "★★ ★★★ "
}
Ejemplo 4:
// num es el nombre del atributo
// Produce un valor mayor que o igual a 1 y menor que o Un número entero igual a 100, el valor del atributo 100 solo se usa para determinar el tipo
Mock.Mock.Mock({
) es un simulacro objeto. simulado({
"num|1-100"： 100
})
Resultado:
{
"número": 8
}
Especificación de definición de marcador de posición de datos DPD
El marcador de posición es solo un marcador de posición en la cadena de valor del atributo, no aparecerá en el valor final de la propiedad.
El formato del marcador de posición es:
@Placeholder
@Placeholder(Parámetro [, Parámetro])
Nota:
p>@ identifica la siguiente cadena como marcador de posición.
El marcador de posición hace referencia al método en Mock.Random.Random.extend() para extender el marcador de posición personalizado.
Los marcadores de posición también pueden hacer referencia a atributos en plantillas de datos. Los marcadores de posición tienen prioridad sobre los atributos en las plantillas de datos. Los marcadores de posición admiten rutas relativas y absolutas. mock.mock({
nombre: {
primero: '@FIRST',
medio: '@FIRST',
último: '@LAST',
completo: '@first @middle @last'
Completo: '@first @middle @last'
Para ser Marcadores de posición personalizados extendidos, también puede hacer referencia a propiedades en la plantilla de datos.
@último'
}
})
// =gt;
{
"nombre" : {
"primero": "Charles",
"medio": "Brenda",
"último": "López",
"full": "Charles Brenda Lopez"
}
}
Ejemplo de solicitud de datos falsos mediante jQuery ajax
1. Primero, introduzca mockjs y jquery (aquí, use ajax encapsulado en jq para enviar la solicitud)
lt;script type="text/javascript" src="js/jquery-1.11.3. min.js "gt;lt;/scriptgt;
lt;script src=" es la URL de la siguiente solicitud ajax y el simulacro interceptará la URL.
Intercept'
// El segundo parámetro aquí es la plantilla de datos de la plantilla, el simulacro devolverá los datos generados por la plantilla
Mock.mock('', {
'nombre': '@nombre',
'edad|1-100': 100,
'ciudad': '@ciudad'
} );
3. solicitud de resultado de envío ajax
$.ajax({
url: '',
tipo de datos: ' json '
}).done(function(data, status, xhr) {
console.log( JSON.stringify(data)); //{"name"：" Mark Lee", "age": 4, "city": "Liaoyang City"}
});
Utilice mockjs en vuecli
Primera instalación
npm install mockjs
Creé un nuevo simulacro en scripts
Creé un nuevo archivo mockdata.js en scripts
. El contenido es el siguiente:
importar Mock desde 'mockjs';
const data = Mock.mock({
// El valor de la lista de atributos es un valor que contiene de 1 a una matriz de 10 elementos
'foods|10-50': {
'name': "@ctitle(2, 10)",
" img": "@image('600x600', #b7ef7c)",
" brief": "@csentence(1, 50)",
"precio|0- 20.0 -2": 1,
"num": 0,
"minusFlag": verdadero,
"time": "@time",
p>
"peisongfei|0-100.0-2": 1,
"límite|0-50": 1
}],
"ventas|10-50": {
// La identificación del atributo es un número que se incrementa automáticamente comenzando en 1 y se incrementa en 1 cada vez
'nombre': "@ctitle ( 2, 10)",
'img': "@image('600x600', #b7ef7c)",
'breve': "@csentence(1, 50) " ,
"precio|0-100.0-2": 1,
"num": 0,
"minusFlag": p> "minusFlag" : verdadero,
"time": "@time",
"peisongfei|0-100.0-2": 1,
"limit|0- 100 ": 1
}]
});
exportar datos {
predeterminados
}
/ p>A continuación, en el grupo vue donde desea utilizar datos simulados
En la página del archivo, escriba
importar datos simulados desde "@/scripts/mockdata.js";
Para hacer referencia a los datos, escriba directamente en su método, solo cite Los datos de simulación que acabas de crear servirá. Por ejemplo:
new Promise((resolve, rechazar) =gt; {
that.foods =mockdata.data.foods; //simplemente apunta directamente al objeto de datos falso que generado
that.foodsListLen = that.foods.length
}).catch(err=gt; {
console.log(err)
}) Creo que a través de los casos de este artículo, usted ha dominado este método. Para obtener más información interesante, preste atención a otros artículos relacionados en Gxl.com.
Lectura recomendada: