Это 26-й день моего участия в ноябрьском испытании обновлений. Узнайте подробности события:Вызов последнего обновления 2021 г.

предисловие

Полезен инструмент или нет, зависит от того, как он используется.

Должно быть много front-end программистов, которые очень неторопливы перед совместной отладкой😌, но продолжают работать сверхурочно на этапе совместной отладки до теста и запуска.

Причина тому не более чем непонятный спрос, но если мы сможем выполнить большую часть работ до совместной корректировки, я считаю, что мы сможем уйти с работы вовремя🚗. Если у вас есть подобное явление, я надеюсь, что после прочтения этой статьи оно освободит вас от несогласованной работы.

На всякий случай можно сначала добавить в избранное (Ctrl+D или command+D).

задний план

В среде разработки, потому что серверная и внешняя части разрабатываются параллельно, или передняя часть должна ждать разработки внутреннего интерфейса. Интерфейс напрямую и сильно зависит, а бизнес-логика генерации данных сложна, что серьезно влияет на эффективность разработки.

Поэтому очень важно научиться использовать тот метод, который наиболее подходит для ваших собственных фиктивных данных.

Ниже представлено несколько часто используемых фиктивных схем.Поняв способ автоматического имитации, уменьшив дублирование работы и уменьшив реальные проблемы совместной отладки, мы можем выбрать и настроить наиболее подходящую схему в соответствии со сценарием разработки.

Описание шести часто используемых схем MOCK

Решение ①. Внедрение кода (чаще всего используется в реальной разработке, но не рекомендуется)

Возможности: записывайте фиктивные данные прямо в код или запрашивайте локальный файл JSON.
Достоинства: нет
недостаток:

и другие решения менее эффективны, чем Mock

Переключение с реальной серверной средой очень проблематично, и любое поведение, которое должно вторгаться в среду переключения кода, нехорошо.

Решение ②: Инструмент управления интерфейсом

представлять:

rap(Али прекратил обслуживание, использует rap2)

swagger

moco(Ссылаться на, Аналогично макету внешней обработки, json поддельные данные + сервис)

yapi(кунарское развитиеофициальный сайт япы)

Преимущества и недостатки (инструмент управления интерфейсом)

преимущество:

Мощная функция конфигурации, управление интерфейсом интегрировано с Mock, а интерфейс внутренней модификации Mock также изменен, что является надежным.

Существует единый фон управления интерфейсом, который легко найти и использовать.

недостаток:

Конфигурация сложна и зависит от серверной части, и серверная часть может не хотеть предпринимать какие-либо действия, или интерфейс может быть разработан после завершения настройки. Мок-данные контролируются бэкендом, и если возникает какая-то нештатная ситуация, фронтенд-студенты практически ничего не могут сделать. Есть принцип разделения на перед и зад.

Как правило, она будет существовать как инфраструктура большой команды, если такого условия нет, то это нужно тщательно продумать.

Чтобы увеличить нагрузку на фон, лучше ускорить предоставление реальных данных интерфейса, чем позволить фону решать проблемы, связанные с фиктивными данными.

Решение 3. Сервер локального узла

представлять:json-server
Принцип: использоватьlowdb, для работы с небольшой локальной базой данных (в соответствии с REST API). Функции:

Может использоваться независимо или в качестве промежуточного программного обеспечения для узловых служб.server.use(db)

db может быть файлом json (более интуитивно понятным) или файлом js (более гибким).

Вы можете установить кросс-доменность, включить gzip, установить задержку, журнал, указать маршрутизацию и т. д.json-server [options] <source>

Может быть запущен из командной строки илиjson-server.jsonЗапуск сразу после настройки

Вы можете настроить отображение маршрута (ключ — реальный маршрут, значение — фиктивный маршрут)

Простая реализация фоновых функций
过滤：GET /list?name.age=18；
分页: /users?_page=3&_limit=5
排序：/users?_sort=id&_order=desc
分隔：/users?_start=2&_end=5
运算：使用 _gte 或 _lte 选取一个范围、使用 _ne 排除一个值、使用 _like 进行模糊查找 (支持正则表达式)
......

Управление услугами

Для добавления, удаления и изменения, пожалуйста, обратитесь к примеру почтальона. (Обратите внимание, что для body-raw необходимо выбрать режим json)

преимущество:

Простая конфигурация, json-сервер может даже запустить сервер REST API с 0 кодом и 30 секундами.
Высокая степень кастомизации, все под контролем
Добавляйте, удаляйте, изменяйте и проверяйте реальную симуляцию

