Что такое MockJS
В среде разработки, где передняя и задняя части разделены, учащиеся переднего плана должны ждать, пока учащиеся внутреннего интерфейса предоставят интерфейс и документы интерфейса, прежде чем продолжить разработку. MockJS позволяет фронтенд-студентам развиваться независимо от бэкенд-студентов.Фронтенд-студенты могут сортировать интерфейсные документы в соответствии с бизнесом и использовать MockJS для имитации внутреннего интерфейса. Так как же MockJS имитирует внутренний интерфейс? MockJS имитирует интерфейс, предоставляемый серверными одноклассниками, перехватывая определенные запросы AJAX и генерируя случайные числа заданного типа данных.
Готов к работе
Наверху написано: Некоторые мелкие партнеры могут не иметь возможности развернуть интерфейсную среду, здесь я загружаю код наgithub, друзья, которым это нужно, могут загрузить код и просмотреть следующий учебник по коду.
Сначала установите MockJS. Установите axios для отправки запросов AJAX, чтобы протестировать фиктивный интерфейс. Можно использовать другие методы, такие как собственные запросы AJAX или $.ajax. Вам не нужно устанавливать axios для отправки запросов AJAX с использованием других методов.
npm install mockjs --save
npm install axios --save
Используйте инструмент упаковки webpack, чтобы упаковать один файл vue. Сначала установите css-loader, style-loader, vue, vue-loader, vue-template-compiler.
npm install css-loader style-loader --save-dev
npm install vue vue-loader vue-template-compiler --save-dev
Затем добавьте соответствующий загрузчик в файл конфигурации webpack.config.js.Полная схема конфигурации выглядит следующим образом.
const path = require("path");
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
entry: './webapp/App.js',
output: {
filename: 'App.js',
path: path.resolve(__dirname, './dist')
},
module: {
rules: [
{
test: /\.css/,
use: ['style-loader', 'css-loader']
},
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
],
mode: "production"
}
Создайте файл mock.js и импортируйте его в файл входа (main.js).
require('./mock.js');
Внесите MockJS в файл mock.js.
import Mock from 'mockjs';
Позже мы напишем фиктивный интерфейс в mock.js.
Структура каталогов следующая:
Официально начать
В MockJS есть два способа определить данные, возвращаемые фиктивным интерфейсом: один — использовать определение шаблона данных, которое имеет большую степень свободы и может настраивать различные случайные типы данных, а другой — использовать определение метода инструмента Random. класс MockJS, Этот метод имеет небольшую степень свободы и может только случайным образом генерировать типы данных, предоставляемые MockJS. Те, кто спешит, могут сразу перейти к пункту 2. Используйте класс инструмента Rndom, чтобы определить возвращаемое значение фиктивного интерфейса.
1. Шаблон данных определяет возвращаемое значение фиктивного интерфейса.
Позвольте мне привести Вам пример
//mock.js数据模板
{
'string|1-10':'string'
}
//接口返回的生成的数据===>
{
'string':'stringstringstring'
}
Формат шаблона данных — «имя атрибута|генерирующее правило»: «значение атрибута», а генерирующее правило определяет значение атрибута сгенерированных данных. Всего существует 7 правил генерации, а именно:
- 'name|min-max': value
- 'name|count': value
- 'name|min-max.dmin-dmax': value
- 'name|min-max.dcount': value
- 'name|count.dmin-dmax': value
- 'name|count.dcount': value
- 'name|+step': value
Для разных типов данных могут использоваться разные правила генерации.Тип данных значения атрибута может быть Числовой, Логический, Строка, Объект, Массив, Функция, Нуль, но не Неопределенный.Я опишу каждый тип данных ниже. Используйте 7 правил генерации, чтобы посмотреть, какие правила генерации можно использовать для каждого типа данных.Студенты, которые хотят увидеть вывод, напрямую перетаскивают его в таблицу 1.8.
1.1'name|min-max': value
Прежде чем мы начнем, вы можете зайти в мойgithubЗагрузите и запустите проект, объедините проект, чтобы сделать его более интуитивно понятным, и узнайте, какие данные случайным образом генерируются каждым правилом генерации путем обновления.
В файле mock.js определите массив data1 для хранения случайно сгенерированных значений свойств, затем определите объект row1 для хранения сгенерированных значений свойств, а затем определите фиктивный интерфейс, используйте axios в App.vue, чтобы инициировать запрос на запрос данных. из фиктивного интерфейса и отображается в таблице.
const data1=[];
//数据模板'name|min-max':value
let row1={
'string|1-9':'string',
'number|1-9':1,
'boolean|1-9':false,
'undefined|1-9':undefined,
'null|1-9':null,
'object|1-9':{object1:'object1',object2:'object2',object3:'object3'},
'array|1-9':['array1','array2'],
'function|1-9':()=>'function'
};
data1.push(row1);
//定义模拟接口只能接收post请求，定义返回的数据为data1
Mock.mock('/Get/list1','post',data1);
Для числовых значений генерируются случайным образом значения от 1 до 9.
Для логического типа вероятность min/(min+max) генерирует значение value, а вероятность max/(min+max) генерирует значение !
Неопределенное значение напрямую игнорируется, а неопределенное имя свойства не существует в сгенерированном объекте.
Значение, сгенерированное для null, равно null.
Для объекта сначала случайным образом сгенерируйте числовое значение в min-max, а затем выберите атрибуты значения объекта для формирования нового объекта.Если значение больше, чем количество атрибутов объекта, все атрибуты вынимаются, как показано на рисунке.Увидите, что все свойства объекта объекта извлекаются для формирования нового объекта.
Для массива сначала случайным образом сгенерируйте числовое значение в min-max, затем повторите значения элементов массива раз, а затем объедините их в массив.Из рисунка видно, что случайное значение равно 6, и 6 массивов объединены в получить новый массив.
Для функций функция выполняется напрямую, и возвращается значение функции.
1.2'name|count':value
//数据模板'name|count':value
let row2={
'string|3':'string',
'number|3':1,
'boolean|3':false,
'undefined|3':undefined,
'null|3':null,
'object|3':{object1:'object1',object2:'object2',object3:'object3'},
'array|3':['array1','array2'],
'function|3':()=>'function'
};
data1.push(row2);
Правило |count повторяется количество раз для строки, чтобы получить новую строку.Из рисунка видно, что оно повторяется 3 раза.
Для числовых значений генерируется значение count.
Для логического типа (количество-1)/вероятность количества для создания значения значения, вероятность 1/количество для создания значения !value, I здесь составляет вероятность 66,7% для генерации значения false, вероятность 33,3% для создания значения true.
Неопределенное значение напрямую игнорируется, а неопределенное имя свойства не существует в сгенерированном объекте.
Значение, сгенерированное для null, равно null.
Для объекта выберите количество атрибутов объекта, чтобы сформировать новый объект.Если количество больше, чем количество атрибутов объекта, все атрибуты вынимаются.На рисунке видно, что все атрибуты объекта объект вынимается, чтобы сформировать новый объект новый объект.
Для массивов элементы массива повторяются количество раз, а затем объединяются в массив.Из рисунка видно, что случайное значение равно 3, и 3 массива объединяются для получения нового массива.
Для функций функция выполняется напрямую, и возвращается значение функции.
1.3'name|min-max.dmin-dmax':value
//数据模板'name|min-max.dmin-dmax':value
let row3={
'string|1-9.1-9':'string',
'number|1-9.1-9':1, //只有数值起作用
'boolean|1-9.1-9':false,
'undefined|1-9.1-9':undefined,
'null|1-9.1-9':null,
'object|1-9.1-9':{object1:'object1',object2:'object2',object3:'object3'},
'array|1-9.1-9':['array1','array2'],
'function|1-9.1-9':()=>'function'
};
data1.push(row3);
Правило |min-max.dmin-dmax — это правило |min-max для строк.
Для числовых значений генерируется число с плавающей запятой, целая часть числа с плавающей запятой равна min-max, а количество десятичных разрядов равно dmin-dmax. Цифра дает значение 3,59 с целым числом из 3 знаков после запятой и 2 знаков после запятой.
Для логических типов это правило |min-max
Неопределенное значение напрямую игнорируется, а неопределенное имя свойства не существует в сгенерированном объекте.
Значение, сгенерированное для null, равно null.
Также для объектов | правило минимума-максимума
Также правило |min-max для массивов
Для функций функция выполняется напрямую, и возвращается значение функции.
1.4'name|min-max.dcount':value
//数据模板'name|min-max.dcount':value
let row4={
'string|1-9.3':'string',
'number|1-9.3':1, //只有数值起作用
'boolean|1-9.3':false,
'undefined|1-9.3':undefined,
'null|1-9.3':null,
'object|1-9.3':{object1:'object1',object2:'object2',object3:'object3'},
'array|1-9.3':['array1','array2'],
'function|1-9.3':()=>'function'
};
data1.push(row4);
Правило |min-max.scount — это правило |min-max для строк.
Для числовых значений генерируется число с плавающей запятой, целая часть числа с плавающей запятой — это min-max, а количество десятичных разрядов — это scount. Цифра генерирует значение 6,725 с 6 знаками после запятой и 3 знаками после запятой.
Для логических типов это правило |min-max
Неопределенное значение напрямую игнорируется, а неопределенное имя свойства не существует в сгенерированном объекте.
Значение, сгенерированное для null, равно null.
Также для объектов | правило минимума-максимума
Также правило |min-max для массивов
Для функций функция выполняется напрямую, и возвращается значение функции.
1.5'name|count.dmin-dmax':value
//数据模板'name|count.dmin-dmax':value
let row5={
'string|3.1-9':'string',
'number|3.1-9':1, //只有数值起作用
'boolean|3.1-9':false,
'undefined|3.1-9':undefined,
'null|3.1-9':null,
'object|3.1-9':{object1:'object1',object2:'object2',object3:'object3'},
'array|3.1-9':['array1','array2'],
'function|3.1-9':()=>'function'
};
data1.push(row5);
Правило |count.dmin-dmax — это правило |count для строк.
Для числовых значений генерируется число с плавающей запятой, значение целочисленной части числа с плавающей запятой — это count, а количество десятичных разрядов — dmin-dmax бит. Цифра дает значение 3,035354 с 3 знаками после запятой и 6 знаками после запятой.
Для логических типов это правило |count
Неопределенное значение напрямую игнорируется, а неопределенное имя свойства не существует в сгенерированном объекте.
Значение, сгенерированное для null, равно null.
Также для объектов |правило подсчета
Также для массивов |правило подсчета
Для функций функция выполняется напрямую, и возвращается значение функции.
1.6'name|count.dcount':value
//数据模板'name|count.dcount':value
let row6={
'string|3.3':'string',
'number|3.3':1, //只有数值起作用
'boolean|3.3':false,
'undefined|3.3':undefined,
'null|3.3':null,
'object|3.3':{object1:'object1',object2:'object2',object3:'object3'},
'array|3.3':['array1','array2'],
'function|3.3':()=>'function'
};
data1.push(row6);
Правило |count.dcount — это правило |count для строк.
Для числовых значений генерируется число с плавающей запятой, значение целочисленной части числа с плавающей запятой равно count, а количество десятичных разрядов равно dcount бит. Цифра генерирует значение 3,425 с целым числом из 3 знаков после запятой и 3 знаков после запятой.
Для логических типов это правило |count
Неопределенное значение напрямую игнорируется, а неопределенное имя свойства не существует в сгенерированном объекте.
Значение, сгенерированное для null, равно null.
Также для объектов |правило подсчета
Также для массивов |правило подсчета
Для функций функция выполняется напрямую, и возвращается значение функции.
1.7'name|+step':value
//数据模板'name|+step':value
let row7 = {
'string|+3': 'string',
'number|+3': 1, //只有数值起作用
'boolean|+3': false,
'undefined|+3': undefined,
'null|+3': null,
'object|+3': {
object1: 'object1',
object2: 'object2',
object3: 'object3'
},
'array|+3': ['array1', 'array2'],
'function|+3': () => 'function'
};
data1.push(row7);
Правило |+step не влияет на строки и возвращает строку напрямую.
Для значения начальным значением является предустановленное значение 1, и значение будет увеличиваться на один шаг каждый раз, когда запрос повторно запрашивается.После нажатия кнопки ниже значение увеличится от 3 до 4.
Он не влияет на логический тип и возвращает логическое значение напрямую.
Неопределенное значение напрямую игнорируется, а неопределенное имя свойства не существует в сгенерированном объекте.
Значение, сгенерированное для null, равно null.
Он также не влияет на объект и возвращает объект напрямую.
Для массива значение нижнего индекса 0 массива возвращается при первом запросе, и нижний индекс увеличивается на один шаг каждый раз, когда запрос делается снова.Нижний индекс 1, в это время значение нижнего индекса вычитается от длины массива 2 до тех пор, пока значение нижнего индекса не окажется в пределах максимального нижнего индекса массива, 3-2=1, поэтому нажмите кнопку один раз и верните значение нижнего индекса массива 1.
Для функций функция выполняется напрямую, и возвращается значение функции.
1.8 Резюме
| String | Number | Boolean | Undefined | Null | Object | Array | Function | |
|---|---|---|---|---|---|---|---|---|
| |min-max | После того, как строка повторяется мин-макс раз, новая строка получается путем склейки | Случайным образом получить значение min-max | вероятность min/(min+max) генерирует значение value, вероятность max/(min+max) генерирует значение !value | Текущий тип данных недействителен | вернуть нулевое значение | Сначала случайным образом сгенерируйте числовое значение в min-max, а затем выберите атрибуты значения объекта, чтобы сформировать новый объект.Если значение больше, чем количество атрибутов объекта, все атрибуты будут удалены. | Сначала случайным образом сгенерируйте числовое значение в min-max, затем повторите значения элементов массива раз и объедините их в массив | непосредственно выполняет функцию и возвращает значение функции |
| |count | Строка повторяется количество раз, чтобы получить новую строку | Генерирует число, значение которого равно count | (count-1)/вероятность count генерирует значение value, 1/вероятность count генерирует значение !value | Текущий тип данных недействителен | вернуть нулевое значение | Выберите количество атрибутов объекта, чтобы сформировать новый объект.Если количество больше, чем количество атрибутов объекта, все атрибуты будут удалены. | Повторите количество элементов массива и объедините их в один массив | непосредственно выполняет функцию и возвращает значение функции |
| |min-max.dmin-dmax | как правило|мин-макс | Генерирует число с плавающей запятой, где целая часть числа с плавающей запятой равна min-max, а количество десятичных разрядов равно dmin-dmax. | как правило|мин-макс | Текущий тип данных недействителен | вернуть нулевое значение | как правило|мин-макс | как правило|мин-макс | непосредственно выполняет функцию и возвращает значение функции |
| |min-max.dcount | как правило|мин-макс | Генерирует число с плавающей запятой, целая часть числа с плавающей запятой представляет собой мин-макс, а количество десятичных разрядов равно dcount. | как правило|мин-макс | Текущий тип данных недействителен | вернуть нулевое значение | как правило|мин-макс | как правило|мин-макс | непосредственно выполняет функцию и возвращает значение функции |
| |count.dmin-dmax | То же, что и правило |count | Генерирует число с плавающей запятой, значение целой части числа с плавающей запятой — это count, а количество десятичных разрядов — dmin-dmax цифр. | То же, что и правило |count | Текущий тип данных недействителен | вернуть нулевое значение | То же, что и правило |count | То же, что и правило |count | непосредственно выполняет функцию и возвращает значение функции |
| |count.dcount | То же, что и правило |count | Генерирует число с плавающей запятой, где целая часть числа с плавающей запятой является счетчиком, а количество десятичных разрядов — битами dcount. | То же, что и правило |count | Текущий тип данных недействителен | вернуть нулевое значение | То же, что и правило |count | То же, что и правило |count | непосредственно выполняет функцию и возвращает значение функции |
| |+step | Без эффекта, возвращаемое значение напрямую | Начальное значение является предустановленным значением, и значение будет увеличиваться на один шаг при каждом повторном запросе. | Нет эффекта, вернуть значение value | Текущий тип данных недействителен | вернуть нулевое значение | Нет эффекта, вернуть значение value | Начальным значением нижнего индекса является значение предустановленного значения.Каждый раз, когда запрос делается снова, значение нижнего индекса будет увеличиваться на значение шага. | непосредственно выполняет функцию и возвращает значение функции |
Среди них четыре правила |min-max.dmin-dmax, |min-max.dcount, |count.dmin-dmax и |count.dcount в основном используются для типа Number.
2. Используйте класс инструментов Random, чтобы определить возвращаемое значение фиктивного интерфейса.
MockJS предоставляет набор методов, которые позволяют нам быстро рандомизировать нужные данные.
const Random=Mock.Random;
{
'Boolean': Random.boolean, // 随机生成布尔类型
'Natural': Random.natural(1, 100), // 随机生成1到100之间自然数
'Integer': Random.integer(1, 100), // 生成1到100之间的整数
'Float': Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位
'Character': Random.character(), // 生成随机字符串,可加参数定义规则
'String': Random.string(2, 10), // 生成2到10个字符之间的字符串
'Range': Random.range(0, 10, 2), // 生成一个数组，数组元素从0开始到10结束，间隔为2
'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式，默认yyyy-mm-dd
'Image1': Random.image(Random.size, '#02adea', '#fff','png','Hello'), // Random.size表示将从size数据中任选一个数据，生成Random.size指定大小的，背景为'#02adea'的，前景色为'#fff'的，格式为'png'的，内容为'Hello'的图片。
'Image2':Random.dataImage('200x100', 'Hello Mock.js!'),//只设置大小
'Color': Random.color(), // 生成一个颜色随机值
'Paragraph':Random.paragraph(2, 5), //生成2至5个句子的文本
'Name': Random.name(), // 生成姓名
'Url': Random.url(), // 生成url地址
'Address': Random.province() // 生成地址
}
После организации данных также необходимо настроить фиктивный интерфейс.
Mock.mock('/Get/list2', 'post', data2) ;
Затем получите доступ к интерфейсу через AJAX, чтобы получить смоделированные данные.
Полный код:
//mock.js
const Random = Mock.Random;
let data2 = [] // 用于接受生成数据的数组
let size = [
'300x250', '250x250', '240x400', '336x280',
'180x150', '720x300', '468x60', '234x60',
'88x31', '120x90', '120x60', '120x240',
'125x125', '728x90', '160x600', '120x600',
'300x600'
] // 定义随机值
for(let i = 0; i < 10; i ++) { //生成10个对象放到数组中
let template = {
'Boolean': Random.boolean, // 可以生成基本数据类型
'Natural': Random.natural(1, 100), // 生成1到100之间自然数
'Integer': Random.integer(1, 100), // 生成1到100之间的整数
'Float': Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位
'Character': Random.character(), // 生成随机字符,可加参数定义规则
'String': Random.string(2, 10), // 生成2到10个字符之间的字符串
'Range': Random.range(0, 10, 6), // 生成一个随机数组
'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式
'Image': Random.image(Random.size, '#02adea', '#fff','png','Hello'),
'Color': Random.color(), // 生成一个颜色随机值
'Paragraph':Random.paragraph(2, 5), //生成2至5个句子的文本
'Name': Random.name(), // 生成姓名
'Url': Random.url(), // 生成web地址
'Address': Random.province() // 生成地址
}
data2.push(template)
}
Mock.mock('/Get/list2', 'post', data2) // 声明模拟接口
//App.vue
axios('/Get/list2').then(res => {
this.dataShow2 = res;
});
3. Используйте заполнители данных для определения возвращаемых значений фиктивного интерфейса.
Определение данных моделирования с использованием заполнителей данных может быть более кратким, чем служебный класс Random.
{
'Boolean': '@boolean', // 随机生成布尔类型
'Natural': '@natural(1, 100)', // 随机生成1到100之间自然数
'Integer': '@integer(1, 100)', // 生成1到100之间的整数
'Float': '@float(0, 100, 0, 5)', // 生成0到100之间的浮点数,小数点后尾数为0到5位
'Character': '@character("aeiou")', // 在aeiou中，生成随机字符，不传参表示生成随机字符
'String': '@string( 2, 10)', // 生成2到10个字符之间的字符串
'Range': '@range(0, 10, 2)', // 生成一个数组，数组元素从0开始到10结束，间隔为2
'Date': '@date("yyyy yy y MM M dd d")', // 生成一个随机日期,可加参数定义日期格式，默认yyyy-mm-dd
'Color1': '@color', // 生成一个颜色16进制随机值
'Color2': '@rgb', //生成一个颜色rgb随机值
'Paragraph':'@paragraph(2, 5)', //生成2至5个句子的文本
'Sentence':'@sentence(3, 5)', //生成3至5个单词组成的一个句子
'World':'@word(3, 5)', //生成3-5个字母组成的单词
'title':'@title(3,5)', //生成3-5个单词组成的标题
'cParagraph':'@cparagraph(2, 5)', //生成2至5个句子的中文文本
'cSentence':'@csentence(3, 5)', //生成3至5个词语组成的一个中文句子
'cWorld':'@cword(3, 5)', //生成3-5个字组成的中文词语
'ctitle':'@ctitle(3,5)', //生成3-5个词语组成的中文标题
'Name': '@name', // 生成姓名
'cName': '@cname', // 生成中文姓名
'Url': '@url', // 生成url地址
'Email':'@email',//生成邮箱
'Address': '@county(true)'， // 生成省 市 县组成的地址
'Guid':'@guid()', //生成Guid值
}
резюме
MockJS делает переднюю и заднюю части более разделенными, и в то же время, я думаю, самое главное, что он заставляет людей, работающих с фронтендом, также думать о бизнесе. В традиционной разработке фронтенд-персонал в основном ждет интерфейс и документы интерфейса, предоставленные бэкенд-персоналом, и не знает, как активно разбираться с интерфейсными документами.После использования MockJS фронтенд-персонал может лучше участвовать в проекте с перспектива всего проекта.
общаться
Если эта статья помогла вам, и если вы считаете, что она хороша, поставьте ей звезду.github.com/lizijie123