1. Введение

• 1.1, что ты увидишь?

  • Личное понимание и сценарии применения mock.
  • В соответствии с вашим реальным рабочим проектом я научу вас подробным инструкциям по развертыванию mockjs вручную, вместо того, чтобы копировать простые примеры с официального сайта.После прочтения вы можете использовать его в своих собственных проектах для удовлетворения потребностей обычных рабочих проектов.
  • Преимущества и недостатки этого метода обучения и реализации MockServer через dev-сервер узла.
  • Применимые сценарии для этой нотации.
  • Наконец, моя среда разработки — vue2+elementUI2+nginx..

• 1.2, Чего ты не увидишь?

  • Вы не увидите пошагового объяснения фиктивного синтаксиса, этоофициальная документацияЭто было подробно объяснено.Если у вас все еще есть много сомнений по поводу использования, то вы можете сами набрать код в проекте и попрактиковаться!На самом деле это намного быстрее, чем ваш поиск в Du Niang и Google, и это впечатляет еще больше!
  • Вы не увидите инструкций по использованию связанных mock-фреймворков, таких как json-server, easy-mock (этот еще очень полезен!) и т. д.

2, функции mockjs и применимые сценарии

• 2.1, Особенности mockjs

  • 生产数据: с помощью методов, предоставляемых mockjs, вы можете легко создаватьМного случайного текста, чисел, логических значений, дат, электронных писем, ссылок, изображений, цветов и т. д..

  • 强大的拦截功能:mockjs может выполнять мощный перехват ajax.Может определить тип запроса, получить URL-адрес, параметры запроса и т. д. Затем вы можете вернуть фиктивные поддельные данные или свой собственный файл json..Мощный и простой в использовании.

• 2.2, применимые сценарии mockjs

  • Разделение интерфейса и сервера: благодаря mockjs запросы данных на интерфейсе могут быть самодостаточными,"Независимость"В back-end разработке.На ранней стадии проекта front-end может концентрироваться на собственном отображении front-end, а back-end может концентрироваться на собственном back-end интерфейсе и обработке данных.Но самое главное Страшная ситуация разделения фронтенда и бэкэнда:前端自己玩自己的,后端也自己玩自己的.等到联调时,发现接口完全牛头不对马嘴!Поэтому во время разработки интерфейс и сервер должны постоянно поддерживать связь.Своевременно подтверждайте новейший интерфейс и структуру данных.Для управления рекомендуется использовать swagger.
  • Удобное модульное тестирование: поскольку mockjs может генерировать много случайных данных и имитировать множество сценариев запросов, он может гарантировать подлинность части единого теста, однако я чувствую, что он не может полностью заменить реальный внутренний интерфейс, и ситуация внутренняя обработка более сложна.

3, практика проекта mockjs

• 3.1, установите mockjs

npm install mockjs --save-dev

   Проверьте, успешно ли установлен mockjs.Вы можете найти наличие mockjs в package.json и package-lock.json.

• 3.2, создайте фиктивную структуру папок

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

  Описание каждого файла:

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

  test: Сохраните соответствующие фиктивные файлы в соответствии с классификацией модуля проекта. Например: хранилище устройства — это фиктивный файл, необходимый для модуля устройства устройства. Здесь тест — это фиктивный файл, необходимый для этой демонстрации.

  test-mock.js:mock основной файл. В основном фиктивные данные, которые обрабатывают запросы на перехват.

  test-json.json: хранить поддельные данные в формате json.

  index.js: файл, представленный позже в main.js, предназначен для импорта mock.js всех модулей.

  utils.js: В соответствии с требованиями проекта, напишите в нем часто используемые методы моделирования данных.Модулю удобно имитировать поддельные данные.

• 3.3, Описание test-json.json.

На этапе определения интерфейса документ интерфейса, предоставленный бэкэндом, будет иметь запрошенный интерфейс и возвращаемый экземпляр данных. Хотя в настоящее время доступ к интерфейсу недоступен, с mockjs наш интерфейс уже может делать запросы ajax. И в json Среда файла. Скопируйте и вставьте экземпляр данных в документ интерфейса, а затем измените его, чтобы завершить самую примитивную и простую реализацию данных. Однако, если к данным предъявляются особые требования, их количество велико, а структура очень сложна, это для создания данных рекомендуется использовать метод mockjs.

Amway здесь для чванства,картинка выше взята из чванства.На данный момент вам нужно только скопировать экземпляр данных под ExampleValue.Затем вставить его в файл json,а затем немного изменить его для завершения.Я не буду его писать здесь он будет занимать место. На самом деле при моделировании простых данных этот метод можно использовать вполне, нет необходимости использовать mock-метод.

• 3.4, Описание test-mock.js (курсив)