недостаток:

По сравнению с инструментами управления интерфейсом, он не может быть изменен автоматически, поскольку изменяется внутренний API.

Схема ④: перехват запроса [MOCKJS]

представлять:Mock.js

Функции:

Перехватывая определенный запрос AJAX и генерируя случайное число заданного типа данных, он имитирует интерфейс, предоставляемый серверными одноклассниками.
При использовании определения шаблона данных случайная генерация данных определения имеет большую степень свободы. Используя определение метода класса инструментов Random MockJS, этот метод имеет небольшую степень свободы и может только случайным образом генерировать тип данных, предоставляемый MockJS.
Обычно он используется в сочетании с другими библиотеками или используется отдельно в проекте или через обратный прокси.

Инструкция по использованию формата:

Mock.mock( rurl?, rtype?, template|function( options ) )

rurl: необязательный, перехваченный URL-адрес, который может бытьструнный или обычный(обычно используется)
rtype: необязательный, тип перехваченного запроса, строка (с учетом регистра, должна быть в нижнем регистре).
template|function( options ): Обязательно, данные возвращаются после перехвата. Шаблон, как правило, представляет собой тип объекта json; функция должна возвращать шаблон при возврате, где option содержит запрошенныйurl,type и body属性
只传template，则执行Mock.mock后返回的是``template的实际结果``。

Простой пример шоу:

Случайно генерировать цвета

Mock.mock('@color') 
"#f279ba"

Случайно сгенерированное электронное письмо

Mock.mock('@email')
"k.fxnx@newvwi.gf"

случайно сгенерированный ip

Mock.mock('@ip')
"44.122.28.106"

Случайно сгенерированный адрес области

Mock.mock('@region')
"东北"

Он также может генерировать изображения случайным образом (и может передавать параметры для настройки размера изображения, цвета и т. д.).

Random.image()

Дата и время генерируется случайным образом

Random.date()
// => "2020-10-23"
Random.date('yyyy-MM-dd')
// => "1998-01-29"
Random.time()
// => "22:44:56"
Mock.mock('@time')
// => "01:48:17"

Генерировать строки по правилам

// 指定范围的数量
Mock.mock({ "string|1-10": "★" }) // 执行后
{ "string": "★★" } // 随机生成数量为1-10个'*'字符串

// 固定数量
Mock.mock({ "string|3": "*" })  // 执行后
{ "string": "***" } // 生成指定数量的'*'（示例是3个）字符串

Генерация чисел в указанном диапазоне

// 整数
Mock.mock({ "number|1-100": 100 }) // 执行后
{ "number": 84 } // 生成1-100范围内的数字

// 小数
Mock.mock({ "number|1-100.1-10": 1 }) // 执行后
{ "number": 72.15917 } // 生成1-100的数字，随机保留1-10位小数

Генерировать случайное количество объектов

Mock.mock({ "object|2-4": { 
"110000": "北京市", 
"120000": "天津市", 
"130000": "河北省",
"140000": "山西省" 
}}) 
// 执行后，随机获取对象中的2-4项
{ "object": { 
"120000": "天津市", 
"130000": "河北省" 
} }

Сгенерировать указанное количество массивов

Mock.mock({ "array|1": [ "AMD", "CMD", "UMD" ] })
{ "array": "CMD" } // 随机获取对象中的一项

генерировать массив объектов

// list指定了数组当中的对象数量，最少一项，最多10项。
Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 随机的结果
{
    "list": [
        {
            "id": 1
        },
        {
            "id": 2
        }
    ]
}

......

Больше примеров можно найти по официальной ссылке

Спецификация грамматики

> Определение шаблона данных

Определить правила: 'key|rules': значение

Тип данных значения свойства может быть числом, логическим значением, строкой, объектом, массивом, функцией, нулевым значением, но не неопределенным.

'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
'regexp': /\d{5,10}/,

Пример возврата интерфейса перехвата:

步骤：
1. 创建mock.js文件
// 正则匹配 /notification\/count/ 的接口
Mock.mock(/notification\/count/, {
  "code": 200,
  "msg": "success",
  "data": {
      "count": 3
  }
})
2. 在入口中引入mock即可

其它优化：
在npm script中增加命令并添加mock环境变量，开发环境中用该命令启动。
在入口文件中使用mock环境变量判断是否加载mock.js，使mock数据和业务代码彻底分离。

> Просмотр и использование случайных

глобальное использование

npm install mockjs -g
random -h 查看可使用的模板

Актуальный

Случайно сгенерированные данные

Mock.mock( { email: '@email' } ) эквивалентен вызову Mock.Random.email(), который генерирует случайное электронное письмо.

Он также может случайным образом генерировать изображения, цвета, адреса, URL-адреса, числа с автоинкрементом и т. д.

Расширенный шаблон (шаблон для пользовательских данных MOCK)

Random.extend({
    constellation: function(date) {
        var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
        return this.pick(constellations)
    }
})

> Mock.valid(шаблон, данные) проверочные данные

var tempObj = {
  "user|1-3" : [{'name':'@name', 'id|28-338': 88}]
 };
 var realData = { "user":[{'name': '张三','id':90 }]};
 // 校验通过返回空数据，不通过则返回原因。（可以有多条原因，因此返回的是数组对象结构）
 console.log(Mock.valid(tempObj,realData));

> Mock.toJSONSchema( template )

Шаблон данных в стиле Mock.jstemplateпреобразовать вJSON Schema.

> Mock.setup( settings )

Настройте поведение при перехвате запросов Ajax. Поддерживаемые элементы конфигурации:timeout.

Mock.setup({
    timeout: 400
})
Mock.setup({
    timeout: '200-600'
})

Преимущества и недостатки (MOCKJS)

преимущество:

Отдельно от внешнего кода

Генерация случайных данных

недостаток:

Все данные являются динамически генерируемыми поддельными данными, и невозможно смоделировать ситуацию добавления, удаления, изменения и проверки.

Поддерживает только ajax, не поддерживает выборку

Решение ⑤: Инструмент захвата пакетов

использоватьCharles,Fiddlerи другие прокси-инструменты,
Общие методы лечения

Сопоставление URL-адресов с локальными файлами (отладка смешанной разработки приложений и т. д.)

Отладьте URL-адрес, измените данные ответа.

Возвратите локальные данные после перехвата, такие какCharles，Непосредственно используйте локаль карты или карту Remote.

Щелкните правой кнопкой мыши URL-адрес, скопируйте ответ

Создайте новые фиктивные данные json локально, а затем вставьте и измените ответ.

Снова посетите URL-адрес и наблюдайте за изменениями API.

Преимущества и недостатки:

Преимущества: Mock удобен для устранения неполадок смешанной разработки, устранения неполадок онлайн и т. д.
Минусы: Отладка относительно утомительна.

Схема ⑥: Комбинированный режим

представлять:easy-mock(Предоставление онлайн-сервисов и интерфейсных агентов, поддержка mockjs,Swagger, стиль рестапи)
генератор фреймворка узла +json-server+ макеты.

REST API

URI означает Ресурс/Объект, МЕТОД означает Поведение.Вууху. Руан Ифэн.com/blog/2014/0…

GET /tickets // 列表
GET /tickets/12 // 详情
POST /tickets  // 增加
PUT /tickets/12 // 替换
PATCH /tickets/12 // 修改
DELETE /tickets/12 // 删除
资源负数名称表示对应表的资源集合，方法动词。

точкаяучитьсяpatch vs put

Другие ссылки на программы

apifox

Документация по API, отладка, Mock, интегрированная платформа поддержки автоматизированного тестирования
Есть довольно много людей, которые прочитали комментарии и порекомендовали его, кому интересно, могут попробовать. Поддержка HTTP, TCP, RPC, (2020-12-28首版发布)

Общие решения:

Управляйте документацией API с помощью Swagger

Отладка API с Postman

Моделируйте данные API с помощью таких инструментов, как RAP.

Автоматизированное тестирование API с помощью JMeter

jsonplaceholder

Очень удобно, просто получайте удаленные данные напрямую, эффективно и просто в использованииофициальная документация jsonplaceholder

JSON Schema 数据校验json-schema.org

Наконец

Мок — это не только фиктивные данные, но и фиктивные функции. Используя Mock для максимально возможного совершенствования функций, мы можем делать больше с меньшими затратами во время совместной отладки.

Если вы найдете это полезным, пожалуйста,点赞、关注Служба поддержки. Если в статье есть недостатки, вопросы или предложения, я надеюсь оставить сообщение ниже👇🏻, большое спасибо.

Принцип данных MOCK может относиться к этой статье, которую я написал ранее:Как Javascript полностью берет на себя запросы xhr

автор:tager
Адрес связанной статьи:https://juejin.cn/user/4353721776234743/posts
Авторские права принадлежат автору. Для коммерческих перепечаток, пожалуйста, свяжитесь с автором для получения разрешения, а для некоммерческих перепечаток, пожалуйста, укажите источник.