Este não é um ensaio comum de tijolo e argamassa, mas um resumo de ensaio de tijolo e argamassa para uma rápida visão geral das funções.
Introdução
MockJS é um projeto de código aberto do github (https://github.com/nuysoft/Mock), que pode interceptar solicitações AJAX e retornar dados simulados.
Mock.js é um gerador de dados de simulação para ajudar o front-end a desenvolver e prototipar separadamente do progresso do back-end e reduzir a monotonia, principalmente ao escrever testes automatizados.
O que o MockJS pode fazer?
-
dados simulados
-
Verifique se os dados estão em conformidade com a definição do modelo
Uma premissa é que o usuário define o modelo de dados .
Como definir o modelo de dados?
De acordo com a definição do formato json, o formato básico de cada elemento é"name|rule": value
{
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
}
Esses atributos podem ser definidos para campos?
Os atributos que podem ser definidos são basicamente divididos em sete tipos
-
Faixa de valor
-
Intervalo de retenção decimal
-
quantidade
-
Gama de quantidades
-
intervalo de comprimento
-
Comprimento do passo numérico
-
enumerar
Como usar algumas regras aleatórias definidas
Você pode usar diretamente Mock.Randomalgumas regras definidas (chamadas placeholders ), como email url coloretc. Depois que a linha de comando é executada npm install -g mockjs, random -htipos mais definidos podem ser obtidos via .
Como converter para JSONSchema
Mock fornece Mock.toJSONSchema()métodos para converter modelos para JSONSchema
Como validar dados
Mock fornece Mock.valid(template, data)métodos para verificar dados
Mostre um script que acomode todos os itens acima
// 使用 Mock
var Mock = require('mockjs')
var template = {
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
};
// 模拟数据
var data = Mock.mock(template);
console.log(JSON.stringify(data, null, 4));
// toJSONSchema
console.log(JSON.stringify(Mock.toJSONSchema(template), null, 4));
// valid
var data = {
'list': [
]
}
console.log(JSON.stringify(Mock.valid(template, data), null, 4));
// []
/**
[
{
"path": [
"ROOT",
"list"
],
"type": "items",
"actual": 0,
"expected": 1,
"action": "is greater than or equal to",
"message": "[ITEMS] array is too short: ROOT.list must have at least 1 elements but instance has 0 elements"
}
]
*/
// 占位符
var Random = Mock.Random;
console.log(Random.email());
// 自定义占位符
Random.extend({
extendKey: function(date) {
return 'extend value';
}
});
Random.extendKey();
console.log(JSON.stringify(Mock.mock(
{
'key': '@EXTENDKEY'
}
), null, 4));
Interceptar AJAX
Mock.mock( rurl?, rtype?, template|function( options ) )Na verdade, não é um método simples de geração de dados falsos. Através dos dois primeiros parâmetros opcionais, podemos saber que ele também tem a função de interceptar requisições. Especificamente, pode ser descrito como: quando uma solicitação Ajax correspondente a rurl e rtype é interceptada, os dados simulados serão gerados de acordo com o modelo de modelo de dados e retornados como dados de resposta.
No projeto de front-end real, se você deseja interceptar solicitações AJAX, pode adicionar o seguinte código diretamente na frente do código.
// 这里的template即为上一代码中定义的template
Mock.mock('http://steam.meishakeji.com', template);
Parâmetro
rurlSuporte regular
https://github.com/nuysoft/Mock/wiki/Mock.mock()
aplicação prática
Por meio do MockJS, podemos desenvolver facilmente uma ferramenta de gerenciamento de interface que implementa várias funções, como escrita de documentos de interface (com base no formato de definição Mock) e navegação, teste de interface e servidor de dados falsos . Os alunos de front-end também podem interceptar solicitações AJAX locais e obter dados falsos por meio do JSONSchema predefinido sem alterar o código, o que ajuda a melhorar a eficiência do desenvolvimento de front-end.