import Mock from 'mockjs' //引入mock 
import testJson from './test-json.json' //引入上面创建的json假数据 
import utils from '../utils' //引入公用方法   
const res =function (opt) {
  //opt为ajax请求的选项集.包含url,type和body三个属性
  // opt.url为请求的url.
 //opt.type为请求类型,例如get,post,delete
 //opt.body为请求的参数   
 
//1, 使用mock方法来造数据
  let mockData =Mock.mock({
  'code':0,
  'msg':'成功',
  'list|1-10':[{
  'id|+1':1
  }]
 });  
 let data=JSON.stringify(mockData,null,4);//将数据进行转换    

//2, 对请求参数进行判断
  let param=opt.body;//用param保存请求的参数
  let result; //用result保存对param校验的结果    

//... 省略对param进行校验的过程    

//3, 根据校验的结果返回数据
  if(result===true){
  //此时校验结果正确
  return data;
  //return testJson 也可以返回之前写好的json文件.自己看情况选择.数据不复杂情况下,我是直接返回.json文件.
  }else {
   return {
  //校验错误,则返回错误提示信息
     'msg':'请求参数错误'
  }
 } 
}   

Mock.mock(/devicemanage\/api\/pc\/dm\/device\/structure\/query\?token=/,'post',res)
//这里使用mock()的函数写法.这样就可以获取到请求的参数,这里url是正则的写法.
//Mock.mock(rul,rtype,function(opt))  
//rul:需要拦截的url.这里有两种写法,一种是字符串形式,例如:'/api/device'则表示只能拦截/api/device请求.但我们可能会经常需要在url上添加token等其他参数.
//这时就需要写成第二种形式,正则表达式/api\/device/,这样我们就能拦截所有包含/api/device的请求.这样我们在进行ajax请求时,就可以直接编写真实的url地址.
//rtype:表示需要拦截的ajax请求类型.例如:get,post,put,delete等.
//function(opt):响应数据的函数,其中opt已经在代码最上面进行了说明.

• 3.5, Описание index.js

import device from './device/device-mock' 
import event from './event/event-mock' 
import home from './home/home-mock' 
import log from './log/log-mock' 
import patrol from './patrol/patrol-mock' 
import test from './test/test-mock'

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

• 3.6, Описание utils.js

Этот файл js предназначен для хранения общедоступных методов, которые вам нужны (таких как преобразование формата json), и фиктивных данных, обычно используемых в проекте (таких как список устройств и организационная структура, обычно используемых нашей компанией).Я не буду публиковать свою собственную компанию код здесь Официальный документ издевается над часто используемыми данными и экспортирует их.

• 3.7, Инструкции, представленные в main.js

import mock from '../mock/index'

  Это также очень просто ввести в main.js. Просто импортируйте index.js, написанный выше. На этом этапе вы завершили проектную практику mockjs. Поторопитесь и посмотрите!

4. Почему я не использовал встроенный сервер разработки для создания Mock Server?

   Резюме в одном предложении заключается в том, что оно временно не подходит для проекта. Ниже приведены основные причины, которые представляют только личные взгляды и ситуацию проекта. Если вы чувствуете, что у вас есть другие взгляды или лучшие предложения и идеи,Комментарии и исправления приветствуются.

• Используйте проект mockjs напрямуюМеньше структурных модификаций и более простое написание грамматики.Многие туториалы в интернете модифицируются на dev-сервере.Потом перехватываются через proxyTable или с помощью хука before.Но мне кажется,что это все равно очень сложно,структура не очевидна,а синтаксис и использование экспресса нужно быть относительно достаточным Поймите, иначе легко сообщить об ошибке при его модификации, и это не очень безопасно.
• Когда вы изменяете mockjs, веб-страница будет автоматически обновляться, и вы увидите данные вашего макета. Если вы измените его на сервере разработки, вам нужно снова запустить разработку. Хотя вы можете устанавливать плагины без ручной разработки, эффективность И удобство все еще не так хорошо, как автоматическое обновление.
• С точки зрения перехвата запросов mockjs имеет наивысший приоритет. -server При перехвате, а у вас, как и у меня, nginx настроен перед проектом, хлопот будет больше. Возможно, вам также нужно настроить nginx, чтобы он не перехватывал запросы dev-сервера. back-end интерфейс завершен, вы должны изменить его обратно.(Например: nginx перехватывает /devices, но в этот раз необходимо перехватить новый путь интерфейса /devices/newApi на dev-сервере. В это время вы может Конфигурация nginx должна быть изменена.)
• Метод mock(), предоставляемый mockjs, может более просто и удобно ограничить тип запроса и получить параметры запроса, а также вернуть соответствующие данные. И вы также можете вернуть файл .json или фиктивные данные в соответствии с вашими предпочтениями.
• На самом деле, эта файловая структура также может обеспечить модульное управление фиктивными файлами, и реализация не сложна, нет необходимости использовать dev-сервер для модульности.

   Недостатки этой нотации:

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

5, применимые сценарии

• 5.1 Подходит для:

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

• 5.1 Не подходит для:

  Если есть много разработчиков внешнего интерфейса, существует межрегиональное сотрудничество, коммуникация затруднена, а внутренний интерфейс необходимо часто изменять. Такой способ написания не подходит! В настоящее время рекомендуется использоватьeasy-mock.После развертывания в локальной интрасети вы можете с удовольствием работать с другими внешними и внутренними партнерами. Сохраняйте фиктивные данные и интерфейсы вместе